Question

我找不到任何答案然后问：

我必须在页面上使用不同的形式：一个是“要求呼叫”（放在网站的每个页面上），第二个是简单的“联系表单”（仅放在联系页面上）。

两者都是没有问题的验证，它们是否也在不同的页面上创建。两者都有必需的字段。它们有不同的名称和ID。

用户在联系页面上发生错误。一共有两种形式。通过订单联系是第一位的。当我使用它时，邮件会发送。但是当我尝试使用页面上的第二个表单发送呼叫请求时，它不起作用，因为在第一个表单上没有填写或没有匹配限制。

为什么从第二个表单提交按钮会从第一个表单中获取数据？

下面按联系页面和处理功能的顺序排列。

第一种形式（联系方式）

        <form id="message" name="contact_message" onsubmit="return false;" method="post">
        <div class="hover">
            <label for="message-name">Введите ваше имя:</label>
            <input id="message-name" name="name" type="text" placeholder="Имя" title="Пожалуйста, введите ваше имя." required>
        </div>
        <div class="hover">
            <label for="message-email">Введите ваш email адрес:</label>
            <input id="message-email" name="email" type="email" placeholder="xxx@xxx.xx" title="Пожалуйста, введите корректно ваш email." required>
        </div>
        <div class="hover">
            <label for="message-text">Введите ваше сообщение:</label>
            <textarea id="message-text" name="text" placeholder="Текст сообщения" title="Пожалуйста, введите текст сообщения. Минимум 9 символов." minlength="9" required></textarea>
        </div>
        <input type="hidden" name="type" value="contact_page">
        <button id="submit-contact" class="empty blue button medium" type="submit">Отправить</button>
        <div class="c-clearfix"></div>
    </form>

第二种形式

        <form id="call-ask-form" name="call-ask-form" class="full-width" onsubmit="return false;" method="post">
            <label for="phone-name">Ваше имя</label>
            <input id="phone-name" type="text" name="name" placeholder="Введите ваше имя" minlength="2" required>

            <label for="phone-phone">Ваш номер телефона (только цифры)</label>
            <input id="phone-phone" type="text" name="phone" placeholder="+41234567890" maxlength="16" required>

            <label for="phone-time">Время в формате ЧЧ:ММ, с 9 до 17 в будние дни, когда вы ожидаете звонок.</label>
            <input id="phone-time" type="text" name="text" placeholder="ЧЧ:ММ" maxlength="5">

            <input id="type" name="type" type="hidden" value="call_ask">
            <button form="call-ask-form" id="call-submit" class="filled green medium full-width button" type="submit">Отправить запрос</button>
        </form>

JS

每次我在第二个表单上按提交时，page_type变量从第一个表单中获取数据。并在CONTACT上切换案例，但是请求。

$(document).ready(function() {
$("#submit, #call-submit").click(function() {
    var proceed = true;
    var page_type = $('input[name=type]').val();

    //validation

    if(proceed)
    {
        var form;
        //choosing type of a message
        switch (page_type) {
            case 'contact_page' :
                // preparing data from CONTACT form
                break;
            case 'call_ask' :
                // preparing data from CALL REQUEST form
                break;
            case 'calculator' :
                break;
            default :
        }

        // ajax post data
        $.post('/assets/components/mailer2.php', post_data, function(response){
            if(response.type == 'error'){ //load json data from server and output message
                output = '<div class="error" style="background-color: red; color: white;">' + response.text + '</div>';
            } else {
                output = '<div class="success" style="background-color: green; color: white;">' + response.text + '</div>';
            }
            $(form).append(output).slideDown();
        }, 'json');
    }
});

为什么会这样？请你帮忙。

Answer 1

在行$('input[name=type]').val();中，这将始终尝试在整个页面上找到与名称条件匹配的第一个输入的值。但是，请注意，您的两个表单都具有相同名称的输入。

当多个元素具有相同名称时，Javascript将不会非常友好。相反，您需要重命名它们或确保您更好地引用您想要获得的那个：

以下代码将为您提供正确的page_type :(请注意，在事件中，this将设置为当前元素，在下面的情况下，您将成为<form />个标记之一用于仅使用$(this).find(...)而不是$(...)）

遍历其子项

$('form').on('submit', function(e){
  var page_type = $(this).find('input[name=type]').val();
  alert(page_type);
  e.preventDefault();
})

HTML / js。需要在一个页面上分别提交两种不同的表格

第一种形式（联系方式）

第二种形式

JS

1 个答案: