jQuery to check if checkbox is checked on button click, then do multiple AJAX requests to PHP

Question

Hi, I was wondering if it was possible to write some jQuery to check if on a button click, check if a certain checkbox is checked, and carry out an AJAX request to a PHP file.

The response if successful should post the JSON values to the "results" and "results2" div on my main html page.

I have tried the following code below

<form action="PHP.php" id="test" method="post">

<input type="checkbox" name="check1" value="1"/>one<br />
<input type="checkbox" name="check2" value="2"/>two<br />
<input type="checkbox" name="check3" value="3"/>three<br />

<input type="submit" id="submit_button" name="sub" value="Show"/>

</form>
        <script>

        $('#submit_button').click(function(){   
        event.preventDefault();         
            if ($('.check1').is(':checked')) {

            $.ajax({
                url: 'PHP.php',
                type: 'POST',
                data: json,
                success: function(data){

                    $("#results").empty();
                    $("#results").append(data); 


                    console.log(data);
                }

            });

            }

            if ($('.check2').is(':checked')) {

            $.ajax({
                url: 'PHP2.php',
                type: 'POST',
                data: json,
                success: function(data){

                    $("#results2").empty();
                    $("#results2").append(data); 


                    console.log(data);
                }

            });

            }

        });

        </script>

</div>

<div id="results">
</div>

<div id="results2">
</div>

Note: the PHP.php and PHP2.php file which I am loading I am only echoing JSON at the moment, until I can get this working, but the console is not logging any data at all.

I am having a bit of trouble in getting this to work. I was hoping for some help, or some guidance on the best way to do this?

Thanks in advance.

Change name of checkboxes it should be same and apply class to each checkbox else you can't get it $('.check1').is(':checked') — Narendrasingh Sisodia
– Narendrasingh Sisodia, Commented Mar 23, 2015 at 11:18
Ah, @NarendraSisodia, that worked, I hadn't made use of class , Thank you! — PShickle
– PShickle, Commented Mar 23, 2015 at 11:22
Actually...that always returns the ajax success, even if the checkbox is not checked. — PShickle
– PShickle, Commented Mar 23, 2015 at 11:26
change your function(){ to function(event){ in first line after <script> — Matej Žvan
– Matej Žvan, Commented Mar 23, 2015 at 11:29

Sunil Kumar · Accepted Answer · 2015-03-23 11:25:27Z

I think you are looking something like this:

Form:

   <form action="PHP.php" id="test" method="post">
        <input type="checkbox" name="check1" value="1" />one
        <br />
        <input type="checkbox" name="check2" value="2" />two
        <br />
        <input type="checkbox" name="check3" value="3" />three
        <br />
        <input type="submit" id="submit_button" name="sub" value="Show" />
      </form>

Script:

  <script>
    (function($){
      $('#test').on('submit', function(e){
        e.preventDefault();
        var $checkbox = $(this).find('input[type=checkbox]');
        $checkbox.each(function(e){
          if($(this).is(':checked') ){
            var $name = $(this).attr("name");
            switch($name){
              case "check1": 
                // Do some AJAX operation
                break;
             case "check2": 
                // Do some AJAX operation
                break;
             case "check3": 
            // Do some AJAX operation
             break;
            }
          }
        });
        return false;
      });

    }(jQuery));
  </script>

Sagar Devkota · Accepted Answer · 2015-03-23 11:24:11Z

0

You have an error in HTML, add class in each checkbox

<input type="checkbox" class="check1" name="check1" value="1"/>one<br />
<input type="checkbox" class="check2" name="check2" value="2"/>two<br />
<input type="checkbox" class="check3" name="check3" value="3"/>three<br />

and in ajax part enclose json by single quote:

dataType:'json'

edited Mar 23, 2015 at 11:24

answered Mar 23, 2015 at 11:15

Sagar Devkota

1,1928 silver badges13 bronze badges

Comments

Vivek Singh · Accepted Answer · 2015-03-23 11:24:14Z

try it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form action="PHP.php" id="test" method="post">

<input type="checkbox" id="check1" value="1"/>one<br />
<input type="checkbox" id="check2" value="2"/>two<br />
<input type="checkbox" id="check3" value="3"/>three<br />

<input type="button" id="submit_button" name="sub" value="Show"/>

</form>
        <script>

        $('#submit_button').click(function(){   
        //event.preventDefault(e);         
            if ($('#check1').is(':checked')) {

            $.ajax({
                url: 'PHP.php',
                type: 'POST',
                dataType: "json",
                success: function(data){

                    $("#results").empty();
                    $("#results").append(data); 


                    console.log(data);
                }

            });

            }

            else if ($('#check2').is(':checked')) {

            $.ajax({
                url: 'PHP2.php',
                type: 'POST',
                dataType: "json",
                success: function(data){

                    $("#results2").empty();
                    $("#results2").append(data); 


                    console.log(data);
                }

            });

            }

        });

        </script>

</div>

<div id="results">
</div>

<div id="results2">
</div>

Collectives™ on Stack Overflow

jQuery to check if checkbox is checked on button click, then do multiple AJAX requests to PHP

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related