Debugging a Form that uses onclick and multiple elements

Debugging a Form that uses onclick and multiple elements
0

#1

This form is not working with multiple elements. It’s simply not submitting when we add two or more elements to it.

Form:

        <form name="myForm" id="myform" action="contact.php" method="post" onsent="clear" enctype="multipart/form-data">
          <fieldset>
            <label><strong>Your Name:</strong><input type="text" name="your_name" value="" required id="name"></label>
            <label><strong>Your E-mail:</strong><input type="text" name="your_email" value="" required id="email"></label>
            <label><strong>Your Phone:</strong><input type="text" name="your_phone" value="" required id="phone"></label>
            <label><strong>Your Property Address:</strong><input type="text" name="your_address" value="" required id="address"></label>
            <label><strong>Your Message:</strong><textarea name="your_message" value="" required id="message"></textarea></label>
              <div class="btns"><a href="#" class="button">Clear</a><a href="#" class="button" onClick="myFunction();" type="button" name="contact_submitted" value="Submit form">Send </a></div>
						
				
          </fieldset>  
        </form> 

This is the JS:

<script>
    $(function(){
		
				function validateForm()
				{
				 var x=document.forms["myForm"]["your_email"].value;
				 var atpos=x.indexOf("@");
				 var dotpos=x.lastIndexOf(".");
				 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  			 {
  			 	alert("Not a valid e-mail address");
  				return false;
  			}
				var x=document.forms["myForm"]["your_name"].value;
				if (x==null || x=="")
  			{
  			 alert("Your name must be filled out");
  			 return false;
  			 }
				 return true;
				}				 
        $('#form').submit(function(e){

            // Stop the form actually posting
            e.preventDefault();
						
						if(validateForm())

              // Send the request
              $.post('contact.php', {
                  name: $('#name').val(),
                  email: $('#email').val(),
		  phone: $('#phone').val(),
		  address: $('#address').val(),
                  message: $('#message').val(),

           }, 
					 
		function(myform){
                  console.log(myform);
                  // Here we handle the response from the script
                  // We are just going to alert the result for now
                  alert(myform);
			$('#name').val('');
			$('#email').val('');
			$('#phone').val('');
			$('#address').val('');
			$('#message').val('');								
              }
							
					// Below Function Executes On Form Submit
					function myFunction() {
					// Storing Field Values In Variables
					var name = document.getElementById("name").value;
					var email = document.getElementById("email").value;
					var phone  = document.getElementById("phone").value;
					var address = document.getElementById("address").value;
					var message = document.getElementById("message").value;
					// Regular Expression For Email
					var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
					// Conditions
					if (name != '' && email != '' && contact != '') {
					if (email.match(emailReg)) {
					if (phone.length == 10) {
					alert("All type of validation is done.");
					document.getElementById("myForm").submit();
					return true;
					} else {
					alert("The Contact No. must be at least 10 digit long!");
					return false;
					}
					} else {
					alert("Invalid Email Address...!!!");
					return false;
					}
					} else {
					alert("All fields are required.....!");
					return false;
					}
					}
					);
        });
    });
    </script>

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

This code looks like something you pieced together from different sources. Part of uses vanilla JavaScript to reference elements and other parts use JQuery. If you are going to use JQuery at all, then be consistent across the code.

When I run your code, I get a syntax error in the console, because you put two callback functions instead of the expected one for you $.post which is supposed to run upon a successful post.

You need to move myFunction (the second) outside of the $.post function.

After you move myFunction, you will have an error inside myFunction on the following line:

if (name != "" && email != "" && contact != "") {

because contact is not defined anywhere.

Fix these errors and then try to submit your form again. Make sure to check the console (Ctrl+Shft+I in Chrome) in the future, to see any JavaScript errors you may have.