업데이트 양식 사업부는 다음과 같이 내가 양식을 가지고 JQuery와

Question

을 사용하여 제출 표시 I가 원하는 것은

<script> 
      $(document).ready(function(){ 
       $("#btnSubmit").click(function(){ 
        var fname = $("#fname").val(); 
        $.ajax({ 
         url : "updateDb.php", // php file where you write your mysql query to store value 
         type : "POST", // POSTmethod 
         data : {"fistname":fname}, 
         success : function(n){ 
               alert("works"); //function goes here 
         } 
        }); 
       }); 

그래서 사용자가 제출을 누르면 양식이 사라지고 대신 "세부 정보가 입력되었습니다"라는 간단한 화면이 나타납니다. 나는이 일을하는 가장 좋은 방법은 두 divs, 하나에 대한 또 다른 간단하게 생각하는 것입니다

귀하의 세부 사항은 입력했습니다

jobby. 그런 다음 함수가 호출되면 div 중 하나를 접을 수 있고 다른 하나는 표시 할 수 있습니다.

이렇게하는 것이 가장 좋은 방법입니까? 내 대안은 무엇입니까? 이 작업을 수행하는 코드를 작성하려면 어떻게해야합니까?

고마워요.

Answer 1

양식을 다시 사용할 것인지 여부에 따라 다릅니다. 그렇지 않다면, 당신은 그냥 빈 텍스트 제공 할 수

$('.myForm').empty().text('Your details have been entered.'); 

같은 간단한 뭔가 단지 텍스트의 사업부 및 플러그를 비워을. 내가 왜 .html()을 사용하지 않았는지 궁금하다면, 그것의 단지 개인적인 취향 (나는이 방법이 더 투명하다고 생각합니다)이 아니라 it is also remarkably faster입니다.

여러 번 사용하는 양식을 다시로드하려면, 내가 다른 사업부를 만들 display:none;로 설정하고이를 전환 할 것 :

HTML :

<div class="myFormResponse">Your details have been entered.</div> 

CSS :

.myFormResponse { 
    display:none; 
} 

jQuery를 :

$('.myForm,.myFormResponse').toggle(); 

이렇게하면 양식을 다시로드하려는 경우 정확히 동일한 기능을 호출하도록 설정합니다.

두 시나리오 중 하나를 처리해야합니다.

Answer 2

양식의 HTML을 바꾸면됩니다.

$('#complete-message').html("<h1>Form Submitted!</h1><h2>We will be in touch soon.</h2><img id='checkmark' src='image' />"); 

당신은 ... 당신은 그가 이미 성공을 사용하던 코드