Javascript redirect to 1 of 3 URL's with Form

**crisp** · 04-24-2010, 07:21 PM

Hi

I need help...

I am working with a form redirect and js.

I am trying to redirect from a form to one of three URL's through a radio button selection.

Each radio has code to direct to the URL. An example is

<input type="radio" class="start_form_button_space" name="sorting" onsubmit="usePage(this, 'sorting');return checktheform();" value="form_1b.php">

. So there are three radio choices, but this is one set of radio button, and the value= in each radio is the defining factor to identify the redirect. For example:

value="form_1b.php"

value="form_2b.php"

value="index-2.php"

Javascript code to make the redirection is here:

Code:

<script type="text/javascript">
function usePage(frm,nm){
for (var i_tem = 0, sorting=frm.elements; i_tem < sorting.length; i_tem++)
if(sorting[i_tem].name==nm&&sorting[i_tem].checked)
frm.action=sorting[i_tem].value;
}
</script>

The form i am using so far looks like this:

Code:

<form class="form" action="#" method="post" >
			          <fieldset>
				  
                <legend>Search: </legend>
				<input type="hidden" id="hma97177niw" name="redirect" value="http://www.somesite.com/">     
             <br> 
				<table>
				<tr>
				<td width"105px" align="left" >some name 1</td>
				<td width="5px" align="right"><input type="radio" class="start_form_button_space" name="sorting" onsubmit="usePage(this, 'sorting');return checktheform();" value="form_1b.php"></td>
				<td width"105px" align="left" >some name 2</td>
				<td width="5px" align="right"><input class="start_form_button_space" type="radio" name="sorting" onsubmit="usePage(this, 'sorting');return checktheform();" value="form_2b.php"></td>
				</tr>
				<td width"215px" align="right" colspan="3"><br>Advanced Search</td>
				<td width="5px" align="right" colspan="1" ><br><input class="start_form_button_space" type="radio" name="sorting" onsubmit="usePage(this, 'sorting');return checktheform();" value="index-2.php"></td>
				</tr>   
				</table>
				<br>  
				
				<input type="submit" value="Continue">
				</fieldset>
              </form>

So far it doesn;t work. Does anyone see have ideas on to help?

Thanks in advance
Steve

**jscheuer1** · 04-25-2010, 05:03 PM

There could be other problems, but there's no onsubmit event of a radio button. You want onclick. For example, this sort of thing works:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<form action="#">
<input type="radio" name="bob" value="http://www.google.com/" onclick="this.form.action = this.value;">
<input type="radio" name="bob" value="http://www.dynamicdrive.com/" onclick="this.form.action = this.value;">
<input type="submit" value="Go">
</form>
</body>
</html>

It's oversimplified - reloading the page will be odd as most browsers will remember the radio selection, but not the changed action. That can be worked around various ways, depending upon what you want/need to happen in those cases.

**crisp** · 04-26-2010, 08:28 AM

Thanks John.
Worked fine.
Re your comment:

It's oversimplified - reloading the page will be odd as most browsers will remember the radio selection, but not the changed action. That can be worked around various ways, depending upon what you want/need to happen in those cases.

Would you suggest using php instead of js. I thought php originally but i know php is slower than client side js, but it would only be small amount o time surely? Plus something i didn't mention in my original post - sorry - is i'm using php to call GET_$ function from the database. For example i am using a multiple pages forms with GET$ at the top of the code to return a search.
Does this change your ideas on approach?
Thanks again
Steve

**jscheuer1** · 04-26-2010, 01:46 PM

The only real advantage to using PHP is that it will work when the user has javascript unavailable/disabled. PHP is slower, and depending upon the page's byte load, server load, and connection rate, could be considerably slower at times. Also, with PHP, you need a submit event (probably to the page itself) to get the user's changes implemented. If in your version (like my example) you are using the submit event to navigate to the target URL, that (the submit event) would already be taken. You could possibly use two forms.

What I was mentioning about reloading the page doesn't apply if using PHP though, as long as you set things up right, a reload will reload any $_GET data from a form that launched or relaunched the page.

In javascript though, refreshing the page will lose all javascript changes, but will remember the checked state of the radio buttons. This can be dealt with in javascript by either testing the radio buttons in the group onload to see if any is checked, and if so performing the action change on that basis. Or, and this is a better idea as testing the checked state of radio buttons can be difficult or impossible due to the confusion between the checked property and the checked attribute, you could simply set (via javascript) all radio buttons in the group to their unchecked state once the page loads.

**crisp** · 04-28-2010, 09:57 AM

Hi John
Thanks for your reply. Much appreciated.
I think i understand what you are saying...
For example, where the radio button has an onclick code and is submitted - this is a submit event? And if i use two unique forms on this index page i can have two unique submit events?
If this is true, then that is going to work fine because that is the direction i am already heading towards.
Also, yes the php is to act in case the visitor has javascript disabled, and i am already implementing a form to allow with the javascript enabled.
So back to step 1, What php code snippet would work to redirect the visitor to one of three URL's through radio button selection?
If you could help it is muck appreciated.
Thanks
Steve

**jscheuer1** · 04-28-2010, 12:54 PM

Without some sort of javascript assist, I'm not aware of any way that a click on a radio button can trigger a submit event. Neither a way that it could change the action attribute of the form without reloading the page via a submit event.

If you were to go with a pure PHP fall back, it would be clunkier than that. The user would select the radio that sets the URL, submit that form. The page could reload with that information. Another form on the same page could be used to submit the new URL as it action which was transmitted by the first form.

With javascript enabled, you could write additional style to the page to make things appear as one form (hiding the first form's submit button or removing it from the DOM, etc.), the first one now wouldn't actually submit (its submit event could return false, and clicking its radios could change the action of the second form).

**crisp** · 04-28-2010, 01:53 PM

Hi John
Thanks for all your help.
It looks like i will need to insert a text reference for the visitor to see mentioning whether Javascript is enabled or disabled, and to suggest javascript enabled surfing for this site is recommended.
You've a great help.

Thanks
Steve

**jscheuer1** · 04-28-2010, 02:13 PM

That could work. However, it could be done with one form (two would probably still be better) and either javascript alone or with PHP or with PHP alone. Here's a demo, try it with javascript enabled, and without (OH Yeah - This has to be index.php - but that could be changed):

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<?php

$theAct = isset($_POST['act'])? $_POST['act'] : './';

?>

<style type="text/css">

#script {

    display: none;

}

</style>

<script type="text/javascript">

document.write('<style type="text/css">#script {display: inline;} .php {display: none;}<\/style>');



</script>

</head>

<body>

<span class="php"><?php echo $theAct === './'? 'Please Select Destination and hit "Go":' : 'Hit "Go" again to switch to: ' . $theAct . ', or use your browser\'s back button to change your choice.'; ?></span>

<span id="script">Please Select Destination:</span>

<form method="<?php echo $theAct === './'? 'post' : ''; ?>" action="<?php echo $theAct; ?>">

<label>Google: <input type="radio"<?php echo $theAct === './'? ' name="act"' : ''; ?> value="http://www.google.com/"<?php echo $theAct === 'http://www.google.com/'? ' checked' : ''; ?>></label><br>

<label>Dynamic Drive: <input type="radio"<?php echo $theAct === './'? ' name="act"' : ''; ?> value="http://www.dynamicdrive.com/"<?php echo $theAct === 'http://www.dynamicdrive.com/'? ' checked' : ''; ?>></label><br>

<input class="php" type="submit" value="Go"><br>

</form>

<script type="text/javascript">

var f = document.forms[0], e = f.getElementsByTagName('input');

f.method = 'get'; e[0].removeAttribute('name', 0); e[1].removeAttribute('name', 0);

e[0].onclick = e[1].onclick = function(){

    e[0].checked = e[1].checked = false;

    f.action = this.value;

    this.checked = true;

    f.submit();

};

</script>

</body>

</html>

But even this simple demo with just two choices and no get or post value being sent to either destination hurt my brain a bit, and is a little less than intuitive for PHP only use (often the case when PHP must do all the work). For anything more complex, it would probably be easier to write it one way and then the other and then try to combine them.

**crisp** · 04-30-2010, 01:10 PM

Hi
John - that's a nice bit of code!!!
I checked it in Firefox with js enabled and disabled.
With js disabled the Go button magically appeared. With js enabled the php radio click event redirected.
However there was a problem...
For example in php js disabled mode the redirect took me to myurl/on. But not the url needed.
Plus in js enabled mode the radio buttons doubled up with the selection so they were both selected at times. I could fix this with adding a name=something attribute. However when i did this the redirect sent to myurl/<?something=on
Any ideas John?
Does anyone have ideas too?
Thanks
Steve

**crisp** · 04-30-2010, 02:16 PM

Oh, and thanks for your help jscheuer1.

Thread: Javascript redirect to 1 of 3 URL's with Form

Thread Tools

Search Thread

Javascript redirect to 1 of 3 URL's with Form

Bookmarks

Bookmarks

Posting Permissions