Hi ... I have three input types that are images. I need some help on creating a script that will change a form's action based upon which image is clicked. Please advise?
Jim Null
![[afro]](/data/assets/smilies/afro.gif "[afro] [afro]")
Jim Null
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Change Action on a Form 2
- Thread starter jsnull
- Start date
-
1
- #2
Code:
<input type="image" onclick="this.form.action = 'whatever'; this.form.submit(); return false;" src="blah.jpg" />-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
kaht sir, you needn't submit the form on an input type="image", it automatically submits the form it resides in on a click.
![[monkey]](/data/assets/smilies/monkey.gif "[monkey] [monkey]")
![[snake]](/data/assets/smilies/snake.gif "[snake] [snake]")
<.
Code:
<input type="image" onclick="this.form.action = 'whatever'; [!]this.form.submit();[/!] return false;" src="blah.jpg" />not if you return false:
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
Code:
<input type="image" onclick="this.form.action = 'whatever'; this.form.submit(); [!]return false;[/!]" src="blah.jpg" />-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
-
1
- #5
Code:
formObject.action=URL
Code:
<input type="image" onclick="document.formName.action = 'register.asp'; this.form.submit(); return false;" src="register.jpg" />
<input type="image" onclick="document.formName.action = 'login.asp'; this.form.submit(); return false;" src="login.jpg" />
<input type="image" onclick="document.formName.action = 'forgottenpassword.asp'; this.form.submit(); return false;" src="forgottenpassword.jpg" />Ps. you dont have to have inputs to do this.. You also dont have to have it inside the form.
Eg. it can be:
Code:
<html>
<head>
<script type="text/javascript">
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<a href="#" onclick="document.formName.action = 'forgottenpassword.asp'; formSubmit();">Forgotten Password</a>
...Olav Alexander Mjelde
Admin & Webmaster
- Thread starter
- #6
Y'all are great, thanx for your help. Reckon I should have given you more detail. Here's my form:
Thus if someone clicks image 1, I would the action to go to URL1, image2 to URL2, and so forth.
Jim Null
Code:
<form method="post" action="">
<input type="image1" src="blahblah1.jpg">
<input type="image2" src="blahblah2.jpg">
<input type="image3" src="blahblah3.jpg">
<input type="image4" src="blahblah4.jpg">
</form>Thus if someone clicks image 1, I would the action to go to URL1, image2 to URL2, and so forth.
Jim Null
I'm not sure I know what you want and I'm not sure you know how to solve it.
Here are some thoughts:
* Do you need 4 submits?
-> Can you use something else, like a radio-button or a dropdown-list?
* You have to be able to reference by ID or Name, so preferrably both should be set in all your html-tags.
What I want you to do:
1) look at this sample -> 2) look at the code above, used to set the action of a form
3) glue it all together
eg. Why 4 submit buttons? Why not let the user choose with radio-buttons and make the radiobuttons change the form action?
I think that would be a better idea, especially if your thinking of usability/layout.
Olav Alexander Mjelde
Admin & Webmaster
Here are some thoughts:
* Do you need 4 submits?
-> Can you use something else, like a radio-button or a dropdown-list?
* You have to be able to reference by ID or Name, so preferrably both should be set in all your html-tags.
Code:
<form method="post" action="?" name="userForm" id="userForm">
<input type="image" name="submit" id="go_1" src="go_there.jpg" value="" />
</form>What I want you to do:
1) look at this sample -> 2) look at the code above, used to set the action of a form
3) glue it all together
eg. Why 4 submit buttons? Why not let the user choose with radio-buttons and make the radiobuttons change the form action?
I think that would be a better idea, especially if your thinking of usability/layout.
Olav Alexander Mjelde
Admin & Webmaster
- Thread starter
- #8
You're right Olav, I may not be able to do what I desire to do.
I am building a form that will have three of four different images on that form. The images on that form are based upon the referring URL. Once the form is filled out and submitted, the submitter is taken to a different form based upon the image they click to submit the form.
Drop down or radio buttons would be easier. But they just don't look as graphically pleasing.
I'll follow up and visit your link suggestion.
Much appreciated.
Jim Null
I am building a form that will have three of four different images on that form. The images on that form are based upon the referring URL. Once the form is filled out and submitted, the submitter is taken to a different form based upon the image they click to submit the form.
Drop down or radio buttons would be easier. But they just don't look as graphically pleasing.
I'll follow up and visit your link suggestion.
Much appreciated.
Jim Null
Happy to oblige! Could you post the code you have written to do this? We have the HTML - please post your javascript.
Any problems you are having, I'm sure we can help with
![[smile]](/data/assets/smilies/smile.gif "[smile] [smile]")
Cheers,
Jeff
[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]
Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!
FAQ216-6094
- Thread starter
- #10
This is all the further I've gotten w/ code as I am looking for some Javascript to set the form action per the input type images... here you go.
When and image is clicked for image1 I would like the action to go to url1, and so forth for each image.
Any help is appreciated.
Jim Null
Code:
<form method="post" action="">
<input type="text" name="Test">
<input type="image1" src="blahblah1.jpg">
<input type="image2" src="blahblah2.jpg">
<input type="image3" src="blahblah3.jpg">
<input type="image4" src="blahblah4.jpg">
</form>When and image is clicked for image1 I would like the action to go to url1, and so forth for each image.
Any help is appreciated.
Jim Null
JSnull:
You can change the src of the image-submit, when choosing in a dropdown-list.
You can even change the action of the form, when onmouseover="" on the submit!
There is no reason (afaik) that you need 4 submit buttons, as they can dynamically change based on forinstance the querystring variable, what you just clicked/selected in a dropdownlist, etc.
Olav Alexander Mjelde
Admin & Webmaster
You can change the src of the image-submit, when choosing in a dropdown-list.
You can even change the action of the form, when onmouseover="" on the submit!
There is no reason (afaik) that you need 4 submit buttons, as they can dynamically change based on forinstance the querystring variable, what you just clicked/selected in a dropdownlist, etc.
Olav Alexander Mjelde
Admin & Webmaster
- Status
Similar threads
- Locked
- Question