CODEWITHSUNDEEP
javascripthtmlforms
kishore
kishore

Reputation: 141

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 !

Upvotes: 0

Views: 5500

Answers (3)

Marcin Łojewski
Marcin Łojewski

Reputation: 127

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

Upvotes: 0

Prabhu Vignesh Rajagopal
Prabhu Vignesh Rajagopal

Reputation: 1078

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;
    }
}

Upvotes: 1

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

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()">

Upvotes: 2

Related Questions