Getting values from php dynamically created checkboxes with jquery

Question

This is not a duplicate of a question suggested as duplicate as this question has nothing to do with event binding

Hi, Im trying to get the value of a check box to send in a ajax request to a php page, the checkboxes are dynamically created using php. So far my code allows me to show an instruction to the user telling the user to choose an admin to delete from the list dynamically created. Then when a checkbox is checked the instrcution hides and the delete admin button is shown. Next on clicking the delete button I'm trying to confirm the user wants to delete the admin chosen and click to confirm or cancel. The real problem I'having is getting the value of the chosen checked checkbox to pass to the php processing page, so far I have managed to get the value of the first checkbox to pass no matter which checkbox is checked

Jquery

<script type="text/javascript">

$(document).ready(function() {

    var checkboxes = $("input[type='checkbox']");

checkboxes.click(function() {
    $('.delete_admin_but').show();
    $('#adminDeleteNotice').hide();
    var deleteAdminName=$(this).attr('id');
});

    $(".delete_admin_but").click(function() {



//  if(confirm("Are you sure you want to delete the Admin")) {

    $("#deleteAdminError").html('<img src="image/ajax-loader.gif" width="16" height="16" alt=""/>');




$.post("includes/delete_admin.inc.php",{deleteAdminname:deleteAdminName},function(json)   {
    if(json.result === "success") {
        $("#deleteAdminError").html(json.message);
//  $('.add_intern').get(0).reset();
    }else{
        $("#deleteAdminError").html(json.message);
    }
});



});//submit click
});//doc ready
</script>

html form

<div id="deleteAdmin" style="display:none">

<form id="adminDelete">

          <div class="delete_admin_list">

            <?php while($row = mysqli_fetch_array($result1)) { ?>

              <input type="checkbox" id="<?php echo $row['name']; ?>" value="<?php echo $row['id']; ?>" name="delete[]" class="checkboxAdmin" />

              <div id="admin_db_detail"><?php echo $row['name']; ?> - <?php echo $row['email']; ?></div>

              <?php } ?>

      </div>        


<div id="adminDeleteNotice" style="display:block">Please Choose an Admin to Delete</div>

<input name="delete_admin_but" id="delete_admin_but" type="button" class="delete_admin_but" value="Delete Admin" style="display:none"/>

</form>

<div id="deleteAdminError"></div>

</div>

If anyone could help me figure this out I would be greatful

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Wesley Smith, May 06 '15 at 17:11
Just at a quick glance, your setting 'deleteAdminName' as a var so it's a local variable. after the click handler is done, it's does not exist anymore. — Taplar, May 06 '15 at 17:18
@DelightedDD how is this a duplicate? im not binding events, nor am I using a select list? — Tiny, May 06 '15 at 17:25
@Taplar, I did put the var deleteAdminName within the delete button click function, but it only returns the first checkbox values of the list not the values of the checkbox that is checked, however I accept your point as valid, although doesnt help me resolve the problem. Thankyou for your input — Tiny, May 06 '15 at 17:36
I'm not entirely sure you get what I said. Inside your checkboxes.click you set 'deleteAdminName' to a value. Regardless of what you set it as, you are setting it with "var deleteAdminName = 'something'". The var in front of that variable makes it local to that function. Once the function finishes, that variable no longer exists. Then when you get around to the execution of the click of '.delete_admin_but' your post makes reference to '{deleteAdminname:deleteAdminName}', but that variable, as previously stated, no longer exists, so your passing to your ajax call deleteAdminname:undefined. — Taplar, May 06 '15 at 17:41
Yes I understood that, within the code I posted I agree with what you said, If I set the var within the $(".delete_admin_but").click(function() { var deleteAdminName=$('.checkboxAdmin').attr('id'); like this the var only gets the values of the first checkbox, not the checkbox that is actually clicked, — Tiny, May 06 '15 at 17:51

score 0 · Answer 1 · answered May 06 '15 at 19:32

I have figured this out now, so posting to show how and to make a point that this had no relevance to the suggested duplication of question as was suggested. Maybe those who suggest these duplicates should read the question properly first, and then the question they are suggesting as being duplicated to really see if there is any relevance, However just in case I'm wrong I will be very happy to withdraw this comment should someone show me the relevance of the suggested question with the question I posted and providing a solution for.

My solution

jquery changed to the following

<script type="text/javascript">

$(document).ready(function() {

    var checkboxes = $("input[type='checkbox']");

checkboxes.click(function() {
    $('.delete_admin_but').show();
    $('#adminDeleteNotice').hide();

});

    $(".delete_admin_but").click(function() {

$.post("includes/delete_admin.inc.php",{ checked_box : $('input:checkbox:checked').val()},function(json)   {
    if(json.result === "success") {
        $("#deleteAdminError").html(json.message);
//  $('.add_intern').get(0).reset();
    }else{
        $("#deleteAdminError").html(json.message);
    }
});
        });//submit click
});//doc ready
</script>

The change I have made from the original script is with the $.post line

Original code

$.post("includes/delete_admin.inc.php",{deleteAdminname:deleteAdminName},function(json)   {

New code that gets the checkbox value from the checkbox that is chosen

$.post("includes/delete_admin.inc.php",{ checked_box : $('input:checkbox:checked').val()},function(json)   {

Getting values from php dynamically created checkboxes with jquery

1 Answers1