only send specific objects to form with jquery

Question

This question is closely related to Jquery - Send only some value from a form . I have a form:

<form accept-charset="UTF-8" action="/filter" data-remote="true" method="get">
  <div>
  <div>
    <h2 class="sort">Sort</h2>
    <select class="checkable" id="sort" name="sort">
         <option value='v'>Rank</option>
         <option value='n'>Alphabetical</option>
    </select>
  </div>
  <div>
    <h2 class="tag">Categories</h2>
    <ul>
      <li>
        <input name="category[a]" type="hidden" value="0" />
        <input class="checkable" id="category_a" name="category[a]" type="checkbox" value="1" />
        <span>a</span>
      </li>
      <li>
        <input name="category[adfsadf  fasdf]" type="hidden" value="0" />
        <input class="checkable" id="category_adfsadf  fasdf" name="category[adfsadf  fasdf]" type="checkbox" value="1" />
        <span>adfsadf  fasdf</span>
      </li>
      <li>
        <input name="category[another]" type="hidden" value="0" />
        <input class="checkable" id="category_another" name="category[another]" type="checkbox" value="1" />
        <span>another</span>
      </li>
      <li>
        <input name="category[another tag]" type="hidden" value="0" />
        <input class="checkable" id="category_another tag" name="category[another tag]" type="checkbox" value="1" />
        <span>another tag</span>
      </li>
    </ul>
  </div>
</form>

I only want to send via ajax the categories that are checked. This is what I currently have to send everything from the form:

 $('.checkable').live('change',
   function() {
     $(this).parents('form:first').submit();
 });

This works great, but when the number of categories is really high, the request is unnecessarily long. I don't know how to go about writing the submit function for this. Or maybe another approach is better? Thanks in advance!

----- solution -----

Used ajax route instead

$('.checkable').live('change',
function() {

var dataString = 'sort='+ $('#sort').val();
$('input[type=checkbox]').each(function () {
    if($(this).is(":checked")) {
      dataString += '&'+$(this).prop('name')+'=1';
    }
});
alert
$.ajax({  
  type: "GET",  
  url: "/filter",  
  data: dataString,  
  success: function() {  
  }  
});

});

Every time somebody posts a jQuery/Javascript question with server-side code where there should be proper generated HTML I want to downvote it. Your server-side code isn't useful, the HTML it generates is! — Anthony Grist, Apr 18 '12 at 22:04
@AnthonyGrist: yes. I'm getting a bit...irritated by that too. I keep trying to formulate a [meta] feature-request to handle it, but...I can't think of a sensible way to phrase a request that could be implemented by the devs. Other than yet another prompt, alert, message... =( — David Thomas, Apr 18 '12 at 22:12
I'm a bit confused about this question, to be honest. Browsers don't post values for unchecked checkboxes, so I can't see why you'd need to implement not doing so yourself... — Anthony Grist, Apr 18 '12 at 22:16
@DavidThomas "It looks like you're writing a javascript question with server-side code. Would you like help?" — Mike Robinson, Apr 18 '12 at 22:18
@MikeRobinson: they could bring back the April fools' Unicorn! If only that wouldn't lead to inevitable loss of life, and sanity. — David Thomas, Apr 18 '12 at 22:20
@AnthonyGrist I don't get what confuses you. There is a form that is sent as a get request. When there are a lot of categories, it sends the serializes the request as a huge string... with all of the unchecked categories send as 0's. I want to remove all the 0s and only send the checked (1's) ones. — Marc, Apr 18 '12 at 22:22
@Marc Why are you sending form data using GET and not POST? Also, if you're just submitting the plain HTML form, what browser are you using that **isn't** ignoring unchecked checkboxes (since that's the default behaviour for all of the major ones)? — Anthony Grist, Apr 18 '12 at 22:24
I'm using the latest version of chrome. Here is the output (as you can see, all 0's are being sent): /filter?utf8=%E2%9C%93&sort=v&category%5Ba%5D=0&category%5Badfsadf++fasdf%5D=0&category%5Banother%5D=0&category%5Banother+tag%5D=0&category%5Basdf+asdpsss+s%5D=0&category%5Bdfsdfood%5D=0&category%5Binternational+asd%5D=0&category%5Bmake+a+lot+of+tags%5D=0&category%5Bpeace+and+security%5D=0&category%5Btest234%5D=0 — Marc, Apr 18 '12 at 22:25
@Marc Having re-read the question, you mentioned sending via AJAX: Where's the code that does that? — Anthony Grist, Apr 18 '12 at 22:25
@AnthonyGrist data-remote="true" does this automatically in rails. — Marc, Apr 18 '12 at 22:28
I should just remove everything and just ask how one would write a submit function that does this. Don't worry about how the data is sent. The javascript question remains. — Marc, Apr 18 '12 at 22:32

score 1 · Accepted Answer · answered Apr 18 '12 at 22:18

1

Check out this link, instead of submitting the entire form just do an ajax post and only include the form elements that you want sent. http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Here is a sample post, you could easily just use the checked selector to send only checked intputs

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
//alert (dataString);return false;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false;

answered Apr 18 '12 at 22:18

user1289347

2,397
1
13
16

There's also the `.serialize()` function, which can be called on a jQuery object containing a set of input elements (or the form itself) to generate such a parameter string. However, since the browser default behaviour is already to ignore unchecked checkboxes, I'm not sure why this question is needed. – Anthony Grist Apr 18 '12 at 22:21
I thought he was trying to avoid extra input values, like the hidden fields, etc. and only get the checkboxes. – user1289347 Apr 18 '12 at 22:23
Possibly! If that is the case there's a lot of information missing from the question, such as the code he already has that's attempting to do that. – Anthony Grist Apr 18 '12 at 22:27
@user1289347 Thanks. Used the ajax route instead! – Marc Apr 18 '12 at 23:08

only send specific objects to form with jquery

1 Answers1