Violet_82 89 Posting Whiz in Training

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="#">&rsaquo;</a>
        </li>
        <li class="plain">
            <a href="#">&raquo;</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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.