Solved

How do I let a user click on an option, and then have this option appear on a form automatically?

Posted on 2004-09-09
20
147 Views
Last Modified: 2010-04-25
I am developing a website using dreamweaver, and have grinded to a hault!
I have a section of the site whereby an orderform is filled in by a user. There is a link to a colour page, and i would like for the user to be able to click on a colour swatch, and have the form updated with the colour name and reference number. Check it out to see what i mean, www.hexagondraw.com.
0
Comment
Question by:dc_law21
  • 11
  • 9
20 Comments
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12015320
this should be done using javascript.

you can put an onclick command on the image and have that image update a piticular field of the order form.

ill get back to you
Rockman



0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12015406
OK
put the script in the head of the page
put the input of the form in your form (you can change the name of the field, BUT also change it in the script
put the onclick action on the images (change the (1) to whatever you need it to be.
Good Luck


<head>
<script language="JavaScript" type="text/javascript">
<!--
function change (newitem){
document.form1.textfield.value=newitem
};
// -->
</script>
</head>


<form name="form1" method="post" action="">
  <input type="text" name="textfield">
</form>

<img src="bullet.gif" width="25" height="25" onclick="change(1)">
0
 

Author Comment

by:dc_law21
ID: 12015990
hi rockman

thanks for the reply. Do i put the script into the head of the form page, or the colour page? (sorry, im new to this)
when u say change the 1 to whatever, i take it "change(1)" becomes "change(ral 9010)" etc. What about form.1? does this change to?

Dave
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 10

Expert Comment

by:rockmansattic
ID: 12016052
From your question, I assumed that you were using only one page.
Ill have to change a couple of things.

BUT
Yes, change 1 to (ral9010) (that i guess will be the color number?)
yes, also you may have to change form1 for the name of your form

I get back to you about the pages.
I now assume that you have TWO windows open? one with the orderform and the other with the colors?

Rockman
0
 

Author Comment

by:dc_law21
ID: 12016114
yes, two seperate pages. feel free to have a look if u like, www.hexagondraw.com - click stainless steel, then 'order my rooflight' link to the right

dave
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12016160
OK
a couple of steps

put this in the head of your ORDERFORM PAGE

<script language="JavaScript" type="text/javascript">
self.name = "orderform"; // names current window as "orderform"
</script>

add target="main" to the links, like this

<img src="bullet.gif" width="25" height="25" onclick="change(1)" target="orderform">

*note, in this senerio, both pages must be open at one time (kind of like a popup, or frames)
0
 

Author Comment

by:dc_law21
ID: 12016374
how do i create a pop up page? (sorry about this)

Dave
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12016481
0
 

Author Comment

by:dc_law21
ID: 12016855
ok, ive got the pop up page working (thanks for that), and ive put the java script into the head of my orderform page. i also put...

<img src="bullet.gif" width="25" height="25" onclick="change(ral9010)" target="orderform">

as a link on the remote page, but when i click it, all i get is page not found.

have i missed something?

dave
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12016875
I working on it currently.

there are a couple of extra steps I must contend with to ensure proper trasfer of variable.

Rockman
0
 

Author Comment

by:dc_law21
ID: 12017112
much appreciated rockman,

you clearly know what you are talking about!
0
 

Author Comment

by:dc_law21
ID: 12017748
i realise im asking a fair bit, so the points are up...
0
 

Author Comment

by:dc_law21
ID: 12017760
damn, cant. oh well...
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12018045
OK, got it (FINALLY)


form of the orderform*********************

<input type=button name=choice onClick="window.open('colors.html','popuppage','width=250,height=200,top=100,left=100');" value="Select Color">
<input name="color" type="text" id="color">


colors.html page**********************
<head>
<script language="JavaScript">
function sendcolor(t){

window.opener.document.orderform.color.value = t;
window.close();
}
</script>
</head>


then for each color swatch:
<a href="#" onClick="sendcolor('thiscolor1')"><img src="whatever.gif" height="30" width="30"></a>

Just tested it and it should work

Rockman







0
 

Author Comment

by:dc_law21
ID: 12018366
ok mate, will try this tommorow (gotta go now) - thanks for the help. Will try it then, and award points accordingly.

anything i can ever help you with (as if!) - just let me know...

Dave
0
 

Author Comment

by:dc_law21
ID: 12024348
hi rockman,

managed to get the pop up there no problem. However, when i click on the icon for the colour swatch, nothing happens. The pop up stays open, and the form doesn't get filled in.

Does it matter which version of Dreamweaver im using? (Dreamweaver MX) - i just cant crack it. Feels like were so close to!

Dave
0
 
LVL 10

Accepted Solution

by:
rockmansattic earned 130 total points
ID: 12025738
no, DW version makes no difference.  this is javascript and as long as your browser is Javascript enabled, it should work.

just copy and paste my last code and dont try to change anything yet, see if it works first.

a couple of things to note,

the form on the orderform page must be named 'orderform'  OR change it in script on the colors page
the textfield for the color must be named 'color' OR change that as well

If that doesnt work, do you have an online version I can see?

Rockman
0
 

Author Comment

by:dc_law21
ID: 12028127
thats it, perfect! - one last thing, how would i put a scrol bar on the colour page. Where would the code go etc?

your the man mate!

Dave
0
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12029418
on this line

<input type=button name=choice onClick="window.open('colors.html','popuppage','width=250,height=200,top=100,left=100');" value="Select Color">

change to

<input type=button name=choice onClick="window.open('colors.html','popuppage','width=250,height=200,top=100,left=100,scroll=yes');" value="Select Color">

This should work.

Rockman
0
 

Author Comment

by:dc_law21
ID: 12041726
thanks rockman, all works great now. eternally greatful!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Dreamweaver - Spell check extension 4 493
Search/Results Pages 7 404
Pattern Matching LF in Dreamwever CS5 2 299
With Dreamweaver, creating a dropdown menu system 5 104
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

735 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