Almanz Almanz - 1 month ago 4
HTTP Question

How do I send all selected data from the drop-down menu to the server with a "post" method?

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>

Answer

Here's what you need to post from a form at the very minimal:

  1. At least one <form id="process1" name="process1">
  2. One <input type="submit">
  3. 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

  1. Select up to 8 items from the <select>.
  2. Click the <submit> button
  3. 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>

Comments