form submit in a while loop php, jquery

Question

As you can see I want to create in a while multiple forms and buttons. The problem is when I want to submit one row from my array I want to execute this specific form and not another.

Even I put button tag inside the form I have problem. I think to set a unique id to form tag such as id="form_submit_change_status<?php echo $row['id_user']; ?>". But then the problem is what changes I have to do to the javascript code. sorry for my English and I hope to understand my problem...

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;
}

Your problem is that you are using id. Use classes instead to avoid getting the wrong form submitted. — Albin
– Albin, Commented Mar 13, 2015 at 16:44

lshettyl · Accepted Answer · 2015-03-13 17:04:13Z

As suggested above by others, it's flexible to use classes as opposed to IDs as they need to be unique. Classes also help grouping elements for easier access later.

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");
    });
});

Blazemonger · Accepted Answer · 2015-03-13 16:51:14Z

You're using a while loop to create HTML elements, but using the same ID attribute each time. IDs need to be unique; classes, however, do not.

Try this instead:

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');
        }
    });
});

Collectives™ on Stack Overflow

form submit in a while loop php, jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related