How to Submit Multiple Values in a single HTML Form? - html

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?

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.

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']);

Old post, but 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"))

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

Related

how put put dynamically populated number into input value field

I have dynamically populated value coming from an external js file. The value is working just fine when I call it in the HTML page but I'm stuck on how to have an input field display this value.
Here is my HTML:
<form action="../mail.php" method="POST" class="location-form">
<div class="device-details">
<h2>Device: iPhone5</h2>
<h2>Repair Cost: <span id="result">0</span></h2>
</div>
<input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
<input name="cost" type="hidden" id="cost" value="" maxlength="20">
<div class="submit-btn">
<input type="submit" value="Submit Request" />
</div>
</form>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("sum");
</script>
at the top, in the div "device-details", the h2 "repair cost" is populating the value just fine, no issues. But I cannot seem to populate the last input with this value.
<input name="cost" type="hidden" id="cost" value="(need the value here)" maxlength="20">
I need the value of the input field to mimic the value of the repair cost at the top in order to send that value to an email address.
I've tried inserting the following into the value and it didn't work
value="<span id='result'>0</span>"
I've tried creating a variable in php and then putting the variable into the value field, and it did not work
<?php
$my_var = '<span id="result">0</span>';
?>
value="<?php echo '$my_var'); ?>"
I've also tried:
value="<?php echo htmlspecialchars($my_var); ?>"
these last two just returned the actual HTML code
<span id="result"></span>
instead of the populated value.
Try this one.
<!DOCTYPE html>
<html>
<body onload="abc()">
<form action="../mail.php" method="POST" class="location-form">
<div class="device-details">
<h2>Device: iPhone5</h2>
<h2>Repair Cost: <span id="result">0</span></h2>
</div>
<input name="device" type="hidden" id="device" value="iPhone5" maxlength="20">
<input name="cost" type="hidden" id="cost" value="" maxlength="20">
<div class="submit-btn">
<input type="submit" value="Submit Request" />
</div>
</form>
<script>
function abc(){
document.getElementById("result").innerHTML=localStorage.getItem("sum");
document.getElementById("cost").value = localStorage.getItem("sum");
}
</script>
</body>
</html>

Passing multiple values in JSP url

I am trying to pass multiple values in a JSP page url to another one.
The code is:
<form name="QuantityForm" onsubmit="return quantityValidation()" action='<%="basket.jsp?addItem="+product.PID%>' method="post">
Quantity <input type="text" name="quantity" size="5">
<input class="button button2" type="submit" value="Add to basket" />
</form>
How do i pass the value of quantity(the field of name="quantity") in the same URL? i know it's something like "Search.jsp?item=<%=search%>&item2=value2&item3=value3.." but i can't seem to structure it properly. Thanks
Do not put your ? and parameters in the action url. Put your parameters in input tags:
<form name="QuantityForm" onsubmit="return quantityValidation()" action='basket.jsp' method="post">
<input type="hidden" name="addItem" value="%product.PID%">
Quantity <input type="text" name="quantity" size="5">
<input class="button button2" type="submit" value="Add to basket" />
</form>
you're using method="post" which doesn't allow parameters to be passed into the url. change it to method="get" if you want the parameters to be passed along with the url.

add parameters to form url before submit

I need to add a path to a file to the form url before submitting. I created therefore a text field and want to add the text to the url without php.
can somebody help?
the existing code:
<form action="http://127.0.0.1:8080/WebService1/HTTPMethod_1?new_value=value" method="post">
<input type="text" value="" size="30" name="filename">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
look into using hidden input fields. these allow you to send form data, but not necessarily show a form field.
for instance:
<script type="text/javascript">
function setFormAction() {
document.myForm.action = document.getElementById("url").value;
}
</script>
<form name="myForm" method="POST" action="default.php">
<input type="value" name="url" id="url" />
<input type="submit" name="submit" onclick="setFormAction();" />
</form>

Parameter list to a query string HTML Form

<form name="input" action="/test/compare method="get">
<input type="checkbox" name="id" value="val1">val1<br/>
<input type="checkbox" name="id" value="val2">val2<br/>
<input type="submit" value="Submit">
</form>
I want a query string that looks like this:
/test/compare?id=val1,val2
Is this possible?
Not exactly as comma separated values, but you can get an array of values of all selected checkboxes as follows.
<form name="input" action="/test/compare" method="get">
<input type="checkbox" name="id[]" value="val1">val1<br/>
<input type="checkbox" name="id[]" value="val2">val2<br/>
<input type="submit" value="Submit">
</form>
PHP
// here you'l get array of id in $_GET and process according to your need
$ids=$_GET['id'];
$str=implode(",",$ids); //array to comma separated values
echo $str; //output will be checked checkbox values--> val1,val2
EDIT:
ANOTHER SOLUTION USING JAVASCRIPT
<form name="input" action="/test/compare" method="get">
<input type="checkbox" name="id" value="val1">val1<br/>
<input type="checkbox" name="id" value="val2">val2<br/>
<input type="submit" value="Submit">
</form>
<!-- load jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("form[name=input]").submit(function(){ //bind onSubmit handler on page ready
//get all field values
var query="id="; //write here parameter name
$("form[name=input] [name=id]:checked").each(function(i){ //it will check for all elements inside form with name "id"
query+=$(this).val()+",";
});
query=query.slice(0,-1); //remove last extra comma
//redirect url by passing "query" as GET parameter
window.location=$(this).attr("action")+"?"+query;
return false;
});
});
</script>
You can make name="id[]" to make the form parameter an array, but aside from that I don't believe it's possible to do what you are asking. You should have unique values as form fields unless they are an array.

Replace this by only one form

how can I replace this code, by only one Form please.
<form method="post" action="<c:url value="/deconnexion" />"><input type="submit" value="Déconnexion" class="deco" /></form>
<form method="post" action="<c:url value="/accueil" />"><input type="submit" value="Retour" class="deco" /></form>
What you want to do is impossible, each form will submit it's information to a single location, which is your action property in your form.
What you can do, alternatively, is manage two different cases in the same form. Your form would look like that :
<form method="post" action="<c:url value="/redirection" />">
<input id="deco" type="submit" value="Déconnexion" class="deco" />
<input id="retour" type="submit" value="Retour" class="deco" />
<input id="type" name="type" type="hidden" value="" />
</form>
You would need Javascript (Jquery) code to assign the type of redirection in the hidden field before the form is submitted :
<script type="text/javascript">
$('#deco').click(function(event)
{
$('#type').val("Déconnexion");
});
$('#retour').click(function(event)
{
$('#type').val("Retour");
});
</script>
Then, in the PHP, you would redirect to the page or function you wish with this condition :
if ($_POST["type"] == "Déconnexion")
// Do something
else if ($_POST["type"] == "Retour"
// Do something else