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
– Jon P, Commented Apr 7, 2017 at 0: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
– Yoann Picquenot, Commented Apr 7, 2017 at 0:32

Long Kim · Accepted Answer · 2017-04-07 00:33:32Z

13

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.

answered Apr 7, 2017 at 0:33

Long Kim

4903 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon P Over a year ago

This is assuming PHP is being used serverside. The array notation may not work in other serverside languages.

Leszek P · Accepted Answer · 2017-04-07 00:33:06Z

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 7, 2017 at 0:33

Leszek P

1,8661 gold badge18 silver badges24 bronze badges

2 Comments

Jon P Over a year ago

This is assuming PHP is being used serverside. The array notation may not work in other serverside languages.

daniel Over a year ago

Of course, but the same idea can be applied to practically every server side language

shabicht · Accepted Answer · 2023-03-31 02:24:59Z

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

Carlos F · Accepted Answer · 2017-04-07 00:33:37Z

1

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();
}

answered Apr 7, 2017 at 0:33

Carlos F

5,1113 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to Submit Multiple Values in a single HTML Form?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related