How do I send all selected data from the drop-down menu to the server with a “post” method?
Question
I have multiple data and am trying to figure out how to send all selected data via a method "post" call in order to query that information from a server and send it back. For now I've been experimenting with forms, yet am sure there is a much simpler way to do this. Please be so kind as show to explain to me a version that takes in all the selected options chosen by the user.
Running Code: When running the script, user must cause a change in the first dropdown. This would create a second drop-down. In order to create a third drop-down, you must again invoke a change in the first dropdown(would fix this soon).
Logic: The reasoning behind this script is to take in multiple strings to search in a database and send it off to be processed after the button "Search" is clicked.
<pre>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Query Tool</title>
<meta charset="ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var selector = 0;
//var arr = [0,1,2,3,4,5,6,7,8,9];
$(document).ready(function() {
$("#select" + selector).change(function() {
//$.post('where',{data},function (d) { //this is to post data to the server and get the answer with function
// documentation is at http://api.jquery.com/jQuery.post/
// if the answer is in JSON, decode it
var answer = '[{"ID":"1","name":"None"},{"ID":"2","name":"Ship Type"},{"ID":"3","name":"Anomoly Type"},{"ID":"4","name":"MMSI"}]';
var d = JSON.parse(answer);
selector++;
var s = $("<select id=\"select_two\" name=\"select_two\" />");
for(var val in d) {
$("<option />", {value: d[val].ID, text: d[val].name}).appendTo(s);
}
$("#select" + selector).empty();
s.appendTo("#select" + selector);
//}); // closing brackets for the post method
});
//document.getElementById("myBtn").addEventListener("click", displayDate);
});
function PostData() {
var formElement = document.forms["myform"];
var array = [];
//$.post("form.html");
for(var val in selector) {
//string = formElement.elements[val].value;
array.concat(formElement.elements[val].value);
//alert(formElement.elements[val].value);//can I print out the options selected?
}
alert(array.length);//can I print out the options selected?
}
</script>
</head>
<body><br>
<p>Testing.</p>
<h1>Organizer Tool</h1>
<HR>
<p>Please choose search criteria:</p>
<form name = "myform" action="index.html">
<select id="select0">
<option value="None">None</option>
<option value="Ship Type">Ship Type</option>
<option value="Anomaly Type">Anomaly Type</option>
<option value="MMSI">MMSI</option>
</select>
<div id="select1"></div>
<div id="select2"></div>
<div id="select3"></div>
<div id="select4"></div>
<div id="select5"></div>
<div id="select6"></div>
<div id="select7"></div>
<div id="select8"></div>
<div id="select9"></div>
<input type="submit" value="Submit" onclick = "PostData()">
</form>
</body>
</html>
</pre>
1 answers
solution1
0 ACCPTED 2016-10-21 03:48:45
Here's what you need to post from a form at the very minimal:
- At least one
<form id="process1" name="process1"> - One
<input type="submit"> - Any form element with the
name=attribute
Even though this way doesn't need any JavaScript, I wrote some in order to populate those 8 inputs (originally you made them into divs). This Snippet will post the value of any form element that has a name and has data. I have provided an iframe that will display what the server received from the form. The server's purpose is for testing posts, but it doesn't respond (hence the iframe).
USAGE
- Select up to 8 items from the
<select>. - Click the
<submit>button - In the iframe, there should be some raw text reporting what the server received.
Due to SO strict security, the Snippet doesn't work as expected. Review this PLUNKER instead.
SNIPPET
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>Query Tool</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <script> $(function() { var selected = ""; var count = 0; var outputs = $('[name="output"]'); var current; $('#select0').on('change', function() { if (count < outputs.length) { current = outputs.eq(count); count++; selected = $(this).val(); current.val(selected); } else return; }); }); </script> </head> <body> <form id="process1" name="process1" action="http://www.hashemian.com/tools/form-post-tester.php/tesso/" target='frame1' method='post'> <fieldset> <legend> <h1>Form Post Test</h1> </legend> <figure class='fig'> <figcaption>This is an iframe that will display whatever the server has received from this form. Unfortunately this will not function because SO sandbox security is too strict</figcaption> <iframe id='frame1' name='frame1' src='about:blank' width='98%'></iframe> </figure> <fieldset> <select id="select0" name="select0"> <option value="Ship Type">Ship Type</option> <option value="Anomaly Type">Anomaly Type</option> <option value="MMSI">MMSI</option> </select> <input type="submit"> </fieldset> <br/> <br/> <label for='select1'>Select 1:</label> <input id="select1" name='output'> <br/> <label for='select2'>Select 2:</label> <input id="select2" name='output'> <br/> <label for='select3'>Select 3:</label> <input id="select3" name='output'> <br/> <label for='select4'>Select 4:</label> <input id="select4" name='output'> <br/> <label for='select5'>Select 5:</label> <input id="select5" name='output'> <br/> <label for='select6'>Select 6:</label> <input id="select6" name='output'> <br/> <label for='select7'>Select 7:</label> <input id="select7" name='output'> <br/> <label for='select8'>Select 8:</label> <input id="select8" name='output'> <br/> <br/> </fieldset> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.