表单在while循环中提交php，jquery

Question

如您所见，我想在一段时间内创建多个表单和按钮。 问题是，当我想从我的数组中提交一行时，我想执行此特定表单而不是另一行。

甚至我将按钮标签放在有问题的表格内。 我认为要为表单标签设置唯一的ID，例如id="form_submit_change_status<?php echo $row['id_user']; ?>" 。 但是，问题是我必须对javascript代码进行哪些更改。 对不起，我的英语，我希望了解我的问题...

while($row = $result->fetch_array() ){
<form name="form_submit_change_status" id="form_submit_change_status" action="">
<input type="text" class="user_id" id="user_id" name="user_id" value="<?php echo $row['id_user']; ?>" />
<input type="text" name="is_enabled" value="<?php echo $row['is_enabled']; ?>" />
</form>
<button type="submit" id="submit_change_status" class="btn btn-warning btn-xs" value="<?php echo $row['is_enabled']; ?>">Change status</button>
}


$(document).ready(function(){
$('#submit_change_status').click(function(){
var formData = $("#form_submit_change_status").serializeArray();
var userId = $("#user_id").val();
alert(userId);
var URL = $("#form_submit_change_status").attr("action");
var URL = "change_status_user.php";
$.post(URL,
formData,
function(data, textStatus, jqXHR)
{
//  alert("Data: " + data + "\nStatus: " + textStatus);  
}).fail(function(jqXHR, textStatus, errorThrown) 
{
});
var varChangeStatus = $('#is_enabled'+userId).val();
if(varChangeStatus=="true"){
$('#is_enabled'+userId).html('false');
}else{
$('#is_enabled'+userId).html('true');
}
});
});
</script>


// change_status_user.php
$DBConnection = new DBConnection();
if (isset($_POST['is_enabled'])) {
$id = $_POST['user_id'];
$status = $_POST['is_enabled'];
if($status=="true")
$status = "false";
else
$status = "true";
$sql = "UPDATE users SET is_enabled = '$status' WHERE id_user = $id";
$res = $DBConnection->db_connection->query($sql);
echo $sql;
}

Answer 1

正如上面其他人所建议的那样，使用类（而不是ID）是灵活的，因为它们需要唯一。 类还有助于对元素进行分组，以便以后访问。

HTML（PHP）：

while($row = $result->fetch_array() ){
<form name="form_submit_change_status" class="form_submit_change_status" action="">
    <input type="text" class="user_id" name="user_id" value="<?php echo $row['id_user']; ?>" />
    <input type="text" class="is_enabled" name="is_enabled" value="<?php echo $row['is_enabled']; ?>" />
    <button type="button" class="btn btn-warning btn-xs" value="<?php echo $row['is_enabled']; ?>">Change status</button>
</form>
}

jQuery的：

$(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();
        alert(userId);
        //var URL =  $form.attr("action");
        var URL = "change_status_user.php";
        $.post(URL, formData)
        .done(function(data) {
            //success
        }).
        fail(function(jqXHR, textStatus, errorThrown) {
            //failure    
        });

        var $isStatus = $form.find(".is_enabled");
        var varChangeStatus = $isStatus.val();
        $isStatus.val(varChangeStatus=="true" ? "false" : "true");
    });
});

Answer 2

您正在使用while循环创建HTML元素，但是每次都使用相同的ID属性。 ID必须是唯一的； 班级却没有。

尝试以下方法：

PHP / HTML：

while($row = $result->fetch_array() ){
  <form name="form_submit_change_status" class="form_submit_change_status" action="">
    <input type="text" class="user_id" name="user_id" value="<?php echo $row['id_user']; ?>" />
    <input type="text" class="is_enabled" name="is_enabled" value="<?php echo $row['is_enabled']; ?>" />
    <button type="submit" class="btn btn-warning btn-xs" value="<?php echo $row['is_enabled']; ?>">Change status</button>
</form>
}

JS：

$(document).ready(function() {
    $('.submit_change_status').click(function(e) {
        e.preventDefault();
        var $form = $(this).closest(".form_submit_change_status");
        var formData = $form.serializeArray();
        var userId = $form.find(".user_id").val();
        alert(userId);
     // var URL = $form.attr("action");
        var URL = "change_status_user.php";
        $.post(URL,
            formData,
            function(data, textStatus, jqXHR) {
                //  alert("Data: " + data + "\nStatus: " + textStatus);  
            }).fail(function(jqXHR, textStatus, errorThrown) {});
        var $isEnabled = $form.find('.is_enabled');
        var varChangeStatus = $isEnabled.val();
        if (varChangeStatus == "true") {
            $isEnabled.html('false');
        } else {
            $isEnabled.html('true');
        }
    });
});