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