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

时间:2014-06-08 08:45:01

标签: javascript php jquery ajax forms

以下是表单代码

<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调用脚本

$(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.');
            }
        });

    });

});

我想点击提交按钮提交表单条目,在提交名称,电子邮件,消息和评级值的表单中,我可以通过ajax调用传递姓名,电子邮件,消息但是选择框值不是得到通过。我知道它是如何通过的,请检查代码中的错误。并帮助纠正它。

1 个答案:

答案 0 :(得分:0)

只需检查选择器:

HTML

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

JS:

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

为什么你有两个相同的变量?

并检查您的选择ID?

应该是:

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

或者更改您选择ID为小写字母select并更正name attribute它应该是select

相关问题