ajax 및 javascript로 양식 표시 및 숨기기

Question

ajax를 통해 데이터베이스에 값을 삽입하려고합니다. 데이터베이스에서 while 루프가 들어오는 행이 있습니다. 단추가있는 각 행에 하나의 열을 추가했습니다. 버튼을 클릭하면 데이터베이스에 값을 제출하고 있습니다. 삭제 쿼리도 올바르게 작동합니다.

성공적인 제출시 선택 양식을 숨기고 취소 양식을 표시하려고합니다.

그리고 삽입 쿼리가 실패하면 오류를 표시하려고합니다.

그런 다음 취소 버튼을 클릭하면 삭제 쿼리가 성공적 일 때 선택 양식이 표시됩니다.

도움이 필요합니다. 미리 감사드립니다

PHP 코드 :

동안 루프 코드 :

if($num_rowsslctcncl) 
{ 
    $slctcncldis="<form name='cancel_selection' class='cancel_selection' action=''> 
    <input type='hidden' name='crs' class='user_id' value='$coursename'> 
    <input type='hidden' name='insertid' class='insertid' value='$insertid'> 

    <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button> 
    </form>"; 
} 

if(!$num_rowsslctcncl) 
{ 
    $slctcncldis="<form name='form_submit_change_status' class='form_submit_change_status' action=''> 
    <input type='hidden' name='crs' class='user_id' value='$coursename'> 
    <input type='hidden' name='insertid' class='insertid' value='$insertid'> 

    <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button> 
    </form>"; 
} 

echo"<tbody><tr> 
<td>$crs</td> 
<td>$slctcncldis </td>  

Ajax와 자바 스크립트 코드 :

삽입 기능 코드 :

<script> 
$(function(){ 
    $('.btn.btn-warning').click(function(e) { 
     e.preventDefault(); 
     var $form = $(this).closest(".form_submit_change_status"); 
     var formData = $form.serializeArray(); 
     var userId = $form.find(".user_id").val(); 
     var URL = "response.php"; 

     $.post(URL, formData).done(function(data) { 
     }); 

     fail(function(jqXHR, textStatus, errorThrown) { 
      alert(errorThrown); 
     }); 
    }); 
}); 
</script> 

삭제 기능 코드 :

<script> 
$(function(){ 
    $('.btn.btn-cancel').click(function(e) { 
     e.preventDefault(); 
     var $form = $(this).closest(".cancel_selection"); 
     var formData = $form.serializeArray(); 
     var userId = $form.find(".user_id").val(); 

     var URL = "cancelselection.php"; 
     $.post(URL, formData) 
     .done(function(data) { 
     }); 

     fail(function(jqXHR, textStatus, errorThrown) { 
     }); 
    }); 
}); 
</script> 

Response.php

삽입 쿼리 코드 :

<?php 
include_once("db.php"); 

    $crs = $_POST["crs"]; 
    $sid = $_POST["insertid"]; 

    $strscheck="SELECT * FROM add_delete_record where sid='$sid'"; 
    $resultscheck=mysql_query($strscheck) or die(mysql_error()); 

    $num_rowscheck = mysql_num_rows($resultscheck); 

    if($num_rowscheck < 3) 
    { 
     $strsreg="insert into add_delete_record (sno, chcourse, sid) values('', '$crs','$sid')"; 
     $resultsreg=mysql_query($strsreg) or die(mysql_error()); 
    } 
    else 
    { 
    } 
?> 

Answer 1

당신은 루프에서 두 폼을 인쇄해야합니다. 선택한 양식을 삽입하는 대신 처음에 양식을 표시하거나 숨 깁니다. 이런 식으로 해보십시오. 차이점을 찾을 수있는 코드와 비교하십시오.

if($num_rowsslctcncl) 
{ 
    $slctcncldis_Cancel ="<form name='cancel_selection' class='cancel_selection' style="display:block;" action=''> 
      <input type='hidden' name='crs' class='user_id' value='$coursename'> 
      <input type='hidden' name='insertid' class='insertid' value='$insertid'> 
      <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button> 
     </form>"; 

} else { 
    $slctcncldis_Cancel ="<form name='cancel_selection' class='cancel_selection' style="display:none;" action=''> 
      <input type='hidden' name='crs' class='user_id' value='$coursename'> 
      <input type='hidden' name='insertid' class='insertid' value='$insertid'> 
      <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button> 
     </form>"; 
} 

if(!$num_rowsslctcncl) 
{ 

    $slctcncldis_Submit ="<form name='form_submit_change_status' class='form_submit_change_status' style="display:block;" action=''> 
      <input type='hidden' name='crs' class='user_id' value='$coursename'> 
      <input type='hidden' name='insertid' class='insertid' value='$insertid'> 
      <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button> 
      </form>"; 

} else { 
    $slctcncldis_Submit ="<form name='form_submit_change_status' class='form_submit_change_status' style="display:none;" action=''> 
      <input type='hidden' name='crs' class='user_id' value='$coursename'> 
      <input type='hidden' name='insertid' class='insertid' value='$insertid'> 
      <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button> 
      </form>"; 

} 

echo"<tbody><tr> 
<td>$crs</td> 
<td>$slctcncldis_Cancel.$slctcncldis_Submit</td>  


    Ajax and javascript Code : 

Insert Function Code : 

    <script> 
$(function(){ 
    $('.btn.btn-warning').click(function(e) { 
     e.preventDefault(); 
     var $form = $(this).closest(".form_submit_change_status"); 

    var $cancel_form = $form.siblings(".cancel_selection"); 

     var formData = $form.serializeArray(); 
     var userId = $form.find(".user_id").val(); 


     var URL = "response.php"; 
     $.post(URL, formData).done(function(data) { 
     $form.hide(); 
     $cancel_form.show(); 
     }); 

     fail(function(jqXHR, textStatus, errorThrown) { 
      alert(errorThrown); 
     }); 


    }); 
}); 

</script>