CODEWITHSUNDEEP
javascriptjqueryhtmlforms
jd8842
jd8842

Reputation: 107

Blocking 'submit' on a form

I am creating a form:

<input type="checkbox" id="chk1">1<select name="sel1" id="sel1" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt1" id="txt1" class="txt"/><br />
<input type="checkbox" id="chk2">2<select name="sel2" id="sel2" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt2" id="txt2" class="txt"/><br/>
<input type="checkbox" id="chk3">3<select name="sel3" id="sel3" class="sel">
  <option value="..."></option>
  <option value="a">a</option>
  <option value="b">b</option>
  <input type="text" name="txt3" id="txt3" class="txt"/><br />
<button type="submit" class="btn btn-default">Submit</button>

And I am trying to create a block on the submit button so that if a checkbox is checked: the textbox can't be empty, and the dropdown has to have a different value than '...' If either of those is the case, user clicks 'submit' and nothing should happen...if all is satisfied though, then they click submit, and it goes through.

Javascript/jQuery logic I'm aiming for is something like

if ($(":checkbox:checked").length != 0) {
  if ($(".txt").val === ("")) {
    return false;
  }
  else {return true}
  if ($(".sel").val === "...") {
    return false;
  }
  else {return true}
}

Upvotes: 1

Views: 123

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

DEMO

First of all I would like to correct your html and do wrap each checkbox,input, select in a group element so that you can easily get its corresponding values. You select had syntax error and select is not a self closing tag like <select/> instead it is <select>..</select>. Hence below is the updated code:

<form id="frmDetails">
    <div class="container"> <!--wrap them in each container-->
        <input type="checkbox" id="chk1" value="1"/>
        <select name="sel1" id="sel1" class="sel">
              <option value="0">Select</option>
              <option value="a">a</option>
              <option value="b">b</option>
        </select>
        <input type="text" name="txt1" id="txt1" class="txt"/><br />
    </div>
    <div class="container">
        <input type="checkbox" value="2" id="chk2"/>
        <select name="sel2" id="sel2" class="sel">
             <option value="0">Select</option>
             <option value="a">a</option>
             <option value="b">b</option>
        </select>
        <input type="text" name="txt2" id="txt2" class="txt"/><br/>
    </div>
    <div class="container">
        <input type="checkbox" id="chk3" value="3"/>
        <select name="sel3" id="sel3" class="sel">
              <option value="0">Select</option>
              <option value="a">a</option>
              <option value="b">b</option>
        </select>
        <input type="text" name="txt3" id="txt3" class="txt"/><br />
    </div>
    <button type="submit" class="btn submit btn-default">Submit</button>
</form>

Then your js would be as below:

var valid; //A global variable to check the validation
function validate(){
    valid=true; //set it to true at beginning
    $.each($('#frmDetails input:checkbox'),function(){
       //loop through each checkbox
       if($(this).is(":checked")) //if it is checked
       {
           var selected=$(this).siblings('select').find('option:selected').val()
           //get selected value of its select element
           var text=$(this).siblings('input').val();
           //get value entered in its corresponding textbox
           if(text=="" || selected=="0") if text="" or selected value=0
           {
               valid=false;//set valid to false
               return valid;//return it
           }
       }
    });
    return valid; //else this will be true
}

$(".submit").on('click',function(e){
    e.preventDefault(); //prevent default action of submit
    if(validate()) //validate returns true or false
    {
        $("#frmDetails").submit(); //submit the form if valid
    }
    else
    {
        alert('Form is invalid, You cannot submit it');
        //do whatever your want here
    }
});

Upvotes: 3

Farhan
Farhan

Reputation: 1483

use Jquery to prevent form submitting

 $("button[type='submit']").on("click", function(e){
    e.preventDefault();
    if ($(":checkbox:checked").length != 0) {
      if ($(".txt").val === ("")) {
        return false;
      }
      else {$("#myForm").submit();
    }
      if ($(".sel").val === "...") {
        return false;
      }
      else {$("#myForm").submit();}
    }
    });

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

event.preventDefault() will do that blocking for you. It will prevent the form to get submitted. Instead of returning false like native javascript. Collect that returning result in a cache variable then execute event.preventDefault() when it evaluated to false.

Upvotes: 1

Related Questions