如何通过按不同的按钮来定义表单具有哪些输入字段? [英] How to define which input fields the form has by pressing different buttons?

问题描述

我有一个表单和一些按钮，如下所示: :

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>

如您所见，我有四个提交按钮.我需要的是，如果我按下了提交按钮，则将提交包含名字和姓氏以及将page=1添加到GET的输入字段的表单.例如，如果我按下按钮3(最后一个)，则仅提交表单，并且只有具有page=3的输入，而不提交其他具有page=1，page=2，page=3的输入.我正在用它来解决分页问题.我怎样才能做到这一点?我宁愿不使用JavaScript，或者，如果需要的话，在解决方案中只能使用一个非常简单的脚本.

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.

请注意，按钮的数量可能很多.实际上，它们是通过django模板标签插入的，例如:

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

推荐答案

对此有一个纯HTML解决方案，可直接将输入输入按钮.因此，仅传递与按钮相对应的输入.然后可以将Bootstrap类应用于输入，以保持相同的外观.

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.

组合

<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"  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.

完整代码:

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

这篇关于如何通过按不同的按钮来定义表单具有哪些输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！