PDA

View Full Version : JavaScript POST Form



patrickfrog
Jan 6th, 2014, 09:02 PM
Hello, I have research this issue at multiple locations but am unable to get this code to work. I am using some simple JavaScript to validate a form when the user presses the submit button. The validation works fine, however I cannot get the form to submit to the PHP script.

HTML form code:


<form method="POST" id="mainForm" name="NEWSWEB Trouble Report Form" action="/PHPmailer/sendMail.php">


JavaScript code:


function validateForm()
{

var myForm = document.forms["NEWSWEB Trouble Report Form"];
var inputCollection = myForm.querySelectorAll("input, textarea");
var errors = 0;

for (i=0; i<inputCollection.length; i++)
{
var element = inputCollection[i];
var str = element.value;
str = str.trim();

if (element.getAttribute("data-isRequired") == 'false' || element.getAttribute("data-isRequired") == null) continue;

if (str == "")
{
errors++;
element.style.backgroundColor = "#EB9999";
}
}

if (errors == 0) {
alert('Submitting form');
document.getElementById('mainForm').submit();
}
}


I also attempted to use the form object I retrieved at the start of the above function and call the submit method. The debugger is throwing: Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

Thanks for your help

Philip M
Jan 6th, 2014, 09:48 PM
A form name may not contain spaces. Use camelCase instead.

In HTML4 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

In any case assigning a name to a form is long obsolete and allowed only for the sake of backwards compatibility.

You can use the bracket notation (as you have done here) for objects as well as arrays. This allows you to access attributes where the names are invalid in a . notation syntax. But this is not recommended.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

glenngv
Jan 9th, 2014, 12:28 AM
It is recommended to call the validateForm() method on form submit. Then in the validateForm() function, you just need to return true (valid) or false (invalid).


function validateForm() {
var inputCollection = this.querySelectorAll("input, textarea"), //"this" refers to the form object
isValid = true,
i;

for (i=0; i<inputCollection.length; i++)
{
var element = inputCollection[i];

if (element.getAttribute("data-isRequired") == 'false' || element.getAttribute("data-isRequired") == null) continue;

var str = element.value.trim();
if (str == "")
{
isValid = false;
element.style.backgroundColor = "#EB9999";
}
}

return isValid;
}
document.getElementById('mainForm').onsubmit = validateForm;
Then in the form, you must have a submit button.

<form method="POST" id="mainForm" name="mainForm" action="/PHPmailer/sendMail.php">
...
<input type="submit" value="Send" />
</form>

felgall
Jan 9th, 2014, 03:21 AM
You don't need either a name nor an id on the form tag.

Any id inside the form itself is sufficient to use to provide access to the form as the form property of any field inside the form points to the form itself.