Question

Lets say I have a form:

<form id="form1" method="post">
    <ul>
        <li class="button">
            Button 1!
            <input name="some_input" type="hidden" value="Number 1" />
        </li>
        <li class="button">
            Button 2!
            <input name="some_input" type="hidden" value="Number 2" />
        </li>
    </ul>
</form>

and my javascript is:

<script type="text/javascript">
    $('document').ready(function () {
        $('li.button').bind("click", function() {
             $('form1').submit();
        });
    });
</script>

Note: When I click on the li element Button!, it triggers the form to submit.

Now when I click (e.g. Button 1!) the form gets sent, it gets sent successfully, and it is processed without any problems. However problem arise when I hit the “Back” button on the browser and click on a different link (e.g. Button 2!). It seems to me as if the browser is submitting the same value as before, even though the input values for the both of them are different.

How do I solve this?

Answer 1

You are submitting the same form. It doesn’t matter what button you click. You have both buttons bound to a click event which triggers a single form to submit which contains two values.

Also, your ids are set not your class so it should be $('li#button').... You change your html to class though for proper semantics.