Javascript: Generating a URL from two text inputs and a radio button input

Question

I have a form with two integer-only text boxes, one group of radio buttons, and a submit button. I would like it to take the values of these three inputs, and use them to generate a URL with three variables, like so:

http://domain.com/file.php?var1=&var2=&var3=

EDIT: To clarify, the output is on the page, not in the URL. I have created a php image that displays different things, based on the URL variables, and this image should be able to be used on other sites as the user sees fit.

EDIT2: My basic HTML:

<form>
<input type="text" id="var1" />
<br />
<input type="text" id="var2" />
<br />
<br />
<input type="radio" name="var3" value="1" />
<br />
<input type="radio" name="var3" value="2" />
<br />
<br />
<input type="button" id="URLGenerate" value="Generate" />
</form>

Answer 1

Well, here is how you can solve this problem:

1. Create the HTML

You need to assign a id to every text box (text boxes are defined as <input type="text"/> in html. Then you need the radio buttons which are defined as <input type="radio"/> . Make sure that all radio buttons have the same name attribute. Here is a short intro .

2. Get the values with Javascript

You can access every element by its id.

3. Change the current URL

After making the URL, you can change it by assigning to window.location in Javascript.

I guess if someone wants to make it simpler, they have to type the code for you! ;)

Update

Using the code that you added to the question, I created a javascript program that solves the problem:

//assign the button event handler
document.getElementById( 'URLGenerate' ).addEventListener( 'click', onGenerate );

//given the name of a radio button group, it returns the value of the selected radio button or null if none of them are selected
function getRadioButtonValue ( name ) {
  var allRadios = document.getElementsByName( name );
  for ( var i = 0; i < allRadios.length; i++ ) {
    if ( allRadios[i].checked ) {
      return allRadios[ i ].value;
    }
  }
  return null;//or any other value when nothing is selected
}

function onGenerate() {
  //the base url
  var url = 'http://domain.com/file.php';
  //an array of all the parameters
  var params = [];
  //get the value from the edit box with id=var1
  params.push( 'var1=' + document.getElementById( 'var1' ).value );
  //get the value from the edit box with id=var2
  params.push( 'var2=' + document.getElementById( 'var2' ).value );

  //get the value of the radio box
  params.push( 'var3=' + getRadioButtonValue( 'var3' ) );

  //join all the parameters together and add to the url
  url += '?' + params.join( '&' );
  alert( url );
}

Here is a JSBin to try it live and you can see the HTML/JS here: http://jsbin.com/itovat/3/edit