How to Submit Multiple Values in a single HTML Form?

Question

So I have a HTML form:

<html>
  <body>
  <script>history.pushState('', '', '/')</script>
    <form action="http://myserver.com" method="POST">
      <input type="hidden" name="Id" value="83" />
      <input type="hidden" name="url" value="http://example.com/" />
      <input type="submit" value="Submit request" />
    </form>
    <script>
      document.forms[0].submit();
    </script>
  </body>
</html>

As you can see this is submitting the action for <input type="hidden" name="Id" value="83" /> meaning it's submitted for the attribute associated with ID number 83, I'm wanting the action to be submitted for multiple ID values, i.e. 1 - 100. Is this possible? If so how can it be done?

It's not really clear what you are asking. Are you potentially submitting 100 ID - URL name-value pairs? — Jon P, Apr 07 '17 at 00:25
I am not sure to understand what you are asking but you want to submit a form containing Id from 1 to 100 ? @Jase — Yoann Picquenot, Apr 07 '17 at 00:32

score 13 · Accepted Answer · answered Apr 07 '17 at 00:33

I assume you want to do something like this

<html>
  <body>
  <script>history.pushState('', '', '/')</script>
    <form action="http://myserver.com" method="POST">
      <input type="hidden" name="Id[]" value="83" />
      <input type="hidden" name="Id[]" value="85" />
      <!-- you can add as many as input here for id if you want -->
      <input type="hidden" name="url" value="http://example.com/" />
      <input type="submit" value="Submit request" />
    </form>
    <script>
      document.forms[0].submit();
    </script>
  </body>
</html>

After this form is posted, on the server side you can get $_POST['id'] as an array and playing around with it.

This is assuming PHP is being used serverside. The array notation may not work in other serverside languages. — Jon P, Apr 07 '17 at 00:47

score 3 · Answer 2 · answered Apr 07 '17 at 00:33

3

Add [] to input name:

<input type="hidden" name="ID[1]" value="83" />
<input type="hidden" name="ID[100]" value="100" />

then the in php

  print_r($_POST['ID']); //print out the data array

Or use just one input with comma separated values?

  <input type="hidden" name=Id value="1, 2, 3,.., 100" />

PHP:

$ids = explode(" ", $_POST['ID']);

answered Apr 07 '17 at 00:33

Leszek P

1,807
17
24

4

This is assuming PHP is being used serverside. The array notation may not work in other serverside languages. – Jon P Apr 07 '17 at 00:47
1

Of course, but the same idea can be applied to practically every server side language – daniel Nov 18 '19 at 18:32

score 3 · Answer 3 · edited Mar 31 '23 at 02:24

Old post, but I would like to add a Flask solution. Flask can handle 'name' tags inside the form fields.

<div class="modal-body">
<p>Do you want to add {{ jar.jar_name }} Jar to Map</p>
    <div class="col">
        <form action="{{ url_for('hornet._jar_on_map')}}">
            <input type="hidden" value="{{jar.jar_name}}" name="jar_name"/>
            <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg"  name="map_name">
                    {% for map in maps %}
                  <option value='{{map.map_name}}'>{{ map.map_name }}</option>
                    {% endfor %}
            </select>
            <button type="submit" class="btn btn-secondary">Yes</button>
        </form>
    </div>

The submit button returns to a Flask route '_jar_on_map'. This calls a function to add an item on a map. It is the request.args that shall read your name tags of the different values. Then you can handle those tags inside your function. I made a dict again.

@hornet_bp.route("/add_jar_on_map", methods=["POST", "GET"])
def _jar_on_map():
    returneddata = {}
    print(request.args)
    returneddata["jar_name"] = request.args.get('jar_name')
    returneddata["map_name"] = request.args.get('map_name')
    print(f"-------------------{returneddata['jar_name']}")
    print(f"-------------------{returneddata['map_name']}")

    jar = Hornet.find_one_by_name(jar_name=returneddata["jar_name"])

    if jar:
        update = Hornet.bind_to_map(bind_jar_to_map=returneddata)
        if update:
            flash(f"Adding Map {returneddata['map_name']} for item {returneddata['jar_name']} OK")
        else:
            flash(f"Adding Map {returneddata['map_name']} for item {returneddata['jar_name']} FAILED - Does it exist?")
        return redirect(url_for(".table_jars"))

score 1 · Answer 4 · answered Apr 07 '17 at 00:33

By doing document.forms[0].submit(); you are submitting all the input values in that form and values will be saved as Id=83&url=http://example.com/

If you want to submit several forms then you could use a for loop

x = document.forms.length //your desired number or number of forms
for(i = 0; i<x; i++){
    document.forms[i].submit();
}

How to Submit Multiple Values in a single HTML Form?

4 Answers4

Linked