如果按鈕處于已單擊的模式中，如何執(zhí)行操作？我在 Ajax 和 PHP 中使用 jQuery。Javascript$(document).on('click', '#edit', function(){var id = $(this).attr("data-id");var userName = $(this).attr("data-username");var userType = $(this).attr("data-user_type");var action = 'edit';$.ajax({ url:"/auth/action", method:"POST", data:{id:id, action:action}, success:function(data) { $('#editModal').modal('show'); $('#userName').val(userName); $('#userType').val(userType); $('#id').val(id); }}) });PHPif($_POST["action"] == 'edit'){ $statement = $connect->prepare( "UPDATE users SET username = :username, user_type = :user_type WHERE id = :id" ); $result = $statement->execute( array( ':userName' => $_POST["username"], ':userType' => $_POST["user_type"], ':id' => $_POST["id"] ) ); if(!empty($result)) { echo 'Data Updated'; }}模態(tài) HTML <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Edit User</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action=""> <div class="form-group"> <label for="userName" class="col-form-label">Username:</label> <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038"> </div>請求是編輯用戶的信息，我遇到的問題是模式中的提交按鈕沒有引起操作，我還在開發(fā)人員工具的網(wǎng)絡(luò)選項卡中檢查了它。
2 回答
臨摹微笑
TA貢獻1982條經(jīng)驗 獲得超2個贊
一旦您通過編輯將數(shù)據(jù)分配到模態(tài)中，接下來就是單擊模態(tài)內(nèi)的更新按鈕，因此您需要另一個 jquery 代碼.... 為您的更新按鈕提供一個類或 id 并這樣做...
$(document).on('click', '.update', function(e){
e.preventDefault();
var id = $("#id").val();
var userName = $("#userType").val();
var userType = $("#userType").val();
var action = 'update';
$.ajax({
url:"/auth/action.php",
method:"POST",
data:{id:id, action:action,userName:userName,userType:userType},
success:function(data)
{
// Your response from update function....
// Now hide your modal if you see success response...
$('#editModal').modal('hide');
}
})
});
catspeake
TA貢獻1111條經(jīng)驗 獲得超0個贊
我認為您可能正在尋找從模態(tài)彈出窗口中使用 ajax 發(fā)布表單數(shù)據(jù)，但您無法獲得它。
這是指導您并檢查解決方案是否正確的代碼
$(document).on('click', '#update', function(){
$('#editModal').modal('show');
var id = $("#id").val();
var userName = $("#userType").val();
var userType = $("#userType").val();
alert(userType);
var action = 'edit';
$.ajax({
url:"/auth/action.php",
method:"POST",
data:{id:id, action:action,userName:userName,userType:userType},
success:function(data)
{
$('#editModal').modal('hide');
$('#userName').val(userName);
$('#userType').val(userType);
$('#id').val(id);
}
})
});
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">
Launch demo modal
</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="form-group">
<label for="userName" class="col-form-label">Username:</label>
<input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">
</div>
<div class="form-group">
<label for="userType" class="col-form-label">User Type:</label>
<select class="form-control border-success" id="userType">
<option value="user">User</option>
<option value="contributor">Contributor</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<input type="hidden" id="id" name="id" value="1">
<input type="hidden" id="operation" name="operation">
<button type="button" id="update" name="update" class="btn btn-success">Update</button>
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
- 2 回答
- 0 關(guān)注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消