Question

What I’m trying to do is to change the form action based on selected options from multiple selections. In this case, two selections but same idea. I’m trying to direct the user to a specific url on submit. So far, it does direct the user but it only returns a “female” with whatever “age” options are selected. The age part is correct but it won’t differentiate between “male” or “female” options. So I get a url in return like: http: //domain.com/somepage.php#female_(age selection)

I’m a noob with javascript but Ive been trying for hours to make this work and still trying. I did get some help from: javascript – change form action based on selection? but still unsolved. Any help is much appreciated!

markup:

<form action="">
    <fieldset>
        <select id="gender">
            <option value="male">male</option>
            <option value="female">female</option>
        </select>
        <select id="age">
            <option value="teen">teen</option>
            <option value="adult">adult</option>
        </select>
    </fieldset>
    <input type="submit" value="Submit">
</form>

jQuery:

$("#gender").change(function() {
    var action = $(this).val() == "male";
        $("#age").change(function() {
    if ($(this).val() == "teen"){
        $("form").attr("action", "somepage.php#male_teen")};
    if ($(this).val() == "adult"){
        $("form").attr("action", "somepage.php#male-adult")};
    });
    var action = $(this).val() == "female";
        $("#age").change(function() {
    if ($(this).val() == "teen"){
        $("form").attr("action", "somepage.php#female-teen")};
    if ($(this).val() == "adult"){
        $("form").attr("action", "somepage.php#female-adult")};
    }); 
});

Answer 1

Not tested, but something like this maybe:

$("#gender, #age").on('change', function() {
    var gender = $("#gender").val(),
        age = $("#age").val(),
        site = "somepage.php#"+gender+"-"+age; //inconsistent use of -/_

        $("form").attr("action", site)};
    }); 
});