1

I have a form and a few buttons as below:

<form method="GET" novalidate id="my_form">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<input name="page" type="hidden" form="my_form" value="1" id="submit">
<button type="submit" class="btn btn-success" form="my_form">Submit</button>

<input name="page" type="hidden" form="my_form" value="1" id="1">
<button form="my_form" role="button" class="btn btn-link">1</button>

<input name="page" type="hidden" form="my_form" value="2" id="2">
<button form="my_form" role="button" class="btn btn-link">2</button>

<input name="page" type="hidden" form="my_form" value="3" id="3">
<button form="my_form" role="button" class="btn btn-link">3</button>

As you see, I have four submit buttons. What I need is that if I pressed the submit button, the form that contains the first name and last name and the input field that adds page=1 to the GET be submitted. If I pressed, as an example, the button 3 (the last one), the form and only the input that has page=3 be submitted not the other inputs with page=1, page=2, page=3 . I am using this to solve a pagination problem. How can I do this? I prefer not using JavaScript, or if I have to, only a very simple script be used in the solution.

Please note that the number of buttons might be a lot. Actually, they are being inserted by a django template tag like:

    {% for i in page_obj.paginator.page_range %}
    <input name="page" type="hidden" form="my_form" value="{{i}}" id="{{i}}">
Amin Ba
  • 1,603
  • 1
  • 13
  • 38
  • use action in form or use isset() function in PHP to know that the button is set (pressed) – Ahmed Ali Sep 17 '19 at 05:24
  • 1
    I am not using PHP. I want to do it with just HTML and at most, javascript. I may need to make each page number a separate form and embed the main form in them. – Amin Ba Sep 17 '19 at 05:31
  • 1
    you can check this answer https://stackoverflow.com/a/21778226 – Nalin Dobhal Sep 17 '19 at 05:37

1 Answers1

1

There is a pure HTML solution to this, make the inputs into the buttons directly. Therefore only the input which corresponds to the button gets passed. Bootstrap classes can then be applied to the inputs for the same look and feel.

Combine 

<input name="page" type="hidden" form="my_form" value="1" id="submit">
<button type="submit" class="btn btn-success" form="my_form">Submit</button>

Into something like

<input name="page"  class="btn btn-success" form="my_form" value="1" id="submit" type="submit">

As you can just make the hidden inputs into buttons directly, which means that page will only be passed from the button which is clicked.

Full code:

<form method="GET" novalidate id="my_form">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>

<input name="page"  class="btn btn-success" form="my_form" value="1" id="submit" type="submit">

<input name="page" class="btn btn-success" form="my_form" value="1" id="1" type="submit">

<input name="page"  class="btn btn-success" form="my_form" value="2" id="2" type="submit">

<input name="page" class="btn btn-success" form="my_form" value="3" id="3" type="submit">
</form>
Matthew Gaiser
  • 4,558
  • 1
  • 18
  • 35
  • 1
    This is very useful in pagination. Suppose there is a page in which you have a form. In the same page, you want to show the results of a query based on the form inputs. The point is that you want to have the form fields pre-field with the inputs you entered before submitting the main form. Suppose, the results are more than one page because you are using pagination. If you simply go to the next page, you will lose the pre-field form data. But if you do this, the problem is solved!! – Amin Ba Sep 17 '19 at 05:55
  • 1
    https://stackoverflow.com/questions/56799278/how-to-prevent-django-form-being-reset-after-clicking-page-buttons/57968098#57968098 – Amin Ba Sep 17 '19 at 05:56
  • Have an upvote. And yes, it is a better answer for pagination. Good catch. – Matthew Gaiser Sep 17 '19 at 05:59