Question

我有一个下拉框，一旦点击就会更新我的MYSQL查询结果的分页结果，这很好用。我遇到的问题是页面上有两种形式，第一种用于分页下拉框，第二种用于一些额外的过滤器。

当我点击分页结果时，onlick元素会提交两个表单中的数据，而不仅仅是分页表单。

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

HTML for pagination下拉框。

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

HTML for Second 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>

的Javascript

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

Answer 1

请尝试以下方法提交包含选择

的表单

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

Answer 2

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

$('form').submit();将在页面上提交每个表单 $('#form').submit();将提交ID为form的表单。

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

Answer 3

使用

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

因此，您只需触发指定表单上的提交，而不是全部触发。

Answer 4

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

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

4 个答案: