Модальная форма 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

Проблема в том, что вы заменяете все html формы после завершения вызова ajax. Попробуйте использовать div "status" для размещения сообщения об успехе. Тогда, возможно, простого 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>