Hi guys, I've run into something interesting and I'm a bit stumped with this. Basically I have a form:
<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>
and some bootstrap pagination links:
<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="#">›</a>
</li>
<li class="plain">
<a href="#">»</a>
</li>
</ul>
</div>
Somewhere on the page I have a hidden field as well, storing the data-number of the pagination link I clicked on, the default value is 1: <input type="hidden" name="number" value="1">
And this is the function that takes care of the clicked pagination link:
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
}
When I click on a pagination link, the function runs it updates the data-number in the hidden input field and resubmit the form, pretty simple.
OK, so here is the problem: when the submit button is clicked on - my search button in the form - I also want to run another function, resetHiddenFieldNumber()
, but the problem is, as you've probably already gathered, that that function will also run when the pagination link is clicked on because of this line$('form .formWrapper button.submitButton').click();//resubmits the form
, and I don't want that, I just want to be able to run resetHiddenFieldNumber()
only when I click the submit button
I tried a couple of things, among those, an onclick attribute in the submit button:<button class="submitButton" type="submit" data-ajaxurl="http://localhost/_myFile.html" data-ajaxtarget="#myFile_search" onclick="resetHiddenFieldNumber()">Search</button>
but, with this approach, as said and expected the function runs also when the the pagination link is clicked on because in clicked_bootstrap_pagination()
I'm resubmitting the form.
I've hoped that I could somehow distinguish between the pagination link and the button after this line executed $('form .formWrapper button.submitButton').click();//resubmits the form
but of course I can't. The problem is the fact that, from what I understand, the line that resubmits the form effectively forces a click on the submit button even if you don't actually click on it. I tried to use submit()
but the whole page reloads and that's not desirable. Does anybody have an idea how I could run a function only when I click on the submit button?
I hope it's all clear.