Question

我有一个简单的表单，在单击一个锚点时会在一个模态中打开。

<a id="callbackLink" class="various" href="#inline">Request</a>

<div id="inline" style="display:none">
    <form id="callForm" onsubmit="callEvent(event);">
        <h3>Call Back</h3>

        <label for="Number">What number shall we call you on?</label>
        <input type="tel" id="callback-tel" placeholder=""><br>

        <input type="submit" value="Submit" />
    </form>
</div>

提交表单后，第三方库会处理表单。如果表单成功，表单将被删除，并在模式中显示成功消息。

现在，如果您关闭模式，然后单击按钮再次显示该表单，它仍将显示成功消息。因此，每次按下按钮时，我都需要一种显示干净形式的方法。

实现这一目标的最佳方式是什么？

更新事件监听器是

function StartClickToCall(event) {
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;

    var SuccessfulRequest = function() {
        document.getElementById('ClickToCallForm').style.display = 'none';
        document.getElementById('ClickToCallErrorMessage').style.display = 'none';
        document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
    };

    var FailedRequest = function(Request, Response) {
        document.getElementById('ClickToCallSuccessMessage').style.display = 'none';
        document.getElementById('ClickToCallErrorMessage').style.display = 'block';
        document.getElementById('ClickToCallErrorMessage').innerHTML = Response.ResponseMessage;
    };

    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : jQuery("#callback-tel").intlTelInput("getNumber"),
        CallbackDate : document.getElementById('CallbackDate').value
    }, SuccessfulRequest, FailedRequest]);
}

Answer 1

$（＆＃39;＃myModal＆＃39）的模态。（＆＃39;肘节＆＃39）; $（＆＃39; #myModal＆＃39;）。modal（＆＃39; view＆＃39;）; U可以尝试使用模态窗口清理。我认为模态窗口似乎有问题

Answer 2

你没有发布代码的正确部分

如果表单被成功消息替换，那么您可能有一个正在进行ajax调用的函数，并且在成功回调中，您将从HTML中删除并输入成功消息HTML

如果是这样..如果你想在模态关闭时恢复表格。然后你需要附加一个函数来关闭点击，这将删除成功消息HTML并重新插入表单HTML

编辑：

$(".selector").fancybox({
    onClosed: function() {
       document.getElementById('ClickToCallForm').style.display = ‘block’;
       document.getElementById('ClickToCallErrorMessage').style.display = ‘block’;
       document.getElementById('ClickToCallSuccessMessage').style.display = ‘none’;
    };

});

像这样的事情。（你删除了花哨的声明）。 close方法可能有不同的名称

但是发生了什么：

关于花式模态关闭。切换回表单的样式。在成功函数中被覆盖

Javascript加载新表单

2 个答案: