How can I loop, regex and put into an array in jQuery

Hello everybody,

I have a bunch of AJAX scripts that fetch and give data from and to PHP but the one I'm trying to make, I have no idea how to do it or which is the best way to do it. Here's the scenario:

  1. User selects 1st option form combo box and second combo box gets filled (AJAX)
  2. User selects 2nd option from second combo box and a table with check boxes appears at the bottom (AJAX)
  3. User selects/un-selects options (check boxes), hit SAVE and it supposedly saves the changes into the DB using AJAX and PHP

The problem is that the table rows with its check boxes are generated dynamically. Normally I would iterate through all the check boxes creating variables which would be passed as POST to a PHP function in another page using AJAX but, since in this case the check boxes are created dynamically I can't do that as I don't know the number of variables (check boxes) I will have to deal with or their IDs.

I've made a function in jQuery to fetch all check boxes generated in PHP and sent to the page and got this:

<input type=​"checkbox" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-14" name=​"author-14" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-10" name=​"author-10" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-15" name=​"author-15" data-theme=​"default">​
<input type=​"checkbox" data-render=​"switchery" id=​"author-23" name=​"author-23" data-theme=​"default">​

Open in new window

and here's the function to produce that:

$('[id^="author-"]').each(function(i, val) {
	console.log(val);
});

Open in new window

What I would like to end up with is an array like [ "12"=>1, "13"=>1, "14"=>1, "10"=>1, "15"=>0, "23"=>0 ] so I can send it PHP in one variable and handle it there. Is it possible? I guess my question is how can I iterate through all the results, fetch the number after the dash in the id of each object, see if it's checked or not and push that into the end of an array?

Any help will be appreciated!!!
LVL 6
Cesar AracenaPHP EnthusiastAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can loop through data-render and filter on :checked as well as the value of data-render


https://jsbin.com/bafiwenovu/edit?html,console,output
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>test</title>
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
         $(function(){
           $("input[data-render='switchery']:checked").each(function(){
         var x = $(this).val();
         console.log(x);
         });
         });
      </script>
   </head>
   <body>
      <input type="checkbox" data-render="switchery" id="author-11" name="author-11" data-theme="default" value="1" checked>
      <input type="checkbox" data-render="switchery" id="author-12" name="author-12" data-theme="default" value="2" checked>
      <input type="checkbox" data-render="switchery" id="author-13" name="author-13" data-theme="default" value="3" checked>
      <input type="checkbox" data-render="switchery" id="author-14" name="author-14" data-theme="default" value="4" checked>
      <input type="checkbox" data-render="switchery" id="author-10" name="author-10" data-theme="default" value="5" checked>
      <input type="checkbox" data-render="switchery" id="author-15" name="author-15" data-theme="default" value="6">
      <input type="checkbox" data-render="switchery" id="author-23" name="author-23" data-theme="default" value="7">
      <input type="checkbox" data-render="something_else" id="author-23" name="author-23" data-theme="default" value="8">
      <input type="checkbox" data-render="something_else" id="author-23" name="author-23" data-theme="default" value="9" checked>
   </body>
</html>

Open in new window


Output

"1"
"2"
"3"
"4"
"5"
hieloCommented:
>> [ "12"=>1, "13"=>1, "14"=>1, "10"=>1, "15"=>0, "23"=>0 ]
Typically, the browser will POST only the checked items, so if you actually want to know what's unchecked as well, then iterate over all input[type="checkbox"].  
var authors={};
$('input[type="checkbox"]').each(function(){
   let id = $(this).attr("id").replace(/\D/g,'')
   authors[id] = this.checked ? 1 : 0;
});
console.log(authors);

Open in new window


If you have "groups" of checkboxes, (some authors and some publishers) and you are interested just in a specific group, you can add a class to your checkboxes and use that class in the selector:
<input type=​"checkbox" class="author" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" class="publisher" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" class="author" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​

let authors={};
$('input.author[type="checkbox"]').each(function(){
     let id = $(this).attr("id").replace(/\D/g,'')
   authors[id] = this.checked ? 1 : 0;
});
console.log(authors);

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cesar AracenaPHP EnthusiastAuthor Commented:
Thanks hielo!

Perfect!!! This is what I've got: {9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 0, 23: 0}
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.