Javascript -- go to URL based on radion button sets selection

[Annie Herman]

Hello, I'd trying to write a script that would on clicking submit go to various URLs based on selected radio buttons. I have three sets of radio buttons, and depending on the combination (one button from every set), there will be a different .html page to go on submit.
Is it possible?
I an new to javascript and appreciate any help/directions!

[Dormilich]

nope, won’t work this way.

if you submit a form, it will always go to the URL given in the form’s action attribute (which is exactly one). after that, you have left the page and JS cannot work on that same page.

However, if you use AJAX, you can send form data to as many URLs as you want, since you don’t leave the page. the "downside" is that you have to collect and pass the data to send yourself.

[Annie Herman]

Thanks for your answer. I was hoping to use something similar to this script:

function checkInput(){
    var val = document.getElementById('myText').value;
    var myForm = document.getElementById('myForm');
    if(val=="valueX")
    myForm.action="page1.html";
            else
                    myForm.action="page2.html";
            }

But I'd need to validate all the radio buttons first and based on the values select the appropriate html page. That's where I get stuck.

[Dormilich]

if you want to change the action URL based on a selection, that’s something different.

I’m not sure how the 3 different lists come into play, but for a single list that would be easy. all you need is make a radio button change the action URL when being clicked.

// not taking the page layout into account
<form action="">
  <input type="radio" name="targeturl" value="page1.html" id="url1">
  <label for="url1">Choice 1</label>
 
  <input type="radio" name="targeturl" value="page2.html" id="url2">
  <label for="url2">Choice 2</label>
 
  <input type="radio" name="targeturl" value="page3.html" id="url3">
  <label for="url3">Choice 3</label>
 
  <input type="radio" name="targeturl" value="page4.html" id="url4">
  <label for="url4">Choice 4</label>
</form>

// the event handler
function changeAction()
{
    this.form.action = this.value;
}
 
// assign the handlers
var i, radio = document.getElementsByName("targeturl");
for (i = radio.length; i--;) {
    radio[i].onclick = changeAction;
}