Can't get value of select field in a form with jquery

I want to get the value of all elements in a form on submit button. I serialize the data in the form but for some reasons that I don't understand in the serialised data the value of selected option on select field is not included there.

Here's a Js fiddle

My form looks like this:

<form id='foo'>
      <p>
        <label>Message</label>
        <textarea id='message' name='message' rows='5'></textarea>
      </p>
      <br/>
      <p>
           <label>Name</label>
           <select id = "name">
             <option value = "1">one</option>
             <option value = "2">two</option>
             <option value = "3">three</option>
             <option value = "4">four</option>
           </select>
        </p><br/>
        <div id='success'></div>
        <button type='submit'>Send</button>
    </form>

    <p id="showdata">

    </p>

On submit of this form I some jquery code that handles it. It looks like this :

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();
    $('#showdata').html(serializedData);

});

Can somebody help me to understand where is my problem! Thank you in advance.


ANSWERS:


Forms work on the name, and not ID attribute. Give you select element a name value and it will work.


Your code seems to correct but you have a mistake. Look at select , it has no attribute name. So, $form.serialize() will not work on this element.

This is fixed by add attribute name to select

<form id='foo'>
  <p>
    <label>Message</label>
    <textarea id='message' name='message' rows='5'></textarea>
  </p>
  <br/>
  <p>
       <label>Name</label>
       <select name="test">
         <option value="1">one</option>
         <option value="2">two</option>
         <option value="3">three</option>
         <option value="4">four</option>
       </select>
    </p><br/>
    <div id='success'></div>
    <button type='submit'>Send</button>
</form>

<p id="showdata">

</p>

More information : Form Serialize


If you use $form.serialize() in select element you should add attribute name in there because $form.serialize() will get values from attribute name

Update

Add attribute name to select element



 MORE:


 ? How to set readonly property to false on multiple textboxes with same class?
 ? How to set readonly property to false on multiple textboxes with same class?
 ? How to set readonly property to false on multiple textboxes with same class?
 ? How to set readonly property of dynamic textbox using jQuery?
 ? Textbox becomes readonly on postback even when setting the readonly attribute to false manually
 ? How to remove multiple dynamically generated elements at the same time by their class name?
 ? set readonly property to false for an html text input on clicking on Edit
 ? How to keep readonly="false" for input boxes with same class when moving focus between them?
 ? Does std::vector behave different for clearing or deleting PODs
 ? Does std::vector behave different for clearing or deleting PODs