javascript - Hide one button and show another one after ajax completes - Stack Overflow

admin管理员组

文章数量:1296908

I have a form for registration, that is a two step process. For that reason, I have two buttons:

<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>

My idea is you check something when pressing the first button, that calls on my JavaScript code, that runs an AJAX request. At the end of the request, I want to hide the first button, and show the second one, that is used to submit the whole form (first button checks dates, and then shows more fields). However, this does not work. Here is my JavaScript code:

$("#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");
    });

Code works up until the last 3 lines, as the default event is blocked, my code is submitted and I get the requested data back as specified in a div with id="rooms". What am I doing wrong, because the buttons are not being hidden/shown?

I have a form for registration, that is a two step process. For that reason, I have two buttons:

<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>

My idea is you check something when pressing the first button, that calls on my JavaScript code, that runs an AJAX request. At the end of the request, I want to hide the first button, and show the second one, that is used to submit the whole form (first button checks dates, and then shows more fields). However, this does not work. Here is my JavaScript code:

$("#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");
    });

Code works up until the last 3 lines, as the default event is blocked, my code is submitted and I get the requested data back as specified in a div with id="rooms". What am I doing wrong, because the buttons are not being hidden/shown?

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked Jun 2, 2016 at 11:48 Mihail IvanchevMihail Ivanchev 42566 silver badges2323 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 7

$("#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;
        },
        plete: 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.

});

Create one class for hidden

.hidden{
display :none;
}

And your initial HTML would be

<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>

And ajax

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

e.preventDefault();

Write e.preventDefault(); after display/hide button script execution:

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

    });

Try this

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

or some kind of targeting the "submit" buttons for "click" event as you cant prevent the submit event AFTER it has fired :)

Try this..

$(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();
});

$("#reservationform").submit(function(e) {
      e.preventDefault();
        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: "GET",
            url: url,
            data: dataString,
            success: function(name)
            {
                document.getElementById('rooms').innerHTML = name;
            }, 
            plete: function() {
               $("button#check").css("display", "none");
              $("button#book").css("display", "block");
            }
        });
         // avoid to execute the actual submit of the form.

    });

check on plnkr

i think that dont need css or class easy so

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

that have the same effect in HTML

style="display: none;

本文标签： javascriptHide one button and show another one after ajax completesStack Overflow