隐藏一个按钮并在ajax完成后显示另一个按钮

Mihail Ivanchev 发表于 Dev

米哈伊尔·伊万切夫（Mikhail Ivanchev）

我有一个注册表格，这是一个两步过程。因此，我有两个按钮：

<button style="display: block" type="submit" name="check" id="check" class="btn btn-primary btn-block"><?php esc_html_e('Check', 'theme'); ?></button>
<button style="display: none;" type="submit" name="book" id="book" class="btn btn-primary btn-block"><?php esc_html_e('Book', 'theme'); ?></button>

我的想法是，您在按下第一个按钮时检查某项，这会调用我的JavaScript代码并运行AJAX请求。在请求结束时，我想隐藏第一个按钮，并显示第二个按钮，该按钮用于提交整个表单（第一个按钮检查日期，然后显示更多字段）。但是，这不起作用。这是我的JavaScript代码：

$("#reservationform").submit(function(e) {
        var url = document.getElementById('reservationform').action,
            fromDate = document.getElementById('checkin').value,
            toDate = document.getElementById('checkout').value,// the script where you handle the form input.
            dataString = 'fromDate=' + fromDate + '&toDate=' + toDate;
        $.ajax({
            type: "POST",
            url: url,
            data: dataString,
            success: function(name)
            {
                document.getElementById('rooms').innerHTML = name;
            }
        });
        e.preventDefault(); // avoid to execute the actual submit of the form.
        $("button#check").css("display", "none");
        $("button#book").css("display", "block");
    });

代码工作到最后3行为止，因为阻止了默认事件，所以我的代码已提交，并且我按照id =“ rooms”的div中的指定获取了所请求的数据。因为没有隐藏/显示按钮，我在做什么错？

帕特·帕特尔

$("#reservationform").submit(function(e) {
    var url = document.getElementById('reservationform').action,
        fromDate = document.getElementById('checkin').value,
        toDate = document.getElementById('checkout').value,// the script where you handle the form input.
        dataString = 'fromDate=' + fromDate + '&toDate=' + toDate;
    $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        success: function(name)
        {
            document.getElementById('rooms').innerHTML = name;
        },
        complete: function() {
          // write it here

          $("button#check").css("display", "none");
          $("button#book").css("display", "block");
        }
    });

    e.preventDefault(); // avoid to execute the actual submit of the form.

});