Question

我正在创建一个表单：

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

我正在尝试在提交按钮上创建一个块，以便在选中复选框时：文本框不能为空，并且下拉列表必须具有与“...”不同的值。如果其中任何一个在这种情况下，用户点击“提交”并且不会发生任何事情......如果所有人都满意，那么他们点击提交，然后就会通过。

我的目标是Javascript / jQuery逻辑就像

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

Answer 1

<强> DEMO

首先，我想更正html wrap，checkbox input，select，element组syntax error这样您就可以轻松获得相应的值。您选择 select 而tag不是自<select/> <select>..</select>，而是<form id="frmDetails"> <div class="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>，而不是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 } });。因此，下面是更新的代码：

Starttime               EndTime
2005-10-12-21.40.37     2005-10-19-16.44.05
2005-10-12-21.40.57     2005-10-21-12.48.35

然后您的 js 将如下所示：

SELECT * FROM Table WHERE EndTime >= :param1 AND EndTime < :param2

Answer 2

event.preventDefault()会阻止您。它会阻止表单提交。而不是像本机javascript一样返回false。收集返回的结果cache variable，然后在评估为event.preventDefault()时执行false。

Answer 3

使用Jquery来阻止表单提交

 $("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();}
    }
    });

阻止表单上的“提交”

3 个答案: