Jquery .serialize() not processing value of dropdown list?

Question

I think this should be a simple thing but for some reason all my form values are being serialized fine except for the selected value of the dropdown list, the form is below:

<form id="contactform">
    <label for="name">Name</label> 
    <input type="text" id=name name=name placeholder="First and last name" tabindex="1" />

    <label for="phonenumber">Phone Number</label> 
    <input type="text" id=phonenumber name=phonenumber placeholder="Please enter your phone number" tabindex="2" />

    <label for="email">Email</label> 
    <input type="text" id=email name=email placeholder="[email protected]" tabindex="3" />

    <label for="dropdown">Please Confirm:</label> 
        <select>
            <option value="question" selected="selected">I have a question</option>
            <option value="attending">I am attending</option>
            <option value="not-attending">I am not attending</option>
        </select>


    <label for="comment">Your Message</label>
        <textarea name="comment" id=comment name=comment placeholder="Enter something here, can't think" tabindex="5"></textarea> 

    <input name="submit" type="submit" id="submit" tabindex="6" value="Send Message"/>

</form>

and this is how I am serializing it:

$('#contactform').submit(function() {
    var query = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "send.php",
        data: query,
        success: function(data) { // rest of function

and finally the bit of PHP I'm using to set the value as a variable is:

$dropdown     = $_POST['dropdown'];

AN example header is name=sgrggr&phonenumber=55555555555&email=me%40me.com&comment=quick+test so I'm stuck as to why the dropdown value isn't being picked up.

Thanks for your help.

Solution

Your dropdownlist needs a name attribute to be included by the submit.

<select name="dropdown">
        <option value="question" selected="selected">I have a question</option>
        <option value="attending">I am attending</option>
        <option value="not-attending">I am not attending</option>
    </select>

hope this helps!

Comments

[martincarlin87]

aaaaaah, can't believe I missed that. Thanks for pointing that out, much appreciated.

[Mike Gledhill]

Nope, I didn't know that either. Good tip !

[dawriter]

I've having the same problem but even though I have a name and selected attached to the "selector" my serializeJSON() is ignoring it...

[Dennis]

Could you provide the code you use for the serializeJSON() call and your selector? I guess you need to specifiy the HTML form in your selector, so no need to use :selected there. Also, consider creating a seperate question if it gets too much code.

[dawriter]

var formData = $("#myForm").find('input[name!=__RequestVerificationToken][n‌​ame!=DateOfReport][n‌​ame!=SurveyDetailGui‌​d]').serializeJSON()‌​; if (window.console) { console.log(JSON.stringify(formData)); };

[dawriter]

<%:Html.DropDownList("PersonJobDescription", new SelectListItem[] { new SelectListItem { Text = null, Value = null }, new SelectListItem { Text = "Administrator", Value = "Administrator" }, new SelectListItem { Text = "Health Aide/UAP", Value = "Health Aide/UAP" }, new SelectListItem { Text = "Other", Value = "Other" } })%>

[dawriter]

The problem is that serialization is ignoring my HTML.DropDownList. When it has rendered on the page it shows the name..

[dawriter]

Here's the question I posted: stackoverflow.com/questions/31817231/…