trying to pass a jquery variable into a query string

Question

I have two radio buttons for which I want to get the checked value and then pass to a url query string:

here is the html

<h3>Please select an audience</h3>
  <p><input class="age" type="radio" name="ageLimit" value="allAge"/> All ages </p>
  <p><input class="age" type="radio" name="ageLimit" value="mature"/> Mature</p>

This is the js:

when I use this, the database pulls [object, Object]

url : 'upload.php?aud='+$('input[name="ageLimit"]:checked', '#myForm').val($('input:radio[name="ageLimit"]:checked', '#myForm')),

when I use this it only pulls the first variable

url : 'upload.php?aud='+$('input[name="ageLimit"]:checked', '#myForm').val(),

How do I get the checked variable to pass into the query string? I have looked at several similar questions on SO, but nothing treats a query string

See the documentation for [`val()`](http://api.jquery.com/val/#val2). It expects a string as an argument not a jquery object. — Chandranshu, Nov 19 '13 at 20:58
the first one that pulls [object, Object] .. you are **setting** the value .. in the second instance that pulls the first variable, you are **getting** the value.. the jQuery **val()** method can be used to **set** and **get** a value - http://api.jquery.com/val/#val2 - — Jonathan Marzullo, Nov 19 '13 at 21:00

user229044 · Answer 1 · 2013-11-19T21:04:01.310

4

Use jQuery's serialize to zip your form up into a query string for you:

$('#myForm').serialize()

or

$('input[name="ageLimit"]:checked', '#myForm').serialize()

When you convert a jQuery object to a string, that's what you get, [Object object]. Your first example sets the value of your form element, and then returns the jQuery object so that you can chain additional methods on it.

Your second attempt, with val(), returns the value you're after. If you want to get several values, you'll have to select the elements, and then map them to their value, and then join the resulting array. But you shouldn't do this. You should use serialize to do it for you.

edited Nov 19 '13 at 21:04

answered Nov 19 '13 at 20:58

user229044

232,980
40
330
338

I'm sure this is an awesome solution, but I am total c#&p at jquery. Where do I put this? currently I'm getting `undefined` – artsyL Nov 19 '13 at 21:08
Right where your existing code is. `url: 'upload.php?aud=' + $('input...','#myForm').serialize()`. – user229044 Nov 19 '13 at 21:19
Now I'm getting an empty string from `url : 'upload.php?aud='+$('input[name="ageLimit"]:checked', '#myForm').serialize(),` Do I still need `val()` in there anywhere? Thanks for your patience. – artsyL Nov 19 '13 at 21:26
1

No, but if your options aren't checked or are disabled, they serialize to `""`. You may also not be selecting the elements you think you are. – user229044 Nov 19 '13 at 21:31
I just checked to see if options were disabled with this and they are not. Can you think of any other reason serialize() might not work here? `if (!$('.age:radio').is(':disabled')){ alert('The radio group is not disabled.'); } if ($('.age:radio').is(':disabled')){ alert('The radio group is disabled.'); }` – artsyL Nov 19 '13 at 22:18

score 1 · Answer 2 · answered Nov 19 '13 at 21:22

Snaps to serialize above. I personally enjoy ajaxForm plugin (http://malsup.com/jquery/form/).

If your goal is to get the selected radio value into a url then play around with it on jsfiddle (link below).

http://jsfiddle.net/NQ6wH/

<h3>Please select an audience</h3>
<form>
  <p><input class="age" type="radio" name="ageLimit" value="allAge"/> All ages </p>
  <p><input class="age" type="radio" name="ageLimit" value="mature"/> Mature</p>
</form>
<button id="testMe">Test Me</button>

$('#testMe').click(function(e){
    e.preventDefault();
    var url = 'upload.php?aud=' + $('input[name=ageLimit]:checked').val();
    alert(url);
});

the test button says I'm getting the correct value, but when I do this I get an undefined value. Why might that be? `url : 'upload.php?aud=' + $('input[name=ageLimit]:checked').val(),` — artsyL, Nov 19 '13 at 22:07

score 0 · Answer 3 · edited May 23 '17 at 10:31

It turns out my problem was somewhere entirely else and the uploader needed to evaluate/pass the radio button. Gahhhhh. Thanks for all the help! –

here's the link: Why am I getting "undefined" passed to the db? jquery php plupload

var uploader = $('#uploader').plupload('getUploader');

uploader.bind('BeforeUpload',function(upldr,file){
upldr.settings.url = 'upload.php?aud=' + $('input[name="ageLimit"]:checked', '#myForm').val();
// here some runtimes might need a upldr.refresh(); (Though I'm not sure, I guess I remember Flash would.)
}
);

trying to pass a jquery variable into a query string

3 Answers3