在php中点击提交按钮提交选择框值

Question

Following is the form code

<form id="ajax-contact" method="post" action="mailer.php">
            <div class="field">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>

            <div class="field">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="field">
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
            </div>
<div class="field">
                <label for="Select">Select</label>
                <select id="Select" name="Selct" required>
                <option value="1">bad</option>
                <option value="2">good</option>
                <option value="3">excellent</option>
                <option value="4">Gorgrous</option>
                </select>
            </div>
            <div class="field">
                <button type="submit">Send</button>
            </div>
        </form>

ajax calling script

$(function() {

    // Get the form.
    var form = $('#ajax-contact');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        // Serialize the form data.

var name=$('#name').val();
var email=$('#email').val();
            var message=$('#message').val();
var message=$('#select').val();
        var formData = $(form).serialize();
        alert(formData);
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData,name,email,message,select
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.
            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        })
        .fail(function(data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });

    });

});

I am trying to submit form entries on click of submit button,In the form I m submitting name,email,message and rating value,I m able to pass name,email,message with ajax call but select box value is not getting passed.I dnt knw how exactly it can be passed,please check what is wrong in code.and help in correcting that please.

Answer 1

Just Check for Selector:

HTML

 <select id="Select" name="Selct" required>

JS:

var message=$('#message').val();
var message=$('#select').val();

WHY DO YOU HAVE SAME VARIABLE FOR BOTH?

AND CHECK YOUR SELECT ID?

It should be:

var message=$('#message').val();
var select=$('#Select').val();

OR change you Select Id into small letter select and also correct the name attribute it should be select