JQuery Checked Selector in modal field and return it to page

Question

What I want to do is return the value set for each checkbox in the modal field to the text box. This question is very similar to this one , but the purpose of the question is different. So please take a look at both of them. :)

I have code to initialize a modal window:

<script> var grid_modal_options = { height: 'auto', width: '80%', modal: true }; function showProductsModalBox() { $("#products_modal_box").dialog(grid_modal_options); $("#products_modal_box").parent().appendTo('form:first'); } </script> <div id="products_modal_box" title="Products" style="display: none;"> <div class="in"> <div class="grid-12-12"> <form id="products_modal_box_form" action="#" method="post"> <a href=\"javascript:;\" onclick=\"$('#products_id_textbox').val(\"input[name='checkedID[]']:checked\");$('#products_modal_box').dialog('close')();\">Submit</a> <table> <thead> <tr> <th>&nbsp;</th> <th>Product</th> </tr> </thead> <!-- Query for read mysql goes here (I skipped this line because it not the main thing I'm gonna ask since it run well) /--> <tbody> <?php //read the results while($fetch = mysqli_fetch_array($r)) { print "<tr>"; print " <td><input type='checkbox' name='checkedID' value='" . $fetch[0] . "' /></td>"; //--> How to get the value of $fetch[0], collect it and return to a textbox? print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID print "</tr>"; } ?> </tbody> </table> </form> </div> </div> </div> 

As you see above, I am trying to use a pseudo selector : input[name='checkedID[]']:checked , but could not return the value. Or something I missed for the code?

And here is the text field to return the value specified in the modal field:

 <input type='text' id='products_id_textbox' name='products_id_textbox' /> <a href='#' onclick='showProductsModalBox(); return false;'>Choose products</a> 

Code capable of showing a modal box. But how to return the "Product" selected from each text field by the user to the products_id_textbox text field? Thanks.

Answer 1

The problem is resolved using this code:

 <script> $("input#checkedID").change(function () { var str = ""; $("input:[name='checkedID[]']:checked").each(function () { str += $(this).val() + ", "; }); $("input#products_id_textbox").val(str); }) .trigger('change'); </script> 

and modification of the button, which is only for closing the modal window:

 <a href=\"javascript:;\" onclick=\"$('#products_modal_box').dialog('close')();\">Submit</a> 

This function is called : checked Selector .

Thanks a lot and hope that ... :)

Answer 2

What you output from php is not verifiedID, not checkedID [] Change

 print " <td><input type='checkbox' name='checkedID' value='" . $fetch[0] . "' /></td>"; 

to

 print " <td><input type='checkbox' name='checkedID[]' value='" . $fetch[0] . "' /></td>"; 

Answer 3

Please try the code below:

  myCheckbox is a class which you need to assign your checkboxes.. var checkboxValues = $('.myCheckbox:checked').map(function() { return $(this).val(); }).get(); Then you can assign that values into your textbox.... $('#products_id_textbox').val(checkboxValues); 

Hope this helps you ...

Answer 4

Your selector should look like this:

 $("input[name='checkedID[]']:checked") 

It gives you all the flags with the name "checkedID []". you have to loop it to get all the values.

Hope this helps!