Question

我有一张注册表，这是一个两步的过程。出于这个原因，我有两个按钮：

<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 =＆＃34; rooms＆＃34;的div中的指定获得所请求的数据。我做错了什么，因为按钮没有被隐藏/显示？

Answer 1

$("#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.

});

Answer 2

为隐藏

创建一个类

.hidden{
display :none;
}

您的初始HTML将是

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

<button type="submit" name="book" id="book" class="btn btn-primary btn-block hidden"><?php esc_html_e('Book', 'theme'); ?></button>

和ajax

    $.ajax({
            type: "POST",
            url: url,
            data: dataString,
            success: function(name)
            {
                document.getElementById('rooms').innerHTML = name;
                $("#check").addClass("hidden");
                $("#book").removeClass("hidden");
            }
});

e.preventDefault();

Answer 3

在显示/隐藏按钮脚本执行后写e.preventDefault();：

$("#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;
                // write it here

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



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

    });

Answer 4

试试这个

$("#reservationform button[type=submit]").on('click', function(e) { 
    e.preventDefault();
    ... 
    })

或某种针对“click”事件的“提交”按钮，因为您无法阻止提交事件后触发：）

Answer 5

试试这个..

$(document).on('sublit', '#reservationform',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").hide();
    $("button#book").show();
});

Answer 6

List<int>

检查plnkr

Answer 7

我认为不需要CSS或类很容易

$('#form-btn-delete').show();
$('#form-btn-save').hide();

在HTML中具有相同效果

style="display: none;

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

7 个答案: