|
JavaScript - Text Field Clears When Adding Html To Div.
Hey guys, I have a script which adds more text fields to a div in a form, but when it adds a new field the text in the others is cleared. :S
http://martynleeball.goodluckwith.us/ PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Draw Somthing - Word Guess</title> <script type="text/javascript"> function add_field(obj, count) { //Count how many fields there is so the correct number can be added to the ID var form_name = document.getElementById(obj); var inputs = form_name.getElementsByTagName('input'); var g = 1; //alert("Container: " + obj + ". Inputs: " + inputs.length); for ( var i = 0; i < inputs.length; i++) { var node = inputs[i]; if (node.getAttribute('type') == 'text') { g++; } } //Field to add to the form if (!count) { if (g < 9) { var text_field_html = "<input type=\"text\" id=\"input" + g + "\" name=\"input" + g + "\" /><input type=\"button\" value=\"X\" onClick=\"remove_field(\'text_field_container\', this)\" id=\"close" + g + "\"/>"; form_name.innerHTML += text_field_html + "<br id=\"br_" + g + "\" />"; } } } function remove_field(parent_id, r_obj) { var parent = document.getElementById(parent_id); var child = document.getElementById(r_obj.id); var num = r_obj.id.charAt(r_obj.id.length-1); var child2 = document.getElementById('input' + num); var child3 = document.getElementById("br_" + num); parent.removeChild(child); parent.removeChild(child2); parent.removeChild(child3); } </script> </head> <body> <br /> <form id="add_words" action="test.php" method="post"> <div id="text_field_container"> <input type="text" id="input1" name="input1" /><input type="button" value="X" id="close1" onClick="remove_field('text_field_container', this)"/> <br id="br_1" /> </div> <input type="button" value="Add more..." onclick="add_field('text_field_container')" /> <input type="submit" value="Submit" onclick="" /> </form> </body> </html> Similar TutorialsHi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Hi. I'm trying to get my script below working. I've managed to get it to add fields dynamically but the remove function isn't right... and I can't think of a way round it. any ideas? also.. how can i incorporate a way for a limit on the number of fields that can be added? cheers! any help would be very appreciated. Code: <script type="text/javascript">
function addInput()
{
var x = document.getElementById("inputs");
x.innerHTML += "<input type=\"text\" />";
}
function removeInput()
{
var x = document.getElementById("inputs");
x.innerHTML -= "<input type=\"text\" />";
}
</script>
<input type="button" value="add field" onclick="addInput();" />
<input type="button" value="remove field" onclick="removeInput();" />
<div id="inputs"></div>
.. update: ah, i've just looked into the operators in more details and -= is just for numbers... so this won't work. i presume this is going to be the wrong method then. When you load www.reddit.com the searchbox contains the words "search reddit". Once it receives the focus by tabbing or clicking, the contents are cleared. However, there is no onfocus event, onclick event or any other script within the tag for this textbox. How is a textbox cleared without explicitly using an event?
Hello Everyone, I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks! Code: <form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)"> <p><b>First Name</b><br/> <INPUT TYPE="TEXT" NAME="name_first" size="40"></p> <p><b>Last Name</b><br/> <INPUT TYPE="TEXT" NAME="name_last" size="40"></p> <p><b>School Name</b><br/> <INPUT TYPE="TEXT" NAME="name_school" size="40"></p> <p><b>Your School E-Mail</b><font class="super">1</font><br/> <INPUT TYPE="TEXT" NAME="school_email" size="40"></p> <p><b>Your File</b><font class="super">4,5</font><br/> <input id="userfile1" name="userfile1" type="file" size="30"></p> <p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p> </form> Code: function validate_required_field(field,alertText) {
with (field) {
if (value==null||value=="") {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_email(field,alertText)
{
with (field) {
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) {
YAHOO.example.container.wait.hide();
alert(alertText);
return false;
}
else {
return true;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
name_first.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
name_last.focus();
return false
}
}
with (thisform) {
if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
name_school.focus();
return false
}
}
with (thisform) {
if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
school_email.focus();
return false
}
}
with (thisform) {
if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
school_email.focus();
return false
}
}
}
Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! Hi All, Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this: When I use the input type = button or submit, then the calculator works fine BUT I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads I have made the button line in bold. All help appreciated!! Many thanks Here is my code: <html> <head> <script language="JavaScript"> function Framesize(BikeSizer) { var a = parseFloat(BikeSizer.Insleg.value); b = (a * 0.572); c = Math.round(b); BikeSizer.FramesizeCM.value = c; d = (a * 0.226); e = Math.round(d); BikeSizer.FramesizeInch.value = e; } </script> </head> <body> <Form name="BikeSizer"> <!--The visuals for the graphic--> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td> </tr> </table> <table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;"> <tr> <td colspan="2" valign="middle" align="left"> <div style="padding:2px 5px 5px 12px;"> <font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font> <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div> </td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td> <td><select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select></td> </tr> <tr> <td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td> <td><input name="Insleg"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td> </td> <td><div style="padding:6px 0 8px 0;"> <input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)> </div></td> </tr> <tr> <td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td> <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> <strong>CM</strong> <br /><br /><input name = "FramesizeInch"> <strong>Zoll</strong> </td> </tr> </table> <table cellpadding="0" cellspacing="0" align="center" border="0" width="370"> <tr> <td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td> </tr> </table> </FORM> Ok, here is my issue. I want to have an input text on the top of the page that when I type in a series of numbers and hit submit, it populates the rest of the form. Does anyone have any idea what I need to perform this action?
Hi guys, I have this drag and drop script: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Drag and Drop Tutorial</title>
</head>
<body>
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
position: absolute;
}
</style>
<div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" >
<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
<pre id="debug"> </pre>
</div>
<script language="JavaScript" type="text/javascript">
<!--
function $(id){
return document.getElementById(id);
}
var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier
InitDragDrop();
function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e){
if (e == null)
e = window.event;
var target = e.target != null ? e.target : e.srcElement;
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') {
_startX = e.clientX;
_startY = e.clientY;
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;
_dragElement = target;
document.onmousemove = OnMouseMove;
document.body.focus();
document.onselectstart = function () { return false; };
target.ondragstart = function() { return false; };
return false;
}
}
function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function OnMouseMove(e)
{
if (e == null)
var e = window.event;
// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
}
function OnMouseUp(e)
{
if (_dragElement != null) {
_dragElement.style.zIndex = _oldZIndex;
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
// this is how we know we're not dragging
_dragElement = null;
}
}
</script>
</div>
</body>
</html>
Is there a way to drag and drop text field? Hi guys,I was thinking about the code to : write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white. I really like to know how we code that in javascript using functions, without any CSS or anything else. That means we have 2 objects a text box and a rectangle for feedback color. Remark: there is no button at all, the validation will be each time you are typing. A Bonus question : if someday we decide to change the color with pictures , is it possible to do that? Thank you very much for your help, much appreciate it. I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me. Code: <script type='text/javascript'>
function resizeIt()
{
document.getElementById('comment').style.height = 50px;
};
</script>
<input type='text' id='comment' class='urlTextArea' name='url' value=''
size='75' onfocus='resizeIt()'>
I have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working. This is the code I'm usign to populate the fields. Code: document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;
I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions? Dear All I have done some coding in javascript . Where i am generating the textbox field and checkbox dynamicaly . That is as per condition if there is one record match as per condition then that many text field will be generated So just to give a example , which is not dynamical What i want to do is first the text field are disable and when the checkbox is checked then the text box should be enable For 1 record the logic is working proper , but if there are more then 1 record then it does not work Can you'll please help <?php session_start();?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="../locationpropertydesirecom/css/adcss1.css" type="text/css" media="screen" /> <script language="JavaScript"> function enable_text(status) { status=!status; var e=document.getElementsByTagName("tr"); for(var i=0;i<e.length;i++) { e[i].disabled = status; } } </script> </head> <body> <table> <tr> <td><input type="text" id="aa" name="a" disabled="disabled"/></td> <td><input type="text" id="aa" name="b" disabled="disabled" /></td> <td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" /> </tr> <tr> <td><input type="text" name="a" disabled="disabled"/></td> <td><input type="text" name="b" disabled="disabled" /></td> <td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" /> </tr> </table> Thanks , regards Jim Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code: Code: <FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text" onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE=" C " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box? window.onload = initAll; function initAll() { document.getElementById("Message").onfocus = focusHandler; document.getElementById("Message").onblur = blurHandler; } function focusHandler() { document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>" } function blurHandler() { var helpMessage = document.getElementById("helpYou").innerHTML = ""; } function nameHandler(frm) { var theName = frm.firstName.value; } Quote: When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on. Hello, I am needing the coding to do the follow: When a user makes a selection from a dropdown, the value is placed in a text input. SELECT >>> INPUT Thank you so much for your help! [ICODE] <html> <head> <title>ABS</title> <?php $j="dove"; ?> <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { if (form.Name.value == "") { alert( "Please enter your email address." ); form.Game.value="<?php echo $j;?>"; form.Name.focus(); return false ; } if (form.Game.value == "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } if (document.form.Shame[0].value== "") { alert( "Please enter your game address." ); form.Game.focus(); return false ; } return true ; } </script> </head> <body> <form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);"> <input type="text" name="Name" /> <input type="text" name="Game" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input type="text" name="Shame[]" /> <input name="submit" type="submit"> </form> </body> </html> [icode] I need to use the array's shame and just check if the third one is not empty. I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array. I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript">
function detail1a(){
document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
}
function detail1b(){
document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
}
function detail1c(){
document.getElementById("detail1").innerHTML = "Lube Chassis";
}
function detail2a(){
document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
}
function detail2b(){
document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
}
function detail2c(){
document.getElementById("detail2").innerHTML = "Lube Chassis";
}
function detail3a(){
document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
}
function detail3b(){
document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
}
function detail3c(){
document.getElementById("detail3").innerHTML = "Lube Chassis";
}
</script>
Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
|||||||