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

0

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.

answered Apr 3, 2011 at 20:31

Steve

1,1057 silver badges20 bronze badges

2 Comments

buschtoens Over a year ago

Why firing unnecessary events?

Ryan Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related