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>

和一些bootstrap分页链接：

<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，则不必总是使用提交方式。您可以使用on-click事件将数据提交到服务器，而无需重新加载页面。

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

使用click（）重新提交表单的问题

1 个答案: