Solved

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

Posted on 2009-03-30
10
349 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:smksa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 12

Expert Comment

by:alien109
ID: 24025853
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
 
LVL 2

Author Comment

by:smksa
ID: 24025926
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
 
LVL 2

Author Comment

by:smksa
ID: 24025957
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:fsze88
ID: 24025967
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
 
LVL 2

Author Comment

by:smksa
ID: 24025984
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
 
LVL 12

Expert Comment

by:alien109
ID: 24026005
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
 
LVL 12

Expert Comment

by:alien109
ID: 24026008
correction : the form *ACTION* can
0
 
LVL 12

Expert Comment

by:alien109
ID: 24026027
i stand corrected, IE doesn't like that... works in firefox.
0
 
LVL 15

Accepted Solution

by:
fsze88 earned 500 total points
ID: 24026039
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
 
LVL 2

Author Closing Comment

by:smksa
ID: 31564690
Thank you for your helps.
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question