CODEWITHSUNDEEP
javascriptjqueryhtml
masouduut94
masouduut94

Reputation: 1122

Jquery - How to store checked items in html form and return it in an array?

imagine we have got some page like this:

<button id="del"><i  class="fa fa-trash-alt"></i></button>

<input type="checkbox" class="del_list" value="1"/>

<input type="checkbox" class="del_list" value="2"/>

<input type="checkbox" class="del_list" value="3"/>

Now I want to build a jquery function which can enable me to store values of del_list class if the checkbox is checked. I want this function to be triggered by clicking on the del button.

I developed jquery function like this but it does not work.

$("#del").click(function ()
{
  vals = [];
  $(".del_list").each(function ()
  {
    if($(this).is(":checked"))
    {
      vals.push($(this).val());
    }
  });
  alert(vals);
});

I want to send vals array to a php form to delete the checked contents in my work. if there is any other answer or solution with as few changes as possible in php or javascript, please let me know.

thanks a lot for your helps

Upvotes: 0

Views: 83

Answers (3)

Sumesh TG
Sumesh TG

Reputation: 2575

$("#del").click(function ()
    {
      data = [];
      $(".del_list").each(function ()
      {
        if($(this).is(":checked"))
        {
          data.push($(this).val());
        }
      });
      console.log(data);
      var url="http://localhost:8090";
     $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: function(response){
          console.log("succes");
          },
          error: function(response){
          console.log(JSON.stringify(response));
          }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="del">delete</button>
<input type="checkbox" class="del_list" value="1"/>

<input type="checkbox" class="del_list" value="2"/>

<input type="checkbox" class="del_list" value="3"/>

Try this Use $.ajax calls to communicate with php.

Upvotes: 1

balakrishnan
balakrishnan

Reputation: 383

You can set the value in to a hidden field and submit it.

Html

<input type="hidden" id="del_list" name="del_list" />

And javascript will be:

$("#del").click(function ()
{
  vals = [];
  $(".del_list").each(function ()
  {
    if($(this).is(":checked"))
    {
      vals.push($(this).val());
    }
  });
  $('#del_list').val(vals);
});

Now the hidden field contains the deleted list value as comma separated value list

Upvotes: 1

messerbill
messerbill

Reputation: 5629

Your code itself is working so i guess you missed to include jQuery.

$("#del").click(function ()
{
  vals = [];
  $(".del_list").each(function ()
  {
    if($(this).is(":checked"))
    {
      vals.push($(this).val());
    }
  });
  alert(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="del">delete</button>
<input type="checkbox" class="del_list" value="1"/>

<input type="checkbox" class="del_list" value="2"/>

<input type="checkbox" class="del_list" value="3"/>

Upvotes: 0

Related Questions