AJAX가 완료된 후 하나의 버튼을 숨기고 다른 버튼을 표시합니다.

Question

2 단계 프로세스 인 등록 양식이 있습니다. 이러한 이유로, 나는 두 개의 버튼이 있습니다

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

내 생각은 AJAX 요청을 실행하는 내 자바 스크립트 코드에서 호출하는 첫 번째 버튼을 누를 때 당신이 뭔가를 확인합니다. 요청이 끝나면 첫 번째 버튼을 숨기고 두 번째 버튼을 표시하여 전체 양식을 제출하는 데 사용됩니다 (첫 번째 버튼은 날짜를 확인한 다음 더 많은 필드를 표시합니다). 그러나 이것은 작동하지 않습니다.

$("#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 줄 때까지 작동하는 내 코드를 제출하고, 아이디와 사업부 = "객실에 지정된대로 내가 다시 요청 된 데이터를 얻을 : 여기 내 자바 스크립트 코드는 ". 버튼이 숨겨 지거나 보이지 않기 때문에 내가 뭘 잘못하고 있니? 표시/숨기기 버튼 스크립트 실행 후

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

쓰기 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 3

가 하나 개의 클래스를 작성

.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({ 
      type: "POST", 
      url: url, 
      data: dataString, 
      success: function(name) 
      { 
       document.getElementById('rooms').innerHTML = name; 
       $("#check").addClass("hidden"); 
       $("#book").removeClass("hidden"); 
      } 
}); 

e.preventDefault(); 

Answer 4

이

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

하거나 제출 이벤트를 방지 어차피로 해고 한 후에 :)이는 "클릭"이벤트에 대한 버튼을 "제출"대상으로 어떤 종류의

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

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

    }); 

CH eck on plnkr