Develop Reference

Auto Submit Form with Javascript

function onSubmit() {
if (document.getElementById('password').value == '1' && document.getElementById('password2').value == '1') {
window.location.href = 'http://google.co.in';
}
else{
alert('Please check your passcode and try again');
}
}
<fieldset>
<form class="hero-form" action="#">
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required/>
<input type="password" name="password" maxlength="1" class="span7" id="password2" required/>
</div>
</form>
</fieldset>
<button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>
Is it possible to have the form auto submit after the password is entered, instead of having to press a submit button? For example, allowing the user to keep trying numbers until they get it correct.

You mean something like this? I delegate the test of input to the form
I also fixed your weird HTML structure
window.addEventListener("load", function() {
document.getElementById("heroForm").addEventListener("input", function(e) {
const val1 = document.getElementById('password').value;
const val2 = document.getElementById('password2').value;
if (val1 && val2) {
if (val1 === '1' && val2 === '1') {
window.location.href = 'http://google.co.in';
} else {
alert('Please check your passcode and try again');
}
}
})
})
<form id="heroForm" class="hero-form" action="#">
<fieldset class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required/>
<input type="password" name="password" maxlength="1" class="span7" id="password2" required/>
</fieldset>
</form>

function onSubmit() {
if (document.getElementById('password').value && document.getElementById('password2').value) {
if (document.getElementById('password').value == '1' && document.getElementById('password2').value == '1') {
window.location.href = 'http://google.co.in';
} else {
alert('Please check your passcode and try again');
}
}
}
<fieldset>
<form class="hero-form" action="#">
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required oninput="onSubmit()" />
<input type="password" name="password" maxlength="1" class="span7" id="password2" required oninput="onSubmit()" />
</div>
</form>
</fieldset>

how to submit a form using jQuery

I can't manage to submit the form after it's validated. the validation code works- the "alert()" text comes up, though the form is not submitted.
I've tried many options but none of them worked, please help.
Thank you!
HTML:
<label for="name"> Name: </label>
<input class="inputfield" type="text" name="name" required placeholder="Full name" />
<br />
<label for="phone"> Phone Number: </label>
<input class="inputfield" type="text" id="phone" name="phone" required placeholder="Phone Number" />
<br />
<!-- <label for="email"> E-mail: </label>
<input class="inputfield" type="email" id="email" name="email" required placeholder="Email adress" />
<br /> -->
<label for="message"> Message: </label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"> </textarea>
<br />
<div id="error"></div>
<input class="submitform" type="submit" name="submit" value="Send" />
</form>
</div>
jQuery:
$("#validation").submit(function(event){
var errorMessage = "";
event.preventDefault();
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
}
});

Your call to event.preventDefault(); is preventing the submit. Try it like this:
$("#validation").submit(function(evt){
var errorMessage = "";
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
evt.preventDefault();
}
});

focus on empty field when submit button is clicked in form

here is my html code
<section class="main">
<form class="form-2" name="form1" id="form1" method="POST" onsubmit="check()">
<input type="text" id="name" name="name" placeholder="Your Name" >
<input type="text" id="username" name="username" placeholder="Username" >
<input type="text" id="mail" name="mail" placeholder="E-mail id" >
<input type="text" id="phone" name="phone" placeholder="Mobile Number" >
<input type="password" id="pass1" name="pass1" placeholder="Password" >
<input type="password" id="pass2" name="pass2" placeholder="Re-type Password" >
<button type="submit" name="submit" ></button>
</form>
</section>
my javascript :
function check () {
var name = document.getElementById('name').value;
var mail = document.getElementById('mail').value;
var numb = document.getElementById('phone').value;
var pass1 = document.getElementById('pass1').value;
var pass2 = document.getElementById('pass2').value;
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
}
Am trying this - When the submit button is clicked it checks for empty fields. If empty fields are available it must focus the name textbox.
The above code actualy focuses the field but the page is immediately getting loaded and the values are getting reset. I don't want the page to load. Thanks in advance !

Return false from the check method
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
return false;
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
return true;
}
Update :
<form onsubmit="return check()">

Add in HTML
<form class="form-2" name="form1" id="form1" method="POST" onsubmit="DoSubmit();">
<input type="hidden" name="message" value="0" />
<input type="text" name="message" value="" />
<input type="hidden" name="submit" value="0" />
<input type="submit" name="submit" value="" />
<input type="hidden" name="name" value="0" />
<input type="text" id="name" name="name" value=""placeholder="Your Name" >
<input type="hidden" name="username" value="0" />
<input type="text" id="username" name="username" value=""placeholder="Username" >
<input type="hidden" name="mail" value="0" />
<input type="text" id="mail" name="mail"value="" placeholder="E-mail id" >
<input type="hidden" name="phone" value="0" />
<input type="text" id="phone" name="phone"value="" placeholder="Mobile Number" >
<input type="hidden" name="pass1" value="0" />
<input type="password" id="pass1" name="pass1"value="" placeholder="Password" >
<input type="hidden" name="pass2" value="0" />
<input type="password" id="pass2" name="pass2"value="" placeholder="Re-type Password" >
</form>
Then in JS
function DoSubmit(){
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
return false;
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
document.form1.message.value = '1';
document.form1.submit.value = '1';
document.form1.name.value = '1';
document.form1.username.value = '1';
document.form1.mail.value = '1';
document.form1.phone.value = '1';
document.form1.pass1.value = '1';
document.form1.pass2.value = '1';
return true;
}
}

Change onsubmit="check()" to onsubmit("check();return false")

Checkbox is not copying exact values to other fields

I have 5 6 fields that whom data I need to get in below 6 fields as well. The problem here is some of the values are not copying in the appropriate text fields.
I am posting my html as well. It's small form.
My html with js in it as well.
<input class="width_367" type="text" name="fname" id="email" required>
<input class="width_367" type="text" name="mname" id="pass" required>
<input class="width_367" type="text" name="lname" id="email" required>
<input class="width_367" type="text" name="address" id="address" required>
<input class="width_367" type="text" name="city" id="city" required>
The checkbox:
<p align="left" style="width: 425px !important;">
<input type="checkbox" name="chkOption" value="yes">
Check here if Recipient Address is the same as Billing Address </p>
<input class="width_367" type="text" name="rfname" id="email" />
<input class="width_367" type="text" name="rmname" id="pass" />
<input class="width_367" type="text" name="rlname" id="email" />
<input class="width_367" type="text" name="raddress" id="address" />
<input class="width_367" type="text" name="rcity" id="city" />
onclick="javascript: if (chkOption.checked){
rfname.value=fname.value;
rmname.value=mname.value;
rlname.value=lname.value;
raddress.value=address.value;
rcity.value=city.value;
rstate.value=state.value;
recstate.value=usestate.value;
rCountry.value=Country.value;
rzip.value=zip.value;
remail.value=email.value;
}else{
rfname.value = '';
rmname.value = '';
rlname.value = '';
raddress.value = '';
rcity.value = '';
rstate.value = '';
recstate.value = '';
rCountry.value = '';
rzip.value = '';
remail.value = '';
}"

function() isn't reacting on form submit

to bring it to the point: my function isn't telling me anything when i submit the form. The url changes, but it seems like the function isnt fired. Please help!
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
</script>
Thanks in advance!
PS: Searched it already on google but didn't found a good result.

Use it:
$('form[name="contact"]').on('submit', function() {
$('.error').hide();
var name = $("input#name").val();
if (name.length == 0) {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email.length == 0) {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone.length == 0) {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
return true;
});

First, add the event parameter to the button click handler, like this:
$(".button").click(function(e)){
Then also change
return false;
To
e.preventDefault();
EDIT:
This code works for me. When you click the button with fields empty, form is not submitted and it shows the error text next to the first field. By the way, there is no php involved here, just html and jquery. Are you loading jquery in your page?
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function(e) {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
e.preventDefault();
return;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
e.preventDefault();
return;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
e.preventDefault();
return;
}
});
});
</script>