CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Mihail Ivanchev
Mihail Ivanchev

Reputation: 425

Hide one button and show another one after ajax completes

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?

Upvotes: 3

Views: 4739

Answers (7)

Rtronic
Rtronic

Reputation: 673

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;

Upvotes: 0

Alex
Alex

Reputation: 566

$("#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;
            }, 
            complete: function() {
               $("button#check").css("display", "none");
              $("button#book").css("display", "block");
            }
        });
         // avoid to execute the actual submit of the form.

    });

check on plnkr

Upvotes: 0

Parth Patel
Parth Patel

Reputation: 521

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

});

Upvotes: 7

Ramkee
Ramkee

Reputation: 928

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

Upvotes: 1

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

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

Upvotes: 0

Alex
Alex

Reputation: 566

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

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

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.

    });

Upvotes: 0

Related Questions