Обновить URL перенаправления формы в зависимости от значения переключателя с помощью JS

Question

Я пытаюсь обновить URL перенаправления формы в зависимости от значения выбранного переключателя формы.

Например,

Если значение кнопки = 1, перейдите на mywebsite.com/page-a

или

Если значение кнопки = 2, перейдите на mywebsite.com/page-b

Вы найдете здесь код, который я сделал до сих пор (jsfiddle ниже):

<label class="labl">
<input type="radio" name="quantite" value="1" checked="checked"/>
<div>
<span class="box"><b>First choice</b></span><br>
</div>
</label>
<label class="labl">
<input type="radio" name="quantite" value="2" />
<div>
<span class="box"><b>Second choice</b></span><br>
</div>
</label>
<label class="labl">
<input type="radio" name="quantite" value="3" />
<div>
<span class="box"><b>Third choice</b></span><br>
</div>
</label>

И JS

$('!selector!').parents("form").attr("action","https://www.mywebsite.com");

$('!selector!').on('change', function(){
var newValue = parseInt($(this).val());
var $form = $(this).parents("form");

switch(newValue){
case 1:
$form.attr("action", "https://www.mywebsite.com/page-a/");
break;
case 2:
$form.attr("action", "https://www.mywebsite.com/page-b/");
break;
case 3:
$form.attr("action", "https://www.mywebsite.com/page-c/");
break;
}
});

https://jsfiddle.net/pcL8vfvn/

Но ничего не происходит, когда я меняю выбранную кнопку и отправляю форму.

Я думаю, что в коде JS есть изъян.

Спасибо за помощь!

Answer 1

Я думаю, что я нашел самое простое решение, добавив в качестве атрибута каждый переключатель:

onclick="document.getElementById('my-form').action='https://www.mywebsite.com/page-x';"

Работает как шарм!

Answer 2

Я не свободно владею jQuery, но в нем записываются правильные значения:

$('input[name="quantite"]').on('change', function()
 {
  var newValue = parseInt($(this).val());
  console.log(JSON.stringify(newValue));
 });

Добавляет функцию к событию onchange каждой радиокнопки.