点击时事件会触发两个表单的提交

On click event triggers submission of both forms

本文关键字：两个 表单 提交 事件      更新时间：2023-09-26

我有一个下拉框，一旦单击就会更新我的 MYSQL 查询结果的分页结果，这工作正常。 我遇到的问题是页面上有两种表单，第一种用于分页下拉框，第二种用于一些额外的过滤器。

当我单击以更新分页结果时，onlick 元素会从两个表单提交数据，而不仅仅是分页表单。

我是javascript

的新手，所以我可能有错误的想法，但我认为javascript只会提交表单中带有表单名称/ID的数据。

用于分页的 HTML 下拉框。

 <form id="form" name="form" method="GET" action="">
         <label for="pagination"></label>
            <select name="pagination" id="pagination">
              <option value="10">10 Items Per Page</option>
              <option value="20">20 Items Per Page</option>
              <option value="30">30 Items Per Page</option>
              <option value="40">40 Items Per Page</option>
              <option value="50">50 Items Per Page</option>
              <option value="75">75 Items Per Page</option>
             </select>
       </form>

第二种形式的网页

         <form name="filter" id="filter" method="GET" action="visitor_list8.php">
            <label for="referrer"></label>
              <select name="referrer" id="referrer">
                <option value="">Select</option>
                <option value="Adwords">Adwords</option>
                <option value="Bing">Bing</option>
                <option value="Direct">Direct</option>
                <option value="Google">Google</option>
                <option value="Yahoo">Yahoo</option>
               </select>
             <label for="visitor_type"></label>
               <select name="visitor_type" id="visitor_type">
                 <option value="">Select</option>
                 <option value="Not Set">New</option>
                 <option value="returning">Returning</option>
               </select>
              <label for="sortby"></label>
                <select name="sortby" id="sortby">
                 <option value="">Select</option>
                 <option value="timedate">Date / Time</option>
                 <option value="page_views">Page Views</option>
                 <option value="referrer">Referrer</option>
                 <option value="search_term">Search Term</option>
                 <option value="visitor_type">Visitor Type</option>
                 <option value="company_name">Company Name</option>
                 </select>
      <input type="submit" name="button" id="btn-submit" class="btn-submit" value="Submit">
           </form>

爪哇语

          $(document).ready(function() {
            $('#pagination').change(function() {
              $('form').submit();
                       });
                     });

将$('form').submit();更改为$('#form').submit();

$('form').submit();将提交页面上的每个表单，而 $('#form').submit();将提交带有ID form的表格。

也许考虑将form id更改为其他内容以避免混淆。

尝试以下操作以提交包含选择

$(document).ready(function() {
    $('#pagination').change(function() {
        this.form.submit();
    });
});

使用

$('#form').submit();

因此，您只会在指定的表单上触发提交，而不是触发所有表单。

是的，你的选择器太笼统了。 $（'#form'）.submit（） 或 $（'#filter'）.submit（）。

相关文章：