Debugging From with OnClick and multiple elements

[jolo333]

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 Javascript:
<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-\.]+@([\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>

[neroux]

I just ran your code through a beautifier and there seem to be syntax issues you'd need to resolve first. post() is not properly called and has myFunction() somewhat as an argument.

$(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-\.]+@([\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;
     }
    }
   );
 });
});