Dropdown list using jquery

Question

I am trying to implement a simple Jquery drop down.

HTML

<h2> Networked Graphs</h2>
<p> Select the node ID from the drop down to see graphs up to a depth of 5 </p>
<form id="my form">
  <label for="Node_type">Node_Type</label>
  <select id="dropdown_change">
    <option value="Customer">Customer</option>
    <option value="Phone">Phone</option>
    <option value="ID_Card">ID_Card</option>
  </select>
  <input type='submit' value='Submit'>
</form>

This is the jquery code:

var selectID = $("#dropdown_change").val();
$.ajax({
  type: "POST",
  url: '/echo/html/',
  data: {
    html: "<span>This is the ajax response...</span>",
    delay: 2
   },

   success: function(data) {
     showMsg('SUCCESS: ' + data);
   },

   error: function (xhr, textStatus, errorThrown) {
     document.getElementById('dropdown_change').selectedIndex = 0;
     showMsg('ERROR: ' + errorThrown);
     return false;
   }
});

})  // closes ?

Selecting from the drop down and clicking on the submit button should display the success message 'SUCCESS: This is the Ajax response'.

Even though I specify "type: POST" and SUCCESS as well as ERROR messages, it fails with the below error:

{"error": "Please use POST request"}

Here is the Jsfiddle. Trying to learn javascript/jquery.

Answer 1

The jQuery Ajax is running as soon as the page loads. It does not run when the button is clicked. When the button is clicked, the HTML form is being submitted.

The way to do this would be to add a listener to the button that intercepts the submit and calls the jQuery Ajax. It would look something like this:

$('input[type=submit]').click(function() {
  var selectID = $("#dropdown_change").val();
  $.ajax({...
  return false;
});

Here is a working fiddle

Answer 2

After jquery 1.9.0, you should use

method: "POST"

instead of

type: "POST"

Link