無法更新或驗證的自舉模式內的表單數據

Question

$('.editimg').on('click',function(){ 
 
    $("#myModel").modal("show"); 
 
    var regionid = $(this).data('id'); 
 
    $(".modal-body #id").val(regionid); 
 
    $("#region_id").val($(this).closest('tr').children()[1].textContent); 
 
    $("#region_name").val($(this).closest('tr').children()[2].textContent); 
 
    $("#description1").val($(this).closest('tr').children()[3].textContent); 
 
    $("#description2").val($(this).closest('tr').children()[4].textContent); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="editimg" href="#" id="<?php echo $reg_id;?>"><img src="../dmo_images/action_ico/sys_icon_edit.png" width="20" height="20" alt="Edit"></a> 
 
<div class="modal-body" > 
 
    <form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" > 
 
    <table class="table" width="200" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr class="FormData" rowpos="1"> 
 
     <td class="CaptionTD">Name of Region</td> 
 
     <td><input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></input></td> 
 
     </tr> 
 
     <tr class="FormData" rowpos="2"> 
 
     <td class="CaptionTD">Description 1</td> 
 
     <td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></input></td> 
 
     </tr> 
 
     <tr class="FormData" rowpos="3"> 
 
     <td class="CaptionTD">Description 2</td> 
 
     <td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></input></td> 
 
     </tr> 
 
    <tr class="FormData" rowpos="4"></tr> 
 
    </table> 
 
</form> 
 
</div> 
 
<div class="modal-footer"> 
 
<button type="submit" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button> 
 
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
</div> 
 
</div>

if(isset($_POST["btnupdate"])) 
{ 
    $id=$_REQUEST["region_id"]; 
    $name=$_REQUEST["region_name"]; 
    $desc1=$_REQUEST["description1"]; 
    $desc2=$_REQUEST["description2"]; 

    $query1="Update tbl_region set region_name='$name', description1='$desc1', description2= '$desc2', created_date='$date' where region_id=$id"; 
} 

//validation.js

function validate_region() 
{ if(get("region_name").value=="") { 
     return false;  } 
    else if(get("description1").value== "") {  
     return false; } 
    else if(get("description2").value== "") {  
     return false; } 
    else {  
     return true; } 
} 

我有兩個圖像按鈕的表格每行如下。

點擊這些圖標後，我會在行中顯示引導模式。 我已經完成了驗證，但是當我點擊「更新」按鈕時，沒有顯示驗證，並且按鈕根本不起作用。

我是非常初學者的一級，所以我不知道我在哪裏錯了或留下代碼。我一直在網上瀏覽解決方案，但我仍然無法得到它。
需要更新的值才能存儲在數據庫中。
P.S當在Delete Modal上點擊刪除按鈕時，它也需要從數據庫中刪除，這也不起作用。

您的幫助非常感謝。謝謝！

Answer 1

試試下面的工作代碼

$('.editimg').on('click',function(){ 
 
     $("#myModel").modal("show"); 
 
     var regionid = $(this).data('id'); 
 
     $(".modal-body #id").val(regionid); 
 
     $("#region_id").val($(this).closest('tr').children()[1].textContent); 
 
     $("#region_name").val($(this).closest('tr').children()[2].textContent); 
 
     $("#description1").val($(this).closest('tr').children()[3].textContent); 
 
     $("#description2").val($(this).closest('tr').children()[4].textContent); 
 
    }); 
 

 
    function validate_region() 
 
    {   
 
     if($("#region_name").val() == ""){ 
 
      return false;  } 
 
     else if($("#description1").val() == "") {  
 
      return false; } 
 
     else if($("#description2").val() == "") {  
 
      return false; } 
 
     else 
 
     {  
 
      // HERE U SHOULD WRITE CODE TO WRITE IT TO DATABASE   
 
      $("#myModel").modal("hide"); 
 
      return true;  
 
     } 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>sas</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
</head> 
 
<body> 
 

 
<div class='modal fade bs-example-modal-sm' id='myModel' tabindex='-1' role='dialog' aria-labelledby='gridSystemModalLabel'> 
 
    <div class='modal-dialog modal-sm' style='transform: translate(0px, 50%);' role='document'> 
 
     <div class='modal-content'> 
 
      <form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" > 
 
      <div class="modal-body" >    
 
       <table class="table" width="200" border="0" cellpadding="0" cellspacing="0"> 
 
       <tr class="FormData" rowpos="1"> 
 
        <td class="CaptionTD">Name of Region</td> 
 
        <td> 
 
        <input type="hidden" id="region_id" class="FormElement ui-widget-content" role="textbox" name="region_id"> 
 
        <input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></td> 
 
       </tr> 
 
       <tr class="FormData" rowpos="2"> 
 
        <td class="CaptionTD">Description 1</td> 
 
        <td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></td> 
 
       </tr> 
 
       <tr class="FormData" rowpos="3"> 
 
        <td class="CaptionTD">Description 2</td> 
 
        <td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></td> 
 
       </tr> 
 
       <tr class="FormData" rowpos="4"></tr> 
 
       </table> 
 
      
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <button type="reset" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
      </div> 
 
      </form> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 
<table class="table"> 
 
    <tr> 
 
     <th></th><th>Id</th><th>Name of Region</th><th>Description 1</th><th>Description 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td><a class="editimg" href="#" id="1"><i class="glyphicon glyphicon-edit" style="font-size:20px"></i></a></td><td>1</td><td>val1</td><td>val2</td><td>val3</td> 
 
    </tr> 
 
    <tr> 
 
     <td><a class="editimg" href="#" id="2"><i class="glyphicon glyphicon-edit" style="font-size:20px"></a></td><td>11</td><td>val11</td><td>val21</td><td>val31</td> 
 
    </tr> 
 
</table> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
</body> 
 
</html>