Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JavaScript POST Form

    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:
    Code:
    <form method="POST" id="mainForm" name="NEWSWEB Trouble Report Form" action="/PHPmailer/sendMail.php">
    JavaScript code:
    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.
    Last edited by Philip M; 01-06-2014 at 10:01 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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).

    Code:
    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.
    Code:
    <form method="POST" id="mainForm" name="mainForm" action="/PHPmailer/sendMail.php">
    ...
    <input type="submit" value="Send" />
    </form>

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •