jQuery阻止表单提交

Question

我的HTML

<p><select name="status" class="form-control" id="showThisItem">
    <option value="">
        Select Status
    </option>
    <option value="Paid">
        Paid
    </option>
    <option value="Unpaid">
        Unpaid
    </option>
</select></p>

<td id="showHide">
    <label>Due Date</label>
    <input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true"> 
</td>

我的jquery代码

$('#showHide').hide(500);
var showThis = $('#showThisItem');
var select = this.value;
showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500);
    }
    else {
        $('#showHide').hide(500);
    }
});

我使用此代码显示td元素。当我选择Paid隐藏td时，当我选择Unpaid时，会显示td。它在页面加载时隐藏。

但是，如果我选择Unpaid，那么我可以提交表单，如果我选择paid，则提交按钮不起作用。

Answer 1

您的输入列为required：

<input type="text" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required="true">

这将导致表单无效并且不允许其提交。如果仅在选择取消付款时才需要，那么当选择取消付款时，我会考虑使用jQuery动态设置该属性。

像

这样的东西

<script>
 $('#showHide').hide(500);
  var showThis = $('#showThisItem');
  var select = this.value;
  showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500).find('input').prop('required',true);
    }
    else {
      $('#showHide').hide(500).find('input').prop('required',false);;
    }
});
</script>

Answer 2

这是因为due_date输入具有required属性。

在更改可见性时，您也应该切换它：

showThis.change(function () {
    if ($(this).val() == 'Unpaid') {
        $('#showHide').show(500);
        $('#showHide :input').prop('required', true);
    }
    else {
        $('#showHide').hide(500);
        $('#showHide :input').prop('required', false);
    }
});

Answer 3

我不确定这是否是您正在寻找的，但认为它可能有所帮助。下次尝试更清楚地提出你的问题

我不确定您是否需要在日期字段中维护所需的内容，或者您​​是否只需要在需要时将其标记为付费

＆＃13;

＆＃13;

$(document).ready(function() {
  
  $('#showHide').hide();
  //event binding should be in a document ready 
  //to make sure that the binding is done after the elements exist

  $('#showThisItem').change(function(e) {
    //bind a change event to the select element
    console.log('VALUE: ' + $(this).val())
    if ($(this).val() == 'Unpaid') {
      $('#datepicker').prop("disabled", true);
      
      $('#showHide').hide(500);
    } else {
      $('#datepicker').prop("disabled", false);
      $('#showHide').show(500);
    }

  });

  $('.submit').click(function(){
    var data = $('#paidForm').serialize();
    console.log(data);
  });
  




});

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form id="paidForm">
  <table>
    <tr>
      <td>
        <select name="status" class="form-control" id="showThisItem">
          <option value="">
            Select Status
          </option>
          <option value="Paid">
            Paid
          </option>
          <option value="Unpaid">
            Unpaid
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td id="showHide">
        <label>Due Date</label>
        <input type="Date" name="due_date" class="form-control" data-date-format="mm/dd/yy" id="datepicker" required='required' disabled='disabled'>
      </td>
    </tr>
    <tr>
      <td>
        <button class='submit' type="submit" class="btn btn-default">Submit</button>
        <td>
    </tr>
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;