js onclick event to read values from form fails - why?

[Randell D.]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that will
check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone else's
work).

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">
function firstFunction()
{
document.write("<br>document.patient.length = " + document.patient.length);
document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);
document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);
return;
}
</script>

<form name="patient">
<p></p><hr>
Insanity checklist. Enter number of weeks: <input name="weeks" type="text">

<p></p>
Clothing preferences:
<select name="diet">
<option value="napolean">Dr Napolean</option>
<option value="darcy">Dr Darcy</option>
<option value="strangelove">Dr Strangelove</option>
</select>
<br>
<input type="submit" onclick="firstFunction(); return">
<hr><a href="./e.html">again</a><hr>
</form>

 

[Erwin Moller]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that
will check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone
else's work).

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no
errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">
function firstFunction()
{
document.write("<br>document.patient.length = " +
document.patient.length);
document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);
document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);
return;
}
</script>

Stop right there.

Why are you writing <br>document.etc.etc here?
DO you expect the browser to understand that?
I think you mean \n (NEWLINE) instead of the HTML-entity <br> IF you want to
generate dynamical javascript. If that is what you are trying, you do it
the wrong way, sorry.

But more important: WHY are you dynamically writing Javascript instead of
just checking the form the normal way?

If you want your function to return some values, use alert, and NOT
document.write.
So:
function firstFunction()
{
alert("document.patient.length = " + document.patient.length);
alert("document.patient.weeks.value = " + document.patient.weeks.value);
alert("document.patient.elements[1].value = " +
document.patient.elements[1].value);
}


Good luck and stop writing to your document, it is unneeded complex and
incorrect in this case.

Regards,
Erwin Moller

 

[DU]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that will
check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone else's
work).

That's understandable.

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">

Make sure you're using valid and validated markup code. Here, language
is deprecated; type has superseded language and is both backward and
forward-compatible. So

function firstFunction()
{
document.open();
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170

document.write("<br>document.patient.length = " + document.patient.length);

document.write("\ndocument.patient.length = " + document.patient.length);

document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);

document.write("\ndocument.patient.weeks.value = " +
document.patient.weeks.value);

document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);

document.write("\ndocument.patient.diet.options[document.patient.diet.selectedIndex].value
= " +
document.patient.diet.options[document.patient.diet.selectedIndex].value);

return;

Remove the return and instead add this:

document.close();
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-98948567

}
</script>

<form name="patient">

Action attribute missing.

<p></p><hr>

empty paragraphs are usually a sign that a better use of css (padding or
margin) is welcomed. CSS should be used for presentational and/or
formating purposes; HTML should be used only for structuring the
document, the content.

Insanity checklist. Enter number of weeks: <input name="weeks" type="text">

I would add size and maxlength attributes to limit the user's input.

<p></p>
Clothing preferences:
<select name="diet">
<option value="napolean">Dr Napolean</option>
<option value="darcy">Dr Darcy</option>
<option value="strangelove">Dr Strangelove</option>
</select>
<br>
<input type="submit" onclick="firstFunction(); return">

Remove the <br> and return here too.

<p><button type="submit" onclick="firstFunction();" accesskey="S"><span
style="text-decoration:underline; font-weight:bold;">S</span>ubmit
form</button></p>


I've never seen a document that modifies the document structure as
you're submitting a form; i'm not sure this is doable or correct. I
would rather use alert()'s to see these values instead.
If you want to validate the user's form data, then you still need to do
some coding: testing for empty string, test the weeks value (parseInt
the number of weeks), etc..
I would use accesskey and labels wherever it would be justified.

<hr><a href="./e.html">again</a><hr>
</form>

Not tested. I recommend you first validate your markup code.

DU

 

[Thomas 'PointedEars' Lahn]

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no errors).

Of course it fails. After the first document.write(...)
there is no JavaScript code to be executed in the document
anymore.

[...]
<script language="JavaScript">

function firstFunction()
{
document.write("<br>document.patient.length = " + document.patient.length);
document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);
document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);
return;
}
</script>
[...]
<input type="submit" onclick="firstFunction(); return">

http://groups.google.com/groups?as_...group=comp.lang.javascript&scoring=d&filter=0
See the third hit, for example.


PointedEars

 

[Randell D.]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that will
check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone else's
work).

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">
function firstFunction()
{
document.write("<br>document.patient.length = " + document.patient.length);
document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);
document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);
return;
}
</script>

<form name="patient">
<p></p><hr>
Insanity checklist. Enter number of weeks: <input name="weeks" type="text">

<p></p>
Clothing preferences:
<select name="diet">
<option value="napolean">Dr Napolean</option>
<option value="darcy">Dr Darcy</option>
<option value="strangelove">Dr Strangelove</option>
</select>
<br>
<input type="submit" onclick="firstFunction(); return">
<hr><a href="./e.html">again</a><hr>
</form>

Thanks to all three of you who replied - I've noted your comments about my
misuse of <br> however some of you misunderstood my original post - The code
I provided was not going to be the exact code I would be using - It would
only prove what I wanted to do (ie entering data, pressing submit and then
displaying it in some readable format just to prove that I could re-display
form data... once I could do that, then my next step was to crunch/play with
the data... The code I had been using came from an old javascript book that
I am least likely to continue using... but I was sure I had enough
javascript skills in me to clean it up...

anyway... much appreciated for the help.. Since I made the post last night
I've actually taken a couple of steps forward. and your comments helped...

cheers
randell d.

 

[Randell D.]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that will
check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone else's
work).

That's understandable.

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">

Make sure you're using valid and validated markup code. Here, language
is deprecated; type has superseded language and is both backward and
forward-compatible. So

function firstFunction()
{
document.open();
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170

document.write("<br>document.patient.length = " +

document.patient.length);

document.write("\ndocument.patient.length = " + document.patient.length);

document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);

document.write("\ndocument.patient.weeks.value = " +
document.patient.weeks.value);

document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);

document.write("\ndocument.patient.diet.options[document.patient.diet.select
edIndex].value
= " +
document.patient.diet.options[document.patient.diet.selectedIndex].value);

I've just tried using "\n" instead of "<br>" - Why would I use \n since it
did not place my data on a new line like it does when I use <br>?

randelld

 

[DU]

Whats wrong with my sample script below? All I want to do is confirm that
my form data is in my environment (basically, I'm writing a script that
will

check that some form fields have a value, and others don't - The
functionality of this will be used in my other script but I want to make
sure I know whats happening first as opposed to bastardizing someone
else's

work).

I have worked some of the code out - I figured the what should be working
below would be easy enough but again, I'm coming up with a surprise... I'm
not getting any errors... "firstFunction()" manages to get the first
document.write to work, but the rest of it fails (ie no values, no
errors).

Can someone help?

Much appreciated,
randelld

ps here's my code...

<script language="JavaScript">
function firstFunction()
{
document.write("<br>document.patient.length = " +
document.patient.length);

document.write("<br>document.patient.weeks.value = " +
document.patient.weeks.value);
document.write("<br>document.patient.elements[1].value = " +
document.patient.elements[1].value);
return;
}
</script>

<form name="patient">
<p></p><hr>
Insanity checklist. Enter number of weeks: <input name="weeks"
type="text">

<p></p>
Clothing preferences:
<select name="diet">
<option value="napolean">Dr Napolean</option>
<option value="darcy">Dr Darcy</option>
<option value="strangelove">Dr Strangelove</option>
</select>
<br>
<input type="submit" onclick="firstFunction(); return">
<hr><a href="./e.html">again</a><hr>
</form>

Thanks to all three of you who replied - I've noted your comments about my
misuse of <br> however some of you misunderstood my original post - The code
I provided was not going to be the exact code I would be using - It would
only prove what I wanted to do (ie entering data, pressing submit and then
displaying it in some readable format just to prove that I could re-display
form data... once I could do that, then my next step was to crunch/play with
the data...

I understood that.

The code I had been using came from an old javascript book that

I am least likely to continue using... but I was sure I had enough
javascript skills in me to clean it up...

anyway... much appreciated for the help.. Since I made the post last night
I've actually taken a couple of steps forward. and your comments helped...

cheers
randell d.

All 3 of us have suggested that you use alert()'s instead of
document.write() calls. All 3 of us have suggested \n instead of a <br>
node inserted into a text string.

Finally, let me repeat again that you should first start with validating
your markup code, then (and only when such markup is entirely validated)
address the javascript issues. There are many reasons (including
debugging js and dhtml) and benefits for doing so.

My Web site is standard! And yours?
http://www.w3.org/QA/2002/04/Web-Quality

W3C validator
http://validator.w3.org/

DU

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in

All 3 of us have suggested that you use alert()'s instead of
document.write() calls. All 3 of us have suggested \n instead of a <br>
node inserted into a text string.

But AFAICS none of you made it clear that <br> is what should normally
be used within document.write (though \n & \t can be useful within
<pre>) and \n is what should be used within such as alert or writing to
a control.

Within ordinary HTML, \n has no more effect than a space.

Basically, <br> is used within HTML, and \n within script; and the
ability to write HTML with script adds confusion.

Also : While a page is loading, document.write adds to the current
position. After a page is loaded, the next document.write starts a new
page, losing the old one.

The above is at least a first approximation.



Someone wrote "I've never seen a document that modifies the document
structure as you're submitting a form; i'm not sure this is doable or
correct. I would rather use alert()'s to see these values instead." --
it is presumably doable with DynWrite (see FAQ), and ISTM quite
practicable to have a form with a static entry area on the left and a
dynamic running-commentary at the right.