javascript - 在一页中分别提交两份表格并附上单独的感谢信息

Question

我的页面有两种不同的形式:

表格1:

<form id="info-form" method="POST" action="">
    <label for="name">What is your Name? </label> 
    <input required type="text" name="name" placeholder="Enter your full name here." />

    <label for="email">What is your email ID? </label>
    <input required type="email" name="email" placeholder="your.name@email.com" />

    <label for="mobile-number">What is your 10-Digit Mobile Number? </label>
    <input required type="text" name="mobile-number" maxlength="10" placeholder="Enter num." />

    <label for="posting-place">What is your current place of residence? </label>
    <input type="text" name="place" placeholder="Enter your current residing place here." />

    <button type="submit" class="btn btn-lg btn-success">
        Submit
    </button>
    <button type="reset" class="btn btn-lg btn-warning">
        Reset
    </button>
</form>

表格2:

<form id="contact-form" method="POST" action="">
    <label for="name">What is your Name? </label> 
    <input type="text" name="name" placeholder="Enter your full name here." />

    <label for="email">What is your email ID? </label>
    <input type="email" name="email" placeholder="your email" />

    <label for="message"> Your Message: </label>
    <textarea id="message" name="message" rows="5" placeholder="Type in your message here"></textarea>

    <button id="submit_button" type="submit" class="btn btn-lg btn-success">
        Send
    </button>
    <button id="reset_button" type="reset" class="btn btn-lg btn-warning">
        Reset
    </button>
</form>

然后，在上述两个表单的结束 form 标记之后，我会收到以下感谢消息

提交表格 1 后的感谢信息:

<div style="display:none;" id="thankyou_form">
    <p><em>Thank You</em> for submitting!</p>
</div>

提交表格 2 后的感谢信息:

<div style="display:none;" id="thankyou_contact">
    <p><em>Thank You</em> for contacting! We will get back to you soon!</p>
</div>

然后，我有两个脚本，用于在提交表单后在同一页面上显示感谢消息。

<script type="text/javascript">
    $(function () 
    {
        $('form').submit(function (e) 
        {
            e.preventDefault();
            $.ajax(
            {                   
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (response) 
                {
                    console.log(response);
                    if(response.result == 'success') 
                    {
                        // this is for the second form. For the 1st form ID is changed to thankyou_form
                        document.getElementById("thankyou_contact").style.display = "inline";
                    } 
                    else 
                    {
                        // this is for the second form. For the 1st form ID is changed to thankyou_form
                        document.getElementById("thankyou_contact").style.display = "none";
                    }
                }
            });
        });
    });
</script>

但是当我提交第二个表单时，感谢消息也显示为第一个表单。此外，该表单提交了两次。

你能告诉我如何分别识别这两个javascript吗？或者，我可以将两个脚本合并为一个，但两个提交按钮彼此独立工作吗？

如果您能指出我的错误，这对我将非常有帮助，也很有启发。

附注我是初学者。

Edit1:根据 David 的建议修改了 javascript 代码(但目前不起作用)。新代码是:

<script type="text/javascript">
            $(function () 
            {
                $('form').submit(function (e) 
                {
                    if(e.target === 'form#info-form')
                    {                   
                        e.preventDefault();
                        $.ajax(
                        {
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (response) 
                            {
                                console.log(response);
                                if(response.result == 'success') 
                                {
                                    document.getElementById("thankyou_info").style.display = "inline";
                                } 
                                else 
                                {
                                    document.getElementById("thankyou_info").style.display = "none";
                                    document.getElementById("sorry_info").style.display = "inline";
                                }
                            }
                        });
                    }

                    if(e.target === 'form#contact-form')
                    {                   
                        e.preventDefault();
                        $.ajax(
                        {
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (response) 
                            {
                                console.log(response);
                                if(response.result == 'success') 
                                {
                                    document.getElementById("thankyou_contact").style.display = "inline";
                                } 
                                else 
                                {
                                    document.getElementById("thankyou_contact").style.display = "none";
                                    document.getElementById("sorry_contact").style.display = "inline";
                                }
                            }
                        });
                    }
                });
            });
        </script>

Answer 1

使用event.target来确定提交哪个表单，您需要将代码优化为，

   if(response.result == 'success') 
   {
       // Determine if the submission came from "Info Form" or "Contact Form"
        if(e.target === 'form#info-form')
        {
           document.getElementById("thankyou_form").style.display = "inline";
        }
        else 
        {
           document.getElementById("thankyou_contact").style.display = "inline";
        }
   } 
   else 
   {
       // this is for the second form. For the 1st form ID is changed to thankyou_form
     document.getElementById("thankyou_form").style.display = "none";  
     document.getElementById("thankyou_contact").style.display = "none";
   }