重新触发时，模态 ajax 表单卡在成功消息上

Question

我有一个大约有 20 个查询按钮的页面。每个按钮都会触发相同的模态 ajax PHP 表单。表单系统正常工作，发送电子邮件并触发成功消息。成功消息显示在表单标签内，但表单的其余部分消失了，只剩下

标签。

成功消息有一个关闭按钮，用于关闭模式，但问题是当我点击页面上的任何其他查询按钮时，它们会触发模式但它仍然停留在成功消息上。

有没有办法使用模态关闭按钮作为一种清除表单触发器？

这是我正在使用的 ajax 脚本……

<script>
    function _(id){ return document.getElementById(id); }
    function submitForm() {
        _("sendenquiry").disabled = true;
        _("status").innerHTML = 'please wait…';
        var formdata = new FormData();
        formdata.append( "n", _("n").value );
        formdata.append( "e", _("e").value );
        formdata.append( "m", _("m").value );
        var ajax = new XMLHttpRequest();
        ajax.open( "POST", "enquire.php" );
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4 && ajax.status == 200) {
                if(ajax.responseText == "success"){
                    _("enquiry_form").innerHTML = '<p>Thanks '+_("n").value+', we will be in touch shortly.</p>'; 
                } else {
                    _("status").innerHTML = ajax.responseText;
                    _("sendenquiry").disabled = false;
                }
            }
        }
        ajax.send( formdata );
    }
</script> 

这是我的html

<!--enquiry modal--> 
            <div class="enquire-form-modal ef-effect" id="efmodal">
                <div class="ef-content">
                    <div>
                            <form class="enquire-message" id="enquiry_form" onsubmit="submitForm(); return false;">
                                <fieldset>
                                    <legend>Please fill out your enquiry below and we'll quickly get back to you.</legend>

                                        <div class="">
                                            <label class="" for="">Name</label>
                                            <span><input type="text" id="n" class="" name="" placeholder="My name" required></span>
                                        </div> 

                                                <div class="">
                                                    <label class="" for="">Email</label>
                                                    <span><input type="email" id="e" class="" name="email" placeholder="My email" required></span>
                                                </div> 


                                                <div class="">
                                                    <label class="" for="">Enquiry</label>
                                                    <span><textarea id="m" class="" name="" placeholder="My enquiry" required></textarea></span>
                                                </div>

                                        <div>
                                            <input id="sendenquiry" type="submit" value="SEND"> <span id="status"></span>
                                        </div>
                                </fieldset>
                            </form>
                        <button class="ef-close">Close</button>
                    </div>
                </div>
            </div>  
            <div class="enquire-form-overlay"></div>        
<!--enquiry modal end-->

任何帮助将不胜感激。我尝试了各种方法，但还没有任何效果。如果您需要更多代码，请告诉我。 提前致谢

Answer 1

问题在于，当 ajax 调用完成时，您要替换所有表单的 html。尝试使用“状态” div 来容纳成功消息。然后，也许一个简单的setTimeout 就足以清除消息。

<script>
    function _(id){ return document.getElementById(id); }
    function submitForm() {
        _("sendenquiry").disabled = true;
        _("status").innerHTML = 'please wait…';
        var formdata = new FormData();
        formdata.append( "n", _("n").value );
        formdata.append( "e", _("e").value );
        formdata.append( "m", _("m").value );
        var ajax = new XMLHttpRequest();
        ajax.open( "POST", "enquire.php" );
        ajax.onreadystatechange = function() {
            if(ajax.readyState == 4 && ajax.status == 200) {
                if(ajax.responseText == "success"){
                    _("status").innerHTML = '<p>Thanks '+_("n").value+', we will be in touch shortly.</p>'; 
                } else {
                    _("status").innerHTML = ajax.responseText;
                }

                // clear the "status" message after 5 seconds
                setTimeout(function() {
                    _("status").innerHTML = "";
                }, 5000);
                _("sendenquiry").disabled = false;
            }
        }
        ajax.send( formdata );
    }
</script>