Javascript Help on Form Data Display

Vem786 · Dec 8, 2003

Hi All;
I'm having trouble figuring out a way for the code I need to write.

The situation is this:

I have a HTML page, in which I have 2 checkboxes & underneath each is a textbox. I have 1 SUBMIT button. I enter data in a textbox & Select the corresponding checkbox & hit submit, the data gets displayed properly. But the PROBLEM is when I select both the CHECKBOXES for both the textboxes data to get displayed, when hit SUBMIT. I get to see only the First Textbox data always OR If I comment the FIRST IF BLOCK then I'll see the second textbox data. So, NOT BOTH data together?!?!?!

Can anyone help me solve this puzzle.

Below is the Code I'm struggling on.

-----------------------------------------
<html>
<head>
</head>
<body TOPMARGIN="0" LEFTMARGIN="0">
<form name="frm1">
<center>
<table border='0' cellspacing=2 cellpadding=3>
<TR>
<TD align="left" valign="middle"><font size=2><b>CB1</b>
<TD align="left" valign="middle"><font size=2><b>TEXTBOX_1</b>
<TR>
<TD align="left"><input type = "checkbox" name="cb1" value="ON" checked="checked" size =25>
<TD align="left"><input type = text name="textbox1" size =25>
<TR>
<TD align="left" valign="middle"><font size=2><b>CB2</b>
<TD align="left" valign="middle"><font size=2><b>TEXTBOX_2</b>
<TR>
<TD align="left"><input type = "checkbox" name="cb2" value="ON" checked="checked" size =25>
<TD align="left"><input type = text name="textbox2" size =25>
</table>
<table>
<TR>
<Td align=left><input type=submit name="submit" value="SUBMIT" size=15 onClick="submitQry();return false;">
</table>
</CENTER>
</form>
<script language="javascript">
<!-- hide me
function submitQry()
{
var the_string;
var the_string1;

if(document.add_links1.cb1.checked==true)
{
//alert("in IF 1...&quot

;
the_string=document.frm11.textbox1.value;
document.write("<b>"+the_string);
document.write("<b>"+the_string);

}
if(document.frm1.cb2.checked==true)
{
the_string1=document.frm1.textbox2.value;
//document.writeln("<table>&quot

;
document.write("<tr>&quot

;
document.write("<b>"+the_string1);
//document.writeln("</table>&quot

;
}

else
document.writeln("No Data to display!!!&quot

;

}
// show me -->
</script>
</body>
</html>

BabyJeffy · Dec 8, 2003

I think you are trying to access the wrong thing in the function submitQry(). Check the line that reads:

Code:

if(document.add_links1.cb1.checked==true)

Judging by the HTML snippet you give... I think it should be:

Code:

if(document.frm1.cb1.checked==true)

Hope this works for you,
Jeff

BillyRayPreachersSon · Dec 8, 2003

You might also want to correct the form name in the following line... Change this:

Code:

the_string=document.frm11.textbox1.value;

to this:

Code:

the_string=document.frm1.textbox1.value;

Dan

Vem786 · Dec 9, 2003

Thanks for spending sometime on the code snippet I sent. Actually in the process of conversion I din't change the Form Name to frm1. If you notice add_links1 OR frm11, Please consider it as "frm1".

Eventhough I have every form name & textboxes name perfectly defined, I am not able to display the two textboxes data ONCE the Checkboxes are selected in the HTML page on SUBMIT.

Thanks!!

stormbind · Dec 9, 2003

It's because you're using document.write in a page that has already fully loaded.

By using it in that situation, the page is cleared when it prints the result of the first if statement.

It's then failing to print the results of any additional queries because the page (including script) have been effectively erased.

You should get all your data out if you use pasteHTML, innerHTML, alert or some other method.

The GET request includes all the data as expected so there are no problems with the concept

----------
I'm willing to trade custom scripts for... [see profile]

BillyRayPreachersSon · Dec 9, 2003

Aaah... I think I see what is happening... Because you are using document.write after the page has loaded, it effectively clears the entire document from memory, and overwrites what was on the page.

This means that the frm1 and cb2 elements don't exist as far as the browser is concerned, after the first document.write has been executed. It also explains why the second "if" statement works correctly if the first doesn't execute.

I would also never use the name "submit" to describe a form element, so you'll forgive me for changing that ;o)

Try the following code to fix your problems:

Code:

<HTML>

<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function submitQry()
{
    var the_string1 = document.frm1.textbox1.value;
    var the_string2 = document.frm1.textbox2.value;
	var output_string = '';

	if(document.frm1.cb1.checked)
	{
		output_string += '<B>String 1:</B>'
		output_string += the_string1;
	}

	if(document.frm1.cb2.checked)
	{
		if (output_string != '') output_string += '<BR>';
		output_string += '<B>String 2:</B>'
		output_string += the_string2;
	}

	if (output_string == '') output_string = 'No Data to display!!!';

	document.writeln(output_string);
}
//-->
</SCRIPT>
</HEAD>

<BODY TOPMARGIN=&quot;0&quot; LEFTMARGIN=&quot;0&quot;>
<FORM NAME=&quot;frm1&quot;>
<CENTER>

<TABLE BORDER=&quot;0&quot; CELLSPACING=&quot;2&quot; CELLPADDING=&quot;3&quot;>
	<TR>
		<TD ALIGN=&quot;left&quot;><FONT SIZE=&quot;2&quot;><B>CB1</B>
		<TD align=&quot;left&quot;><FONT SIZE=&quot;2&quot;><B>TEXTBOX_1</B>
	</TR>
	<TR>
		<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;cb1&quot; VALUE=&quot;ON&quot; CHECKED>
		<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;text&quot; NAME=&quot;textbox1&quot; SIZE=&quot;25&quot;>
	</TR>
	<TR>
		<TD ALIGN=&quot;left&quot;><FONT SIZE=&quot;2&quot;><B>CB2</B>
		<TD ALIGN=&quot;left&quot;><FONT SIZE=&quot;2&quot;><B>TEXTBOX_2</B>
	</TR>
	<TR>
		<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;checkbox&quot; NAME=&quot;cb2&quot; value=&quot;ON&quot; CHECKED>
		<TD ALIGN=&quot;left&quot;><INPUT TYPE=&quot;text&quot; NAME=&quot;textbox2&quot; SIZE=&quot;25&quot;>
	</TR>

	<TR>
		<TD COLSPAN=&quot;2&quot; ALIGN=left><INPUT TYPE=&quot;submit&quot; NAME=&quot;submitButton&quot; value=&quot;SUBMIT&quot; SIZE=&quot;15&quot; onClick=&quot;submitQry();&quot;>
	</TR>
</TABLE>
</CENTER>
</FORM>

</BODY>
</HTML>

Hope this helps!

Dan

stormbind · Dec 9, 2003

Keeping your document.write and clearing the page...

Code:

<script language=&quot;javascript&quot;>
<!-- hide me
function submitQry() {

if ((document.frm1.cb1.checked==true) || (document.frm1.cb2.checked==true)) {

var string1 = document.frm1.textbox1.value;
var string2 = document.frm1.textbox2.value;

document.write(&quot;<b>&quot;+string1+&quot;</b><br>&quot;);
document.write(&quot;<b>&quot;+string2+&quot;</b>&quot;);
    
} else {

document.write(&quot;No data&quot;);

}
}
// show me -->
</script>

----------
I'm willing to trade custom scripts for... [see profile]

Vem786 · Dec 9, 2003

Thanks Dan & Stormbind!!!

Dan I ran the code you modified & it works Excellent!!!

stormbind, the Logic that you said wont work because eventhough 1 condition is true both string1 & string2 gets displayed.

Thanks Again!!! You have been commendable.

BillyRayPreachersSon · Dec 9, 2003

Thanks... Sorry for not checking the code over as thoroughly as I should have done first time ;o)

Dan

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!

Javascript Help on Form Data Display

Vem786

Technical User

BabyJeffy

Programmer

BillyRayPreachersSon

Programmer

Vem786

Technical User

stormbind

Technical User

BillyRayPreachersSon

Programmer

stormbind

Technical User

Vem786

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor