How to create javascript that can change the Post URL in a form ?

Hi,

May i know how to create a javascript that can change a POST URL in a form based on the dropdown selection ?

Attached is the code for the form.

I would like to have the post action as follows :

If the dropdown selected is "malaysia" the post url will be "secure/aLogIn.php" and if "international" the post url will be "secures/aLogIn.php" .

Appreciates if anybody can help me with this.

Thank you
<form method='post' action='URL'>
       <input type='hidden' name='action' value='login'>
       <input type='hidden' name='rtype' value=''>
       <input type='hidden' name='subaction' value=''> 
       <input type='hidden' name='cSld' value=''>
       <input type='hidden' name='cTld' value=''> 
       <input type='hidden' name='id' value=''>
       <input type='hidden' name='nameemail' value=''> 
	   <input type='hidden' name='namebundle' value=''>
       Username: <input type='text' name='newuid' size='15' maxlength='272' >
       <p>Password:
       <input type='password' maxlength='60' name='password1' size='15' >
       </p>
	   <p>
       <select size="1" name="D1">
	   <option selected value="malaysia">Malaysia Client</option>
	   <option value="international">International Client</option>
	   </select></p>
	   <input type='submit' value='Login' name='submit'>
       </form>

Open in new window

LVL 2
smksaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
fsze88Connect With a Mentor Commented:
the version not alter input tag name (action)
<form method='post' action='URL'>
       <input type='hidden' name='action' value='login'>
       <input type='hidden' name='rtype' value=''>
       <input type='hidden' name='subaction' value=''> 
       <input type='hidden' name='cSld' value=''>
       <input type='hidden' name='cTld' value=''> 
       <input type='hidden' name='id' value=''>
       <input type='hidden' name='nameemail' value=''> 
           <input type='hidden' name='namebundle' value=''>
       Username: <input type='text' name='newuid' size='15' maxlength='272' >
       <p>Password:
       <input type='password' maxlength='60' name='password1' size='15' >
       </p>
           <p>
       <select size="1" name="D1" onchange="onchangeSelection(this);">
           <option selected value="malaysia" url="secure/aLogIn.php">Malaysia Client</option>
           <option value="international" url="secures/bLogIn.php">International Client</option>
       </select></p>
           <input type='submit' value='Login' name='submit'>
       </form>
       
<script type="text/javascript">
function onchangeSelection(selectObj){
var formObj = selectObj.form;
var optionIndex = selectObj.options.selectedIndex;
var urlvalue = selectObj.options[optionIndex].attributes['url'].value;
 
formObj.attributes['action'].value = urlvalue;
alert(formObj.attributes['action'].value);
 
}
 
</script>

Open in new window

0
 
alien109Commented:
First, assign a change handler to the list box

<select size="1" name="D1" onchange="setFormAction(this)">

Then set the default action for the form, which is the default selection in the dropdown
<form method='post' action='secure/aLogIn.php'>

Then add this JavaScript between the <head></head> tags.
<script type="text/javascript">
function setFormAction(obj) {
    if(obj[obj.selectedIndex].value == "malaysia") {
        obj.form.setAttribute("action", "secure/aLogIn.php");
    } else if(obj[obj.selectedIndex].value == "international") {
        obj.form.setAttribute("action", "secures/aLogIn.php");
    }
}
</script>
0
 
smksaAuthor Commented:
Hi,

Thanks alien109,

I have tried the script given and follow your instruction.

But it seems the URL still not changed after selecting the dropdown.

There are no javascript error also.

Appreciates if you can advise me further.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
smksaAuthor Commented:
Hi,

Attached is the full page according to your guideline.

But it seems the URL still not changed after changing the dropdown option.

Thank you.
<html><head>
<script type="text/javascript">
function setFormAction(obj) {
    if(obj[obj.selectedIndex].value == "malaysia") {
        obj.form.setAttribute("action", "secure/aLogIn.php");
    } else if(obj[obj.selectedIndex].value == "international") {
        obj.form.setAttribute("action", "secures/aLogIn.php");
    }
}
</script>
</head>
 
<form method="post" action="secure/aLogIn.php">
	<input type="hidden" name="action" value="login">
	<input type="hidden" name="rtype" value>
	<input type="hidden" name="subaction" value>
	<input type="hidden" name="cSld" value>
	<input type="hidden" name="cTld" value><input type="hidden" name="id" value>
	<input type="hidden" name="nameemail" value>
	<input type="hidden" name="namebundle" value>Username:
	<input type="text" name="newuid" size="15" maxlength="272">
	<p>Password:
	<input type="password" maxlength="60" name="password1" size="15"> </p>
	<p><select size="1" name="D1" onchange="setFormAction(this)">
	<option selected value="malaysia">Malaysia Client</option>
	<option value="international">International Client</option>
	</select></p>
	<input type="submit" value="Login" name="submit">
</form>
</html>

Open in new window

0
 
fsze88Commented:
could you rename hidden input tag name (action)?
<input type='hidden' name='action' value='login'> --> <input type='hidden' name='action2' value='login'>
it will cause of unable to get the formObj.action value with the same name with one of input tag name....

<form method='post' action='URL'>
       <input type='hidden' name='action1' value='login'>
       <input type='hidden' name='rtype' value=''>
       <input type='hidden' name='subaction' value=''> 
       <input type='hidden' name='cSld' value=''>
       <input type='hidden' name='cTld' value=''> 
       <input type='hidden' name='id' value=''>
       <input type='hidden' name='nameemail' value=''> 
           <input type='hidden' name='namebundle' value=''>
       Username: <input type='text' name='newuid' size='15' maxlength='272' >
       <p>Password:
       <input type='password' maxlength='60' name='password1' size='15' >
       </p>
           <p>
       <select size="1" name="D1" onchange="onchangeSelection(this);">
           <option selected value="malaysia" url="secure/aLogIn.php">Malaysia Client</option>
           <option value="international" url="secures/aLogIn.php">International Client</option>
       </select></p>
           <input type='submit' value='Login' name='submit'>
       </form>
       
<script type="text/javascript">
function onchangeSelection(selectObj){
var formObj = selectObj.form;
var optionIndex = selectObj.options.selectedIndex;
var urlvalue = selectObj.options[optionIndex].attributes['url'].value;
 
formObj.action = urlvalue;
alert(formObj.action);
 
}
 
</script>

Open in new window

0
 
smksaAuthor Commented:
Hi,

I'm afraid i cannot rename the hidden input "action", because it is required by my third party application.

Is there anyway we can change this scripts ?

Thank you.
0
 
alien109Commented:
you don't need to rename the hidden field. the form can still be accessed via the dom method getAttribute.

smksa - did you click the submit button? it should submit the form to the desired url.
0
 
alien109Commented:
correction : the form *ACTION* can
0
 
alien109Commented:
i stand corrected, IE doesn't like that... works in firefox.
0
 
smksaAuthor Commented:
Thank you for your helps.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.