Изменить действие формы на основе нескольких параметров <select>с помощью jQuery

Question

То, что я пытаюсь сделать, это изменить действие формы на основе выбранных параметров из нескольких вариантов.В этом случае два выбора, но одна и та же идея.Я пытаюсь направить пользователя на конкретный URL при отправке.Пока что он направляет пользователя, но возвращает только «женщину» с выбранными параметрами «возраста».Возрастная часть верна, но она не будет различать «мужской» или «женский» варианты.Таким образом, я получаю URL в ответ, например: http: //domain.com/somepage.php#female_(age selection)

Я нуб с javascript, но я часами пытался заставить эту работувсе еще пытаюсь.Я получил некоторую помощь от: javascript - изменить действие формы на основе выбора? , но все еще не решен.Любая помощь очень ценится!

разметка:

<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

Не проверено, но что-то вроде этого может быть:

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

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

Answer 2

Нечто подобное может работать на вас ...

$("#age, #gender").change(function() {
    switch();
});

function switch(){

   // Build out this function with the rest of the logic
   // that you are checking for

   if($(form #age).val=='teen' && $(form #gender).val=='male'){
      $("form").attr("action", "somepage.php#male-teen")
   }
}

Answer 3

Присвойте идентификатор вашей форме, а затем

$('#formid').submit(function(){
  var gender = $("#gender").val();
  var age = $("#age").val();
  $("#formid").attr('action','somepage.php#'+gender+'-'+age);
});

или даже лучше

$('#formid').submit(function(){
  var gender = $("#gender").val();
  var age = $("#age").val();
  $("#formid").attr('action','somepage.php#'+gender+'-'+age);
  if(gender == '' or age == ''){
    alert('Please select a gender and age');
    return false;
  }
});