HTML/JS: Using Radio Inputs to Change a Form’s Action

Brackets LogoHave you ever wanted a selection, via radio inputs, to change the outcome of a submit button’s action?

For a simple solution, you may have come to the right place.

Amidst revisions to a web project at my job, I found myself needing to answer the above question. I had to demonstrate a relatively simple user-experience requirement: provide a list of radio inputs that would control the user’s destination once they hit a contextual “submit” button. Fortunately, one of our lead web developers walked me through an incredibly simple inline javascript solution. It worked on the first try, and it’s so simple that I felt compelled to share it.


If you’re feeling adventurous, I’ve zipped up a folder directory at the bottom of this post, which has an example site to peruse and use as a template.

For some initial context, here’s a live demo of what we’ll be recreating. There’s more intentional formatting and CSS in the live demo, but I wanted to strip the instructions down below to the bare essentials.

Javascript is involved here, but there’s so little of it that it didn’t feel cumbersome to just write inline. Building the code and referencing it into its own separate .js file is ideal, but a separate file for two lines of code felt a bit convoluted for this example.


1. Getting Started

First make a few pages: your index.html, and at least two other pages named “page1.html” and “page2.html” respectively for this example. Place them all in your root directory (we’ll need these so your button has two different places to take the user).

In your index page, build a form with some inputs — two radio inputs and a submit input. The following code should go between your <body></body> tags, like this:

<body>

<form>
<fieldset>
<input type="radio" name="input" />
</fieldset>
<fieldset>
<input type="radio" name="input" />
</fieldset>
<fieldset>
<input type="submit"/>
</fieldset>
</form>

</body>

2. Identify Elements

Next is identifying your <form> so your inline javascript will know what to target — in this case we’re giving it the ID, “radio-submit”:

<form id="radio-submit">

3. Write Some Javascript

Finally, we need to write some javascript inline with the HTML to make its various elements talk to one another. Within your <input type=”radio”> elements, add this onclick event:


<input type="radio" name="input" onclick="document.getElementById('radio-submit').action='page1.html';"/>

*Make sure to add this to each radio input, changing the “.action” value of each so the submit button changes accordingly.

Tip: We can repeat the last two steps to produce other affects when a radio button is selected, such as changing the text within the submit button. This gives the user some feedback by letting them know their selection has been immediately recognized. To do this, append the inline javascript with an additional onclick event (and don’t forget to give your submit button an ID to match — in this case we’re using “button-submit”). It would look like this:

<input type="radio" name="input" onclick="document.getElementById('radio-submit').action='page1.html'; document.getElementById('button-submit').value='Go to Page 1';"/>

4. All The Code

With some <label>’s to help spell out what’s going on and define each input, we should wind up with the following code between your <body> tags:


<form id="radio-submit">

<fieldset>
<input type="radio" name="input" onclick="document.getElementById('radio-submit').action='page1.html'; document.getElementById('button-submit').value='Go to Page 1';"/><label>Take me to Page 1</label>
</fieldset>
<fieldset>
<input type="radio" name="input" onclick="document.getElementById('radio-submit').action='page2.html'; document.getElementById('button-submit').value='Go to Page 2';"/><label>Take me to Page 2</label>
</fieldset>
<fieldset>
<input type="submit" id="button-submit" value="Select Your Destination"/>
</fieldset>
</form>

Go ahead and load your index page, select one of your two options, and then hit the button. You should be taken to the page you selected! Go back and choose the other option to make sure everything is being routed correctly. If something isn’t working, check out the zipped directory below for local reference, or inspect the live demo in your browser to compare results.

Lastly, here’s a link to a zipped folder of the live demo incase you’d like to keep a copy for reference, or  just wanted to cut to the chase and dig into it at your own rate.

That’s all folks…unless you have comments and/or questions for me, which you’re more than welcome to share below. I hope this proves as helpful to you as it was to me.

Advertisements

2 thoughts on “HTML/JS: Using Radio Inputs to Change a Form’s Action

  1. hello Andrew, i read your posts related to photoshop and i have a question; if i want to insert several images (about 10 to 15 images) in one letter knowing the dimensions 30*45 cm how could this be done and thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s