Question

如果任何输入值从相应表单中更改，我想提交表单。实际上，我已经编写了以下代码：

jQuery(document).on("change", "input", function() {
            jQuery("#form_id").submit();
        });

但是它不适用于下拉（选择）字段类型以及日期选择器字段，它适用于其他字段类型，例如文本，单选，复选框，文件等。

HTML：

<form action="" method="post" enctype="multipart/form-data" name="form_id" id="form_id" class="form-validate">
   <div>
      <div class="form-horizontal">
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_for_FirstName-lbl" for="jform_com_test_for_FirstName">
                  First Name</label>
               </div>
               <div class="col-sm-8">
                  <input type="text" name="jform[jform_com_test_for_FirstName]" id="jform_com_test_for_FirstName" value="" aria-invalid="false">
               </div>
            </div>
         </div>
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_for_DOB-lbl" for="jform_com_test_for_DOB-lbl">
                  DOB</label>
               </div>
               <div class="col-sm-8">
                  <div class="field-calendar">
                     <div class="input-append">
                        <input type="text" id="jform_com_test_for_DOB-lbl" name="jform[jform_com_test_for_DOB-lbl]" value="2018-12-17" class="calendar-textfield-class" data-alt-value="2018-12-17" autocomplete="off">
                        <button type="button" class="btn btn-secondary" id="jform_com_tjucm_test_for_draft_DOB_btn" data-inputfield="jform_com_test_for_DOB-lbl" data-dayformat="%Y-%m-%d" data-button="jform_com_tjucm_test_for_draft_DOB_btn" data-firstday="0" data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="0" data-show-others="1" data-time-24="24" data-only-months-nav="0" title="Open the calendar"><span class="icon-calendar" aria-hidden="true"></span></button>
                     </div>
                     <div class="js-calendar" style="direction: ltr; position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; display: none; left: auto; top: auto; z-index: 1060; border-radius: 20px;">
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_Country-lbl" for="jform_com_test_Country">
                  Country</label>
               </div>
               <div class="col-sm-8">
                  <select id="jform_com_test_Country" name="jform[jform_com_test_Country]">
                     <option value="">- Select Country -</option>
                     <option value="India" selected="selected">India</option>
                     <option value="South Africa">South Africa</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
      <div class="form-actions">
         <input type="button" class="btn btn-success" value="Submit" id="finalSave">
      </div>
   </div>
</form>

注意：我在日期字段中使用了js-calendar

Answer 1

在变更事件上您所做的几乎没有错。您需要在：input

上添加更改事件

jQuery(document).on("change select", ":input", function() {
        jQuery("#form_id").submit();
    });

Answer 2

您需要传递任何类，或者使用id最好是class，这样您就可以在每个公共类中调用每个地方。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
jQuery(document).on("change", ".onselect", function() {
  jQuery("#form_id").submit();
});  

</script>
<form action="" method="post" enctype="multipart/form-data" name="form_id" id="form_id" class="form-validate">
   <div>
      <div class="form-horizontal">
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_for_FirstName-lbl" for="jform_com_test_for_FirstName">
                  First Name</label>
               </div>
               <div class="col-sm-8">
                  <input class="onselect" type="text" name="jform[jform_com_test_for_FirstName]" id="jform_com_test_for_FirstName" value="" aria-invalid="false">
               </div>
            </div>
         </div>
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_for_DOB-lbl" for="jform_com_test_for_DOB-lbl">
                  DOB</label>
               </div>
               <div class="col-sm-8">
                  <div class="field-calendar">
                     <div class="input-append">
                        <input class="onselect" type="text" id="jform_com_test_for_DOB-lbl" name="jform[jform_com_test_for_DOB-lbl]" value="2018-12-17" class="calendar-textfield-class" data-alt-value="2018-12-17" autocomplete="off">
                        <button type="button" class="btn btn-secondary" id="jform_com_tjucm_test_for_draft_DOB_btn" data-inputfield="jform_com_test_for_DOB-lbl" data-dayformat="%Y-%m-%d" data-button="jform_com_tjucm_test_for_draft_DOB_btn" data-firstday="0" data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="0" data-show-others="1" data-time-24="24" data-only-months-nav="0" title="Open the calendar"><span class="icon-calendar" aria-hidden="true"></span></button>
                     </div>
                     <div class="js-calendar" style="direction: ltr; position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; display: none; left: auto; top: auto; z-index: 1060; border-radius: 20px;">
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-xs-12 col-md-6">
            <div class="form-group">
               <div class="col-sm-4 control-label">
                  <label id="jform_com_test_Country-lbl" for="jform_com_test_Country">
                  Country</label>
               </div>
               <div class="col-sm-8">
                  <select class="onselect" id="jform_com_test_Country" name="jform[jform_com_test_Country]">
                     <option value="">- Select Country -</option>
                     <option value="India" selected="selected">India</option>
                     <option value="South Africa">South Africa</option>
                  </select>
               </div>
            </div>
         </div>
      </div>
      <div class="form-actions">
         <input type="button" class="btn btn-success" value="Submit" id="finalSave">
      </div>
   </div>
</form>

jQuery提交更改后的值的表单

2 个答案: