Processing Forms with JavaScript

DKDiveDude · Mar 9, 2003

OK I'm new to forms in JavaScript.

I'm trying just to get a very simple form and process some data to work with the following code:

1 <HTML>
2 <HEAD>
3 <TITLE>Form Test</TITLE>
4 <SCRIPT>
5 function DisplayChoice() {
6 document.write("Here is the color you selected:&quot

;
7 document.write(ColorForm.ColorChoice.value);
8 document.write(" - Excellent choice!&quot

;
9 }
10 </SCRIPT>
11 </HEAD>
12 <BODY>
13 <form name="ColorForm"><select name="ColorChoice">
14 <option value="Red" selected>Red
15 <option value="Green">Green
16 <option value="Blue">Blue
17 </select><br><br>
18 <input name="ShowColor" type="button" id="ShowColor" onClick="DisplayChoice()" value="Show Color"></form>
19 <br>
20 </BODY>
21 </HTML>

Well this works fine in the Opera browser, but it only works in IE if I take out line 6.

I appreciate if somebody could tell me what is wrong.

Thanks

xutopia · Mar 9, 2003

First thing, document.write is used when the page is loading. If you want to write something on the page after the page as loaded you will need to use DHTML.

Secondly you should use a standard compliant way of referencing objects.

ColorForm.ColorChoice.value should be document.ColorForm.ColorChoice.value

Now for a way to deal with your problem :

<HTML>
<HEAD>
<TITLE>Form Test</TITLE>
<SCRIPT>
function DisplayChoice() {
document.getElementById('myContainer').innerHTML = "Here is the color you selected:"
+ document.ColorForm.ColorChoice.value
+ " - Excellent choice!";
}
</SCRIPT>
</HEAD>
<BODY>
<form name="ColorForm"><select name="ColorChoice">
<option value="Red" selected>Red
<option value="Green">Green
<option value="Blue">Blue
</select><br><br>
<input name="ShowColor" type="button" id="ShowColor" onClick="DisplayChoice()" value="Show Color"></form>
<br>
<p id="myContainer"></p>
</BODY>
</HTML>

I hope this helps you out. Gary

http://www.xutopia.com

Haran

DKDiveDude · Mar 9, 2003

Thanks for your fast reply.

However that is exactly what I actually want to do, that is use document.write because this is actually part of a brand new page.

That is I want to create a new page from scratch after the user have clicked the button.

xutopia · Mar 9, 2003

Ok. hmmm...

I'm rather impatient from all the slugs I found in the forum today and thankfully you aren't!

You actually seem to want to learn.

Unfortunatly server side javascript doesn't really work the way you would like it to in this scenario.

Javascript can do certain things as the page loads or when the page is loaded but as soon as you change the URL or refresh the page (form submit or URL change), the javascript variable and everything in it go inside what is called a garbage collector. That means all the variables you had disapear in oblivion.

Although I fail to see really where you are heading with your page I'm seeing that you want to learn how to do things. What exactly do you want to happen when the person clicks the button? Gary

http://www.xutopia.com

Haran

DKDiveDude · Mar 9, 2003

Actually the form was just a short example.

I actually made a page with several selection list forms, and then finally one submit form with a button.

This then call a function in my <HEAD> section, and there dependent on the choices made it starts to build a page, including <BODY> and <HEAD> tags.

Well it all worked beatifully, BUT I was "ONLY" testing in Opera, and then when I tried it in IE and NS it didn't work.

So if I understand you correct, when I start to generate my new page, the old form and selection values dissappear into cyberspace?

I did try earlier to do what you had suggested, that is writing to a named <DIV> tag, BUT I did not know how to write my output little by little, only as one big chunk.

You see I go through a loop, which actually calls an external JavaScript file, Yes from within the JavaScript function, that was NOT easy to do, and depended on the choices made by the user AND the JavaScript file I'm loading which is actually a big array (database) I then create a HTML page.

Sure I could make just make one big string and then write it at the end, to that names <DIV> section.

UNLESS I can do it a little at a time, when I go through my loop, I guess that is what I have to do - that is build one enormous string and then write it to the <DIV> tag at the end.

Off course please let me know if somebody have another idea.

Thanks

Happy Surfing Dudes!

OPERA IS THE BEST BROWSER

xutopia · Mar 9, 2003

Well keep on thinking and working on your project. We'll be around to help.

PS (Phoenix is the best browser ;P ) Gary

http://www.xutopia.com

Haran

DKDiveDude · Mar 9, 2003

You now what my above example from my initial post works in IE but NOT NS if I add the following between line 5 and 6:

SaveFormValue=ColorForm.ColorChoice.value

and then change line 7 to:

document.write(SaveFormValue)

I guess it's becaused I "refreshed" IE's memory. Oh that form value, I see aha, Yes now I understand

I'll keep working to get it to work in NS too..

Hehe

DKDiveDude · Mar 9, 2003

However it DOES not work in IE, if I use:

document.SaveFormValue=ColorForm.ColorChoice.value

instead of:

SaveFormValue=ColorForm.ColorChoice.value

Strange!?!

DKDiveDude · Mar 9, 2003

Oh crap my typo in the last post.

Sorry forget it folks

DKDiveDude · Mar 9, 2003

Ok where NS before did absolutely NOTHING when I hit the submit button, at least now when I add the "refresh" variable and store the form and selection value and then use that variable when I write (see 3 posts ago) , something does output in NS:

Here is the color you selected:

and then it keeps loading NOTHING forever, the hourglass is just busy.

xutopia · Mar 9, 2003

post your entire code as is!

Gary

http://www.xutopia.com

Haran

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!

Processing Forms with JavaScript

DKDiveDude

IS-IT--Management

xutopia

Programmer

DKDiveDude

IS-IT--Management

xutopia

Programmer

DKDiveDude

IS-IT--Management

xutopia

Programmer

DKDiveDude

IS-IT--Management

DKDiveDude

IS-IT--Management

DKDiveDude

IS-IT--Management

DKDiveDude

IS-IT--Management

xutopia

Programmer

Similar threads

Part and Inventory Search

Sponsor