Generate Query String with jQuery from simple fields?

Question

I've got some REALLY simple fields, like a checkbox for yes/no's and some text inputs for width/height etc.

I'd like to have users check a box for a feature and define their sizes, so if they check <input type="checkbox" id="header" name="header" value="true" /> then I want to add &show_header=true to the query string.

I've got a very basic fiddle set up, but I can't seem to get it to work properly. Like, if you check the box, then fill in the value, but uncheck the box, it starts to repeat things and I end up with &show_header=true&show_header=true&show_header=true&show_header=true&show_header=true

just give the input the name show_header and use serialize()... api.jquery.com/serialize — ahren
– ahren, Commented Nov 30, 2012 at 22:48

VisioN · Accepted Answer · 2012-11-30 22:50:00Z

2

You may simply use serialize() method:

function displayVals() {
    $("code").html(function(i, val) {
        var query = $("input").serialize();
        return "http://...?method=review_box&amp;" + query;
    });
}

DEMO: http://jsfiddle.net/AYQyB/4/

answered Nov 30, 2012 at 22:50

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Haas · Accepted Answer · 2012-11-30 22:53:00Z

It looks like you're trying to reinvent jQuery's .serialize() function.

<form>
    <div><input type="text" name="a" value="1" id="a" /></div>
    <div><input type="text" name="b" value="2" id="b" /></div>
    <div><input type="hidden" name="c" value="3" id="c" /></div>
    <div>
        <textarea name="d" rows="8" cols="40">4</textarea>
    </div>
    <div><select name="e">
        <option value="5" selected="selected">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select></div>
    <div>
        <input type="checkbox" name="f" value="8" id="f" />
    </div>
    <div>
        <input type="submit" name="g" value="Submit" id="g" />
    </div>
</form>

jQuery:

$('form').submit(function() {
    alert($(this).serialize());
    return false;
});

Produces:

a=1&b=2&c=3&d=4&e=5

wonea · Accepted Answer · 2016-09-27 09:41:46Z

0

Maybe so?

<input class="my-vars" type="checkbox" name="rbshowheader" id="rbshowheader" value="true" />
<input class="my-vars" type="text" name="rbwidth" id="rbwidth_id" value="" />
<pre><code>http://yoursite.whirlocal.com?method=review_box</code><span id="query"></span></pre>

and JavaScript

$(function() {
  $('.my-vars').change( function() {
     var sQuery = $('.my-vars').serialize();
     $('#query').html('&'+sQuery);
   });
});

edited Sep 27, 2016 at 9:41

wonea

4,99917 gold badges91 silver badges144 bronze badges

answered Nov 30, 2012 at 23:08

pawella

338 bronze badges

Collectives™ on Stack Overflow

Generate Query String with jQuery from simple fields?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related