Append select data to URL using jQuery

Question

I am having problems trying to add a parameter to a URL using jQuery based off of the value of a Select element. Here is my code so far:

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        $(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>

        <input type="submit" class="hidden"/>
    </fieldset>
</form>

For some reason no matter which option I select, the URL will become process.php?state=Select. What I need it to do is become process.php?state=TX or whatever option the user selects.

Any help is greatly appreciated!

subhaze · Accepted Answer · 2012-11-29 01:33:53Z

You need to update the value of the hidden input:

$(document).ready(function () {
    $("#sel-1").change(function() {
        $('[name=state]').val($('#sel-1').val()); 
        $(this).closest("form").submit();
});

example here: http://jsfiddle.net/wKvLm/1/show/

Also... with your current code there is no need to create that input via JS. you could defined it within your HTML like this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#sel-1").change(function() {
            $('[name=state]').val($('#sel-1').val());        
            $(this).closest("form").submit();
        });
    });
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="hidden" name="state" value="Select"/>
        <input type="submit" class="hidden"/>
    </fieldset>
</form>

working example here: http://jsfiddle.net/wKvLm/2/show/

KingKongFrog · Accepted Answer · 2012-11-29 01:33:50Z

0

This is occurring because it gets the value on page load.

Try:

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        if ($("#sel-1").val() != "Select") {
            var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
            $('.start-form').append($(input));
            $(this).closest("form").submit();
        }
    });
});
</script>

edited Nov 29, 2012 at 1:33

answered Nov 29, 2012 at 1:25

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

4 Comments

three3 Over a year ago

Thanks for the response. Is there a way to get the value before the page loads?

KingKongFrog Over a year ago

You want it after they choose an option.

three3 Over a year ago

Awesome, this worked for. Is there a way to check to see if the value is "Select" and if it is, not to submit the form?

KingKongFrog Over a year ago

Updated the example above, although I don't believe the scenarion can occur since the page submits if it's any other value.

code-red · Accepted Answer · 2012-11-29 01:28:28Z

0

try this.

    <script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
        $(this).closest("form").submit();
});

});
</script>

answered Nov 29, 2012 at 1:28

code-red

3063 silver badges12 bronze badges

1 Comment

three3 Over a year ago

Awesome, this worked for. Is there a way to check to see if the value is "Select" and if it is, not to submit the form?

Techie · Accepted Answer · 2012-11-29 01:28:55Z

0

<script type="text/javascript">
$(document).ready(function () {

    $("#sel-1").change(function() {

      var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
        $('.start-form').append($(input));
        $(this).closest("form").submit();
});


});
</script>

You should set variable data in the on change event.

What we are doing here is adding the a new input hidden field with the drop the value when the drop-down is changed. Then appending the input field and submit the form.

answered Nov 29, 2012 at 1:28

Techie

45.2k45 gold badges164 silver badges248 bronze badges

Comments

Akhil Sekharan · Accepted Answer · 2012-11-29 01:33:00Z

0

A simple way will be to use jQuery's serialize method:

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
    </fieldset>
</form>

answered Nov 29, 2012 at 1:33

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Append select data to URL using jQuery

5 Answers 5

Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related