Menu
I’m struggling with JavaScript, and I can’t seem to figure out this problem: In the code below, I want the user to type in a name in a text field and make selections from the checkboxes and dropdown. When they hit the Submit button, the generated text should show.
There are two problems here:
1.
The name value is repeated as many times as the number of checkboxes selected (ie if you select all three checkboxes, you’ll see the name value three times in the generated text)
The generated text only displays for an instant, before the page refreshes – if you click the back button in your browser, the generated text is there. This seems to be because of my use of the <form> tags, but I can’t figure out how to get the name value without using document.myForm.First.value which seems to require the use of <form> tags…
[CODE]<html>
<head>
<title>Text Generator</title>
<script type=”text/javascript”>
function GetMDDselections(ids) {
// document.getElementById(ids).size = 1; // reduce screen size if desired
var picked = ”;
for (i=0; i<document.getElementById(ids).options.length; i++) {
if (document.getElementById(ids).options[i].selected == true) { picked += i+’,’; }
} // document.getElementById(ids).selectedIndex = -1; // reset list
return picked;
}
function UpdateSign() {
var opts = GetMDDselections(‘SignOff’);
var opt_picked = new Array();
opt_picked = opts.split(‘,’);
var txt = ”; // txt = opts;
for (var i=0; i<opt_picked.length-1; i++) {
txt = ‘nn’+document.getElementById(‘SignOff’).options[opt_picked[i]].value;
}
return txt;
}
function UpdateStmt() {
var txt = UpdateSign(‘SignOff’);
for (var i=1; i<=3; i++) {
if (document.getElementById(‘Stmt’+i).checked == true) {
txt = “Dear “+document.myForm.First.value+”, “+document.getElementById(‘Stmt’+i).value+txt;
}
}
document.getElementById(‘TArea’).value = txt;
}
function Tgl(flag) {
if (flag == true) {
document.getElementById(‘divPick’).style.display = ‘none’;
document.getElementById(‘divTA’).style.display = ‘block’;
} else {
document.getElementById(‘divPick’).style.display = ‘block’;
document.getElementById(‘divTA’).style.display = ‘none’;
}
}
</script>
</head>
<body>
<div id=”divPick” style=”display:block”>
<form name=”myForm”>
First name of the person<br />
<input name=”First” type=”text” onChange=”UpdateStmt()” />
<br /><br /><br />
<input id=”Stmt1″ type=”checkbox” onChange=”UpdateStmt()” value=”Hello. “>Hello.<br />
<input id=”Stmt2″ type=”checkbox” onChange=”UpdateStmt()” value=”How are you? “>How are you?<br />
<input id=”Stmt3″ type=”checkbox” onChange=”UpdateStmt()” value=”The weather is great here. “>The weather is great here.<br />
<br /><br /><br />
Sign-off line<br/>
<select id=”SignOff” onChange=”UpdateStmt()” size=”1″>
<option value=””>- Select -</option>
<option value=”Sincerely,”> Sincerely</option>
<option value=”Yours truly,”> Yours truly</option>
</select>
<br />
<button id=”goBack” onClick=”Tgl(true);”>Submit</button>
</div>
<p />
<div id=”divTA” style=”display:none”>
<textarea id=”TArea” rows=”30″ cols=”70″ readonly></textarea>
<br />
<button id=”goBack” onClick=”Tgl(false);”>Make changes</button>
</div>
</form>
</body>
</html>
Example of the code above: [URL=”http://parkour.ca/textgenerator.html”]http://parkour.ca/textgenerator.html
Example that does what I want, except does not display the name value: [URL=”http://parkour.ca/textgenerator2.html”]http://parkour.ca/textgenerator2.html
I will also need to append a name to the end of the generated text, also from an input text field, so this is really bugging me. I tried to figure out how to get values from a selection of radio buttons on the same page, but I gave up on that after a few days, as I got nowhere with it. Any suggestions about any part of this, to help ease this frustration, would be greatly appreciated!
Edit: Also, for some reason the checkbox values end up in reverse order in the generated text – any clues as to what I screwed up there?