在同一页上分别提交两份表格,并附上感谢信

Submitting two forms separately in one page with separate thankyou message

本文关键字:表格 两份 感谢信 一页 提交      更新时间:2023-09-26

我有一个页面,它有两种不同的形式:

形式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: 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>

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