javascript - 使用 click() 重新提交表单的问题

Question

我遇到了一些有趣的事情，我对此有点困惑。

基本上我有一个表格:

<form>   
    <div class="formWrapper">
        <span>Refine your search</span>
        <input type="text">
            <select>
                <option>English</option>
                <option>French</option>
                <option>Dutch</option>
            </select>
        <button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" >Search</button>
    </div>
</form>

和一些引导分页链接:

<div class="bootstrap_pagination">
    <ul>     
        <li class="active">
            <a href="#" data-number = "1" onclick="clicked_bootstrap_pagination(this, event)">1</a>
        </li>
        <li>
            <a href="#" data-number = "2" onclick="clicked_bootstrap_pagination(this, event)">2</a>
        </li>
        <li>
            <a href="#" data-number = "3" onclick="clicked_bootstrap_pagination(this, event)">3</a>
        </li>
        <li>
            <a href="#" data-number = "4" onclick="clicked_bootstrap_pagination(this, event)">4</a>
        </li>
        <li>
            <a href="#" data-number = "5" onclick="clicked_bootstrap_pagination(this, event)">5</a>
        </li>
        <li class="plain">
            <a href="#">&rsaquo;</a>
        </li>
        <li class="plain">
            <a href="#">&raquo;</a>
        </li>
    </ul>
</div>

在页面的某个地方我也有一个隐藏字段，存储我点击的分页链接的数据编号，默认值为1:<input type="hidden" name="number" value="1">

这是处理单击的分页链接的函数:

function clicked_bootstrap_pagination(clickedLink, event){
        event.preventDefault();     
        $this = $(clickedLink); 
        var pageNumberValue = $this.data("number");//get number
        var $hiddenField = $("#drivers_initial form input[name='number']");//hidden field   
        $hiddenField.val(pageNumberValue);//update value of hidden field
        $('form .formWrapper button.submitButton').click();//resubmits the form             
    }

当我单击分页链接时，该函数会运行它，更新隐藏输入字段中的数据编号并重新提交表单，非常简单。

好的，问题是:当单击提交按钮时 - 表单中的搜索按钮 - 我还想运行另一个函数 resetHiddenFieldNumber() ,

但问题是，正如您可能已经了解到的那样，由于这一行 $('form .formWrapper button.submitButton').click();//resubmits the form 而单击分页链接时该函数也会运行。 ，我不想那样，我只想能够运行 resetHiddenFieldNumber()仅当我单击提交按钮时我尝试了一些方法，其中包括提交按钮中的 onclick 属性:

<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" onclick="resetHiddenFieldNumber()">Search</button>

但是，通过这种方法，正如所说和预期的那样，当单击分页链接时，该函数也会运行，因为在 clicked_bootstrap_pagination() 中我正在重新提交表格。我希望在执行此行之后我能够以某种方式区分分页链接和按钮 $('form .formWrapper button.submitButton').click();//resubmits the form但我当然不能。

问题在于，据我了解，重新提交表单的行实际上会强制单击提交按钮，即使您实际上并未单击它。

我尝试使用submit()但整个页面都会重新加载，这是不可取的。

有人知道如何仅在单击提交按钮时运行函数吗？

我希望一切都清楚。

Answer 1

如果您只想将一些数据传递给http://localhost/_myFile.html您并不总是需要使用 from-submit 方式。您只需单击事件即可将数据提交到服务器，而无需重新加载任何页面。

<div class="formWrapper">
        <span>Refine your search</span>
        <input type="text">
            <select id="language-selection">
                <option>English</option>
                <option>French</option>
                <option>Dutch</option>
            </select>
        <button class="not-submit-button" id="send-request-button" type="button" data-ajaxtarget="#myFile_search" >Search</button>
    </div>

然后执行以下事件处理程序

  //js code
    $('#send-request-button').click(function(){
   //on button click
    var data = $('#language-selection').val();
     //collect value of the select
       //send request 
       $.get('http://localhost/_myFile.html', data, function(response){
          //refresh you UI
       })
    })