在一个页面中单独提交两个表单，并使用单独的thankyou消息

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？或者，我可以将两个脚本合并为一个，但两个提交按钮彼此独立工作吗？

如果你能指出我的错误，对我来说会非常有帮助和启发。

P.S。我是初学者。

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";
   }