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>

重新启动后，模态Ajax表单会卡在成功消息上

1 个答案: