CODEWITHSUNDEEP
jquery
Rails beginner
Rails beginner

Reputation: 14504

Jquery help creating ajax request

I am trying to create an ajax request where the URL is the form on submit.

My Jquery:

    $(document).ready(function() {
$('.menuitem input:checkbox').change(function(){
        $.ajax({
          type:'get',
          url:form.submit();,
          data:form.serialize(),
          success:function(msg){
            $('#formcontent').html(msg);
          }
        })
    })
    $('input:submit').hide();

    $('.menuitem input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.hidediv').removeClass("hidediv");
    } 
});
});

Upvotes: 0

Views: 68

Answers (3)

PeeHaa
PeeHaa

Reputation: 72662

fixed code

$(document).ready(function() {
    $('.menuitem input:checkbox').change(function(){
        var form = $(this).parents('form');
        $.ajax({
          type:'get',
          url:form.attr('action'),
          data:form.serialize(),
          success:function(msg){
            $('#formcontent').html(msg);
          }
        });

    $('input[type="submit"]').hide();

    $('.menuitem input[type="checkbox"]').change(function() {
        if($(this).is(':checked')) {
            $('div.hidediv').addClass('someclass'); // not needed it there is another way of identifying the div later to add to hidediv class again.
            $('div.hidediv').removeClass('hidediv');
        } else {
            $('div.someclass').addClass('hidediv'); 
        }
    });
});

Explanation:

  1. What is form it isn't defined anywhere.
  2. If form is defined and you do form.submit(); you would submit the form (not what you want.)
  3. You also missing a semicolon after the ajax function.
  4. you also used the wrong way of getting inputs of a specific type

Upvotes: 1

John Kalberer
John Kalberer

Reputation: 5790

The line where you have:

url: form.submit;,

should be:

url: form.attr('action'),

So you end up with:

    $.ajax({
      type:'get',
      url:form.attr('action'),
      data:form.serialize(),
      success:function(msg){
        $('#formcontent').html(msg);
      }
    })

You may also want to change the "type" value to form.attr('method') for consistency.

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

$('.menuitem input:checkbox').change(function() {
    // fetch the form containing the checkbox whose value
    // has just changed so that we could infer its action and method
    var form = $(this).closest('form');
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(msg) {
            $('#formcontent').html(msg);
        }
    });
});

Upvotes: 1

Related Questions