I have been reading several posts realted to this matter here on Stack Overflow and been reading the W3 Schools tutorials on Javascript and HTML forms.
I am creating an XHTML form with required fields for users to submit personal data (Name, Address, Phone). I want the onsubmit attribute to pass each input value as an argument to my external javascript function website_form_error().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script src="http://othermindparadigm.com/web_frm_err.js" type="text/javascript"></script>
</head>
<body>
<p class="mid" id="frm_responder"> </p>
<form action="/webformmailer.php" method="post" onsubmit="javascript:website_form_error(document.getElementById('Name').value,document.getElementById('Address').value,document.getElementById('Phone').value)">
<p>
* Name <input class="norm" type="text" name="Name" />
* Address <input class="norm" type="text" name="Address" />
* Phone <input class="norm" type="text" name="Phone" />
</p>
<input type="submit" />
</form>
</body>
</html>
The form has an external JavaScript file to be called when submitted. /web_frm_err.js
function website_form_error(Name,Address,Phone)
{
var = Name,Address,Phone,response ;
response = (Name,Address,Phone == undefined)
?
"Your specifications have been sent to Other Mind Paradigm"
:
"Form incomplete. You must fill in all required fields." ;
document.getElementById("frm_responder").innerHTML = response ;
}
I want the website_form_error() function to cancel the form submission and redirect back to the form and insert a message into <p id="frm_responder"> when the user has not filled in all of the required fields.
My website_form_error() function does not yet have a way to cancel the submission and the text to be inserted does not trigger. I'm sure there is something wrong with my Javascript. Any answers?
I think you should use simple button instead of submit button, on the simple button add a custom method on the event of onclick and use submit() in that custom method.
Well after days of frustration and reading, research, reading, reasearch I have got the form to cancel and error message to insert without event propagation. When the user completes the required fields the form is sent. One struggle I had was because I have a checkbox in the form. Checkboxes should be called for their checked state as a boolean for easier validation document.getElementById("Agree").checked, not by their values as this became a nightmare trying to solve.
My external Javascript /web_frm_err.js. This is as simplified as I could get. Each argument Name,Phone,Email,Theme,Images,Agree gets assigned a new variable name (n , p , e , t , i , a) in the function parameters.
function website_form_error(n , p , e , t , i , a)
{
var att = document.getElementById("err") ;
if ((n != "") && (p != "") && (e != "") && (t != "") && (i != "") && (a == true))
{
return true ;
}
else
{
att.innerHTML = "Form incomplete. You must complete all required (*) fields." ;
att.style.color = "Red" ;
return false ;
}
}
My XHTML form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script src="/web_frm_err.js" type="text/javascript"></script>
</head>
<body>
<form onsubmit="javascript:return website_form_error(document.getElementById('Name').value , document.getElementById('Phone').value , document.getElementById('Email').value , document.getElementById('Theme').value , document.getElementById('Images').value , document.getElementById('Agree').checked)" action="/webformmailer.php" method="post">
* Name <input type="text" id="Name" />
<br /> * Phone <input type="text" id="Phone" />
<br /> * Email <input type="text" id="Email" />
<br /> * Theme <input type="text" id="Theme" />
<br /> * Images <input type="text" id="Images" />
<br /> * Do you agree? <input type="checkbox" id="Agree" />
<p id="err"></p>
<br /><input type="submit" value="Send" />
</form>
</body>
</html>
An onsubmit handler attribute should return false to cancel the submission. Try using onsubmit="return website_form_error(...)" and returning a false from website_form_error to cancel the submission.
Your script should look like this:
function website_form_error(Name,Address,Phone)
{
var = Name,Address,Phone,response ;
response = (Name,Address,Phone == undefined)
document.getElementById("frm_responder").innerHTML = response ;
if(!response){
"Your specifications have been sent to Other Mind Paradigm";
return true;
}else{
"Form incomplete. You must fill in all required fields." ;
return false;
}
}
And your HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script src="http://othermindparadigm.com/web_frm_err.js" type="text/javascript"></script>
</head>
<body>
<p class="mid" id="frm_responder"> </p>
<form action="/webformmailer.php" method="post" onsubmit="javascript:website_form_error(document.getElementById('Name').value,document.getElementById('Address').value,document.getElementById('Phone').value)">
<p>
* Name <input class="norm" type="text" name="Name" />
* Address <input class="norm" type="text" name="Address" />
* Phone <input class="norm" type="text" name="Phone" />
</p>
<input type="submit" onclick="return website_form_error()"/>
</form>
</body>
</html>
