Metasearch - Help with Jquery ajax request when checkbox is pressed

Question

I want to make a Jquery ajax request when a checkbox pressed either true or false.

My form:

<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input name="utf8" value="✓" type="hidden"></div>        
    <div class="menuitem">
    <label for="search_company1">company1</label>
    <input name="search[company1_is_true]" value="0" type="hidden"><input id="search_company1_is_true" name="search[company1_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company2">company2</label>
    <input name="search[company2_is_true]" value="0" type="hidden"><input id="search_company2_is_true" name="search[company2_is_true]" value="1" type="checkbox">
    </div>
    <div class="menuitem">
    <label for="search_company3">company3</label>
    <input name="search[company3_is_true]" value="0" type="hidden"><input id="search_company3_is_true" name="search[company3_is_true]" value="1" type="checkbox">
    </div>
<input id="search_submit" name="commit" value="Create Search" type="submit">
</form>

Do you want the call be made on submit or when a checkbox is checked? — Rick de Graaf, Aug 01 '11 at 12:06
You should probably put where exactly you are having trouble with the problem. Is it firing a function when you click the checkbox? Is it making an ajax query? Is it processing whatever is returned from that query? Do you not know how javascript works at all? It is good practice to put into a question what you have tried so far rather than asking a very general question. — Chris, Aug 01 '11 at 12:06

Pehmolelu · Accepted Answer · 2011-08-01T13:02:15.323

2

This launches custom doAjaxRequest function after any of the checkboxes in menuitem class are changed to either true or false.

$('.menuitem input:checkbox').change(function(){
  doAjaxRequest();
})

Answer to first comment question:

$('.menuitem input:checkbox').change(function(){
      $('form').submit();
})

Though you probably want to define some id to your form and use it instead of just form selector: $('#formId')

EDIT I just made jsfiddle of your code in question and my second answer and it seems to work: http://jsfiddle.net/dUPmg/

edited Aug 01 '11 at 13:02

answered Aug 01 '11 at 12:06

Pehmolelu

3,534
2
26
31

How to press the submit button when the input checkbox is pressed? – Rails beginner Aug 01 '11 at 12:10
@rails, refer to jAndys 2nd comment in his answer – Pehmolelu Aug 01 '11 at 12:36
@rails You may have some other errors in your page. See my edit with the jsfiddle. It works. – Pehmolelu Aug 01 '11 at 13:02
It works I moved the Jquery from an external javascript file to my head section of my layout file. It seems that the problem where that the javascript was in a external file' – Rails beginner Aug 01 '11 at 13:10

jAndy · Answer 2 · 2011-08-01T12:20:05.093

1

Should be a fairly trivial task:

$('form input:checkbox').change(function() { 
    // $.ajax({});
    $('form').submit();
});

That would bind a change-eventhandler to each checkbox element. When the number of those elements increases, you should go for a delegated change-event instead.

$('form').delegate('input:checkbox', 'change', function( e ) {
    switch( e.id ) { 
        case 'search_company1_is_true':
             $.ajax({});
             break;
        case 'search_company2_is_true':
             $.ajax({});
             break;
        // and so forth
    }
});

edited Aug 01 '11 at 12:20

answered Aug 01 '11 at 12:07

jAndy

231,737
57
305
359

Instead of defineing a ajax call for each checkboxes is it not possiable to press the submit button insted when the checkbox is changed – Rails beginner Aug 01 '11 at 12:13
@Railsbeginner: sure it is. You would have to call `.submit()` to execute that. I added that in the first example. However, you should be more precise than I am. Just to query for `'form'` would trigger the submit for all forms on your entire page. – jAndy Aug 01 '11 at 12:21
@Railsbeginner: well, your `action` attribute is empty anyway. There can't be a request even if you click that submit button (if there is one) manually. – jAndy Aug 01 '11 at 12:32
When a set a checkbox to true and manually press the submit button a request is made – Rails beginner Aug 01 '11 at 12:37
@Railsbeginner: ok I probably was wrong about that. But what do you expect to get? A request is made, but it basically just reloads the same site. I guess jQuery will avoid the execution because there is no meaninfull URI in that action attribute. – jAndy Aug 01 '11 at 12:43
I would expect the Jquery to submit the form and reload the page – Rails beginner Aug 01 '11 at 12:44
@Railsbeginner: submit the form to where? Space? :-) You need to tell the browser, where those information should get send. uri/scriptname. – jAndy Aug 01 '11 at 13:21

score 0 · Answer 3 · answered Aug 01 '11 at 12:07

0

$('form input:checkbox').bind('click change', function(){
    $.ajax({
      url: "/test.html",
      success: function(){
          $(this).addClass("done");
      }
    });
});

answered Aug 01 '11 at 12:07

Talha Ahmed Khan

15,043
10
42
49

The input checkbox wasn't direct child. – Pehmolelu Aug 01 '11 at 12:10

Metasearch - Help with Jquery ajax request when checkbox is pressed

3 Answers3