Using Jquery Selectors (checkbox) execute onClick

Question

function sendValues() {
var str = $("#ryan_m").serialize();
var response = $('input[name=brand[]]:checked').val();
$.ajax({
    url: "/trying1.php?avoidcache=' + myTimestamp();",
    data: {str}
    cache: false
});
}

<form action="trying1.php?b_id=$brand_id" method="get"/></td>
     <input type="checkbox" name="brand[]" value="$brand_id"/>
         <input type="submit" value="Compare" id="ryan_m" method="get" />
            </form>

I am trying to use this Ajax request to execute upon checking the available check boxes. Currently, This script will do exactly what I want, but I have to hit submit for it to execute.

My question:

Is there a simple way that I can execute the ajax upon clicking the check box, without hitting submit?

Your problem is solved. Please select one working answer as a solution. — buschtoens
– buschtoens, Commented Apr 3, 2011 at 20:41

Sameer Parwani · Accepted Answer · 2011-04-03 20:34:28Z

1

$("input[type=checkbox]").change(function() {
  $("form").submit();
});

edited Apr 3, 2011 at 20:34

answered Apr 3, 2011 at 20:25

Sameer Parwani

3191 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

buschtoens Over a year ago

What is target? ;) And what if the checkbox is (un)ticked by keyboard?

Sameer Parwani Over a year ago

target was meant to be filled in by the user. He didn't add a class to his checkboxes so I just put target. Anyway RPM I edited the code to use input with type checkbox. You can try that. Also .click might need to be .change.

Steve · Accepted Answer · 2011-04-03 20:31:24Z

You can use jQuery .submit() to submit the form on click.

<form action="trying1.php?b_id=$brand_id" id="myForm" method="get"/></td>
    <input type="checkbox" name="brand[]" class="myCheckbox" value="$brand_id"/>
    <input type="submit" value="Compare" id="ryan_m" method="get" />
</form>

Give you form an ID and give the checkbox a class or if you want an ID if there's only one. Then in your jquery.

function sendValues() {
    var str = $("#ryan_m").serialize();
    var response = $('input[name=brand[]]:checked').val();
    $.ajax({
        url: "/trying1.php?avoidcache=' + myTimestamp();",
        data: {str}
        cache: false
    });
 }

$('.myCheckbox').change(function(){
    $('#myForm').submit(function(){
        sendValues();
        return false; 
    });
});

I haven't tested out the code, but thats the idea you going for.

This does not work, In fact, It does not call the Page at all without clicking the submit button, which is what I do not want to do.

Peeter · Accepted Answer · 2011-04-03 20:27:23Z

0

$(document).ready(function() {
    $('[name="brand[]"]').change(function() {
        sendValues();  
    });
});

Demo here: http://jsfiddle.net/JtBe2/

answered Apr 3, 2011 at 20:27

Peeter

9,3825 gold badges39 silver badges53 bronze badges

1 Comment

buschtoens Over a year ago

You're only detecting clicks. BUt no changes via keyboard or other scripts.

buschtoens · Accepted Answer · 2011-04-03 20:39:40Z

0

$("input[name=brand[]]").change(function() {
    sendValues();
    alert("Data is sent."); // Remove this - Just for testing purpose
});

jQuery Change Event. This detects all kinds of changes to all kinds of <input>. <select> and <textarea>.

edited Apr 3, 2011 at 20:39

answered Apr 3, 2011 at 20:26

buschtoens

8,6419 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

Using Jquery Selectors (checkbox) execute onClick

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Related