Question

我有一个单独的js文件，我试图让两个不同的表单提交，并根据提交的表单，将取决于它提交给哪个文件。例如，表单1，提交到contact_me.php，而表单2提交给mailer.php

这是第一种形式的javascript：

var form = $('#ajax-submit');


// Get the messages div.
var formMessages = $('#submit-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 formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .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.
        $('#s_name').val('');
        $('#s_email').val('');
        $('#s_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.');
        }
    });

});

这是与该块一起使用的关联html：

    <div id="submit">
    <div class="menucontent">
        <div class="submitclose closer"></div>
        <h2>Submit</h2>


        <form id="ajax-submit" method="post" class="submitform" action="contact_me.php">
            <table>
                <tr>
                    <td>
                        <input placeholder="Name..." type="text" name="s_name" id="s_name" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input placeholder="E-mail..." type="text" name="s_email" id="s_email" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="file" id="file_attach" class="file_attach">
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea placeholder="Message..." name="s_message" id="s_message" required></textarea>
                    </td>
                </tr>
                <tr>
                    <td>

                        <input class="submit" type="submit" value="Submit">
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="img/ajax-loader.gif" class="loading-img" style="display:none">
                    </td>
                </tr>

                <tr>
                    <td>
                        <div id="submit-messages"></div>
                    </td>
                </tr>                   

            </table>    
        </form>
    </div>
</div>

这是第二个块的javascript：

    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 formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .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.');
        }
    });

});

以及相关的html：

<div id="contact">
    <div class="menucontent">
        <div class="contactclose closer"></div>
        <h2>Contact</h2>
        <form id="ajax-contact" method="post" action="mailer.php"><!--Contant Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <table>
                <tr>
                    <td>
                        <select form="ajax-contact" id="select" name="select">
                            <option>This message is about...</option>
                            <option value="Hello">...saying Hello</option>
                            <option value="Question">...a Question</option>
                            <option value="Business">...strictly Business</option>
                        </select> 
                    </td>
                </tr>
                <tr>
                    <td>
                        <input placeholder="Name..." type="text" name="name" id="name" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input placeholder="E-mail..." type="text" name="email" id="email" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea placeholder="Message..." name="message" id="message" required></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="submit" type="submit" value="SEND MESSAGE">
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="form-messages"></div>
                    </td>
                </tr>
            </table>    
        </form>
    </div>
</div>

我的问题是，当我尝试提交第一个表单时，应该转到contact_me.php，而不是提交给mailer.php。我不得不遗漏一些东西。通过权利，它似乎是第一种形式＆＃34;提交＆＃34;应该发送到contact_me.php，但不是，而是它正在发送mailer.php

对我遗失的内容有任何疑问？

Answer 1

我相信你的问题就在这一行：

url: $(form).attr('action'),

应该是：

url: $(formMessages).attr('action'),

可能还有其他类似的东西（你没有包括，比如在{1}中计算formData的方式）。

Answer 2

您必须使用不同的变量来指定表单引用

在您使用的第一个JavaScript中

var form = $('#ajax-submit');

被第二个脚本的变量

覆盖

var form = $('#ajax-contact');

所以改变第一个或第二个JavaScript

var form

将变量名称引用到不同的名称。

决斗ajax表单提交错误文件

2 个答案: