So I have a 3 question "what profession are you quiz"... and after the text, radio and select are chosen and submitted, the results are to show next to them. The text and select do but not the radio. The select shows if I have the radios as, if ((php.checked==false) && (asp.checked==false) && (js.checked==false)){rad.setAttribute("style", "display:inline");} ... How my set up is now the text shows but the radio and select dont. Also I need to have an array that holds the solutions and once the answers get submitted, it randomly shows a solution, like "You are a Warrior!". And this is a .PHP extension. Heres my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){
var chk = true;
var mName = document.getElementById("txtMeth");
var meth = document.getElementById("methMess");
var rad = document.getElementById("radMess");
var sel = document.getElementById("selMess");
var php = document.getElementById("a");
var asp = document.getElementById("b");
var js = document.getElementById("c");
var arr = document.getElementById("imp");
mName.style.backgroundColor="#fff";
meth.setAttribute("style", "display:none");
rad.setAttribute("style", "display:none");
sel.setAttribute("style", "display:none");
if (mName.value=='no'){
document.getElementById("methMess").innerHTML = "No";
meth.setAttribute("style", "display:inline");
chk = false;
}
if (mName.value=='yes'){
document.getElementById("methMess").innerHTML = "Yes";
meth.setAttribute("style", "display:inline");
chk = false;
}
if (php.value==A){
document.getElementById("radMess").innerHTML = "Healer";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (asp.value==B){
document.getElementById("radMess").innerHTML = "Dark";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (js.value==C){
document.getElementById("radMess").innerHTML = "One with the Elements";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==1){
document.getElementById("selMess").innerHTML = "Rifle";
sel.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==2){
document.getElementById("selMess").innerHTML = "Bown and Arrow";
sel.setAttribute("style", "display:inline");
chk = false;
}
if (arr.value==3){
document.getElementById("selMess").innerHTML = "Daggers";
sel.setAttribute("style", "display:inline");
chk = false;
}
}
</script>
</head>
<body>
<div class="page">
<main role="main">
<article>
<div id="errMess" class="errMess">*Required Fields Missing</div>
<h1>What Guild Wars 2 Profession Are You</h1>
<div class="cssTable" style="margin-top:-25px;">
<form method="post">
<table>
<tr><td colspan="3"></td></tr>
<tr>
<td><div align="right">Do you like to do high damage?</div></td><td width="217">
<input id="txtMeth" name="txtMeth" type="text" size="25"></td><td ><div id="methMess" style="display:none"></div></td></tr>
<tr>
<td><div align="right">What best describes you?</div></td><td>
<input id="a" type="radio" name = "group1" value="A">Healer</input>
<input id="b" type="radio" name = "group1" value="B">Dark</input>
<input id="c" type="radio" name = "group1" value="C">Earthling</input>
</td><td><div id="radMess" style="display:none"></div></td>
</tr>
<tr>
<td>What weapon would you like to have?</td>
<td>
<select id="imp"><option value="0" selected="true">Select One</option>
<option value="1">Rifle</option>
<option value="2">Bow and Arrow</option>
<option value="3">Daggers</option></select>
</td><td><div id="selMess" style="display:none"></div></td>
</tr>
<tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()"/></td></tr></table></form></div></article>
</main></div>
</body>
</html>
It is like this that your radio buttons will always have the values 'A', 'B' or 'C', it is simply how you define them in your HTML.
A radiobutton should be checked for active by using the '.checked' property rather than over a value.
Please see the js fiddle here
and the changes i made to your code are:
I updated your if's
if (php.checked) {
document.getElementById("radMess").innerHTML = "Healer";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (asp.checked) {
document.getElementById("radMess").innerHTML = "Dark";
rad.setAttribute("style", "display:inline");
chk = false;
}
if (js.checked) {
document.getElementById("radMess").innerHTML = "One with the Elements";
rad.setAttribute("style", "display:inline");
chk = false;
}
So... I had to rename everything because I kept getting confused. Do not just turn this in or copy it exactly... your teacher will probably know you didn't do it.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">
<style>td { height:25px }</style>
<script>
function checkForm() {
var high = document.getElementById('high'); // mName
var desc = document.getElementsByName('desc'); // group1
var weapon = document.getElementById('weapon'); // imp
// console.log(high);
// console.log(desc);
// console.log(weapon);
// get the checked radio button value to be used later
var desc_value;
for(var i=0; i<desc.length; i++){
if (desc[i].checked) desc_value = desc[i].value;
}
var error = false;
if (!high.value) {
// if you need to do validation for Yes/No, do it here
document.getElementById('errMess').innerHTML = 'high damage missing';
error = true;
}
else if (!desc_value) {
document.getElementById('errMess').innerHTML = 'desc missing';
error = true;
}
else if (!weapon.value) {
document.getElementById('errMess').innerHTML = 'weapon missing';
error = true;
}
if (!error) {
document.getElementById('errMess').innerHTML = '';
// do you like to do high damage?
high.style.background = '#fff';
high.style.display = 'none';
var highMess = document.getElementById('highMess');
highMess.innerHTML = high.value;
highMess.setAttribute('style', 'display:inline');
// what best describes you?
var desc_val;
var desc_msg = document.getElementById('descMsg');
desc_msg.setAttribute('style', 'display:inline');
desc_msg.innerHTML = desc_value;
for(var i=0; i<desc.length; i++){
// loop through the radio button group to hide the parent <span>
desc[i].parentNode.setAttribute('style', 'display:none');
}
// what weapon would you like to have?
weapon.style.display = 'none';
var weapon_val = weapon.options[weapon.selectedIndex].value;
var weapon_msg = document.getElementById('weaponMsg');
weapon_msg.innerHTML = weapon_val;
weapon_msg.setAttribute('style', 'display:inline');
}
}
</script>
</head>
<!-- this sets the selected option to being out of range (aka blank/empty) -->
<body onload="document.getElementById('weapon').selectedIndex = -1;">
<div class="page">
<main role='main'>
<article>
<div id='errMess' class='errMess' style='font-weight:bold; height:26px'></div>
<h1>What Guild Wars 2 profession are you.....?</h1>
<div class='cssTable' style='margin-top:-25px;'>
<form method='post'>
<table>
<tr><td colspan='3'></td></tr>
<tr>
<td><div align='right'>Do you like to do high damage?</div></td>
<td width='217px'><input id='high' name='high' type='text' size='25'/></td>
<td><div id='highMess' style='display:none'></div></td>
</tr>
<tr>
<td><div align='right'>What best describes you?</div></td>
<td>
<!-- i added spans outside of the <input/> so you could hide the text easily, too -->
<span><input id='healer' type='radio' name='desc' value='healer'>Healer</input></span>
<span><input id='dark' type='radio' name='desc' value='dark'>Dark</input></span>
<span><input id='earthling' type='radio' name='desc' value='earthling'>Earthling</input></span>
</td>
<td><div id='descMsg' style='display:none'></div></td>
</tr>
<tr>
<td>What weapon would you like to have?</td>
<td>
<select id='weapon' name='weapon'>
<option value='rifle'>Rifle</option>
<option value='bow_arrow'>Bow and Arrow</option>
<option value='daggers'>Daggers</option>
</select>
</td>
<td><div id='weaponMsg' style='display:none'></div></td>
</tr>
<tr>
<td colspan='3' align='right'><input type='button' class='styled-button-7' onClick='checkForm()' value='Submit'/></td>
</tr>
</table>
</form>
</div>
</div>
</article>
</main>
</body>
</html>
Related
I need it to display green if question 1 is "1", or question 2 is "4". Red otherwise when mark quiz is called. Where am I going wrong with this code? js is located in an external file.
Html:
<body>
<table>
<tr>
<th>Questions</th>
<th>Answer</th>
</tr>
<tr>
<td id="1">
Water is
<ol>
<li> Wet</li>
<li> Ordinary</li>
<li>Purify </li>
<li> Water</li>
</ol>
</td>
<td>
<form name="question1" action="www.quizMarker.ca">
<input type="text" name="quest1" placeholder="Enter Answer">
</form>
</td>
</tr>
<tr>
<td id="2">
Fire is
<ol>
<li> Wet</li>
<li> Ordinary</li>
<li>Purify </li>
<li> Hot</li>
</ol>
</td>
<td>
<form name="question2" ction="www.quizMarker.ca">
<input type="text" name="quest1" placeholder="Enter Answer">
</form>
</td>
</tr>
</table>
<button type="button" onclick="markQuiz()">Mark Quiz</button>
js:
function markQuiz()
{
var q1 = document.forms['question1'];
var q1Ans = q1.elements['quest1'].value;
var q2 = document.forms['question2'];
var q2Ans = q2.elements['quest2'].value;
var row1 = document.getElementById("1");
var row2 = document.getElementById("2");
if(q1Ans = "1")
{
row1.style.backgroundColor = "green";
}
else()
{
row1.style.backgroundColor = "red";
}
if(q2Ans = "4")
{
row2.style.backgroundColor = "green";
}
else()
{
row2.style.backgroundColor = "red";
}
}
Right now markQuiz is not doing anything when called. Also if there is a simpler way to accomplish this task, suggestions would be helpful.
you may need "==" or "===" instead of "=", which mean assign.
if(a = "1") {
//code here always execute
}
if(a === "1") {
//code here only execute when a is String with value "1"
}
there is an extra = symbol in your code
if(q1Ans = "1")
{
row1.style.backgroundColor = "green";
}
correct syntax is:
if(q1Ans == "1")
{
row1.style.backgroundColor = "green";
}
Please check the changes i made
function markQuiz()
{
var q1Ans = document.forms['question1'].quest1.value;
var q1Ans = document.forms['question2'].quest2.value;
// PLease change the ids of the td ttag
var row1 = document.getElementById("table1");
var row2 = document.getElementById("table2");
if(q1Ans === "1")
{
row1.style.backgroundColor = "green";
}
else
{
row1.style.backgroundColor = "red";
}
if(q2Ans === "4")
{
row2.style.backgroundColor = "green";
}
else
{
row2.style.backgroundColor = "red";
}
}
I'm very new to Javascript and this website, but I'm looking for help on a project of mine.
It's a little rough so far and not complete, but I can't move on until I figure out how to actually get the computations to show up. If I could get help figuring out why the first apple total isn't computing, that would be great!
Here's my full (work in progress) html page:
<html>
<head>
<title>Order Form</title>
<style>
.inBox { width:60px; text-align:right; border: 1px solid green; }
.thWide { width:80px; text-align:right; }
</style>
<script type="text/javascript">
function compute()
{
// Pointers to red asterisks
var spnA = document.getElementById("spnA");
var spnP = document.getElementById("spnP");
var spnG = document.getElementById("spnG");
// Assume no errors yet
var message = "";
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
var apple = form1.txtA.value;
if (apple == "")
apple = 1;
else
apple = parseFloat(apple);
if ( isNaN(apple) )
{
spnA.style.display = "inline";
message = message + "Apple is bad\n";
form1.txtA.select();
}
var pear = form1.txtP.value;
if (pear == "")
pear = 1;
else
pear = parseFloat(pear);
if ( isNaN(pear) )
{
spnP.style.display = "inline";
message = message + "Pear is bad\n";
form1.txtP.select();
}
var grape = form1.txtG.value;
if (grape == "")
grape = 1;
else
grape = parseFloat(grape);
if ( isNaN(grape) )
{
spnG.style.display = "inline";
message = message + "Grape is bad\n";
form1.txtG.select();
}
if ( message != "" )
{
// Show error and clear subA
alert(message);
form1.txtsubA.value = "";
}
else
{
// Compute subA
var subA = length * 5.49;
form1.txtsubA.value = subA;
form1.txtA.select();
}
}
</script>
</head>
<body>
<form id="form1">
<table border="2">
<tr><th colspan="4">Volume Box</th></tr>
<tr><th>Quantity</th><th>Item</th><th>Unit Prics</th><th>Totals</th></tr>
<tr>
<th class="thWide">
<span id="spnA" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtA" class="inBox" tabindex="1" autofocus />
</th><td>Apples</td><td>$5.49</td>
<th style="width:80px;"><input type="text" id="txtsubA" class="inBox" readonly /></th>
</tr><tr>
<th class="thWide">
<span id="spnP" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtP" class="inBox" tabindex="1" autofocus />
</th><td>Pears</td><td>$6.49</td>
<th style="width:80px;"><input type="text" id="txtsubP" class="inBox" readonly /></th>
</tr><tr>
<th class="thWide">
<span id="spnG" style="color:red; font-weight:bold; display:none;">*</span>
<input type="text" id="txtG" class="inBox" tabindex="1" autofocus />
</th><td>Grapes</td><td>$7.49</td>
<th style="width:80px;"><input type="text" id="txtsubG" class="inBox" readonly /></th>
</tr>
<tr><th colspan="4">
<input type="button" value="Compute" onclick="compute();" tabindex="4" />
</th></tr>
</table>
</form>
</body>
</html>
The console in your browser can be very helpful in diagnosing any problems. For example, your code gives this error in the console:
test.html:18 Uncaught ReferenceError: spnL is not defined
I assume you meant for this part:
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
to be:
spnA.style.display = "none";
spnP.style.display = "none";
spnG.style.display = "none";
As for your problem, the issue is in this part:
// Compute subA
var subA = length * 5.49;
Length isn't defined anywhere, you probably mean:
// Compute subA
var subA = apple * 5.49;
And then you will also probably want to change the line after that from
form1.txtsubA.value = subA;
to
form1.txtsubA.value = subA.toFixed(2);
which will only show 2 decimal places.
Get rid of (or comment out):
spnL.style.display = "none";
spnW.style.display = "none";
spnH.style.display = "none";
Collect the values provided in the form (add ".value"):
// Pointers to red asterisks
var spnA = document.getElementById("txtA").value;
var spnP = document.getElementById("txtP").value;
var spnG = document.getElementById("txtG").value;
Swap length for declared values:
// Compute subA
var subA = spnA * 5.49;
And enjoy!
I am having trouble displaying the results on my form under the questions. I thought I had it right. Also I need to create an Array that will hold the answers, which it will randomly pick one, doesnt have to go by the answers. I can't figure out how to display the results on the same page (I have looked and had no luck) Could anyone help me
<!doctype html>
<html>
<?php
include "menu.html"
?>
<head>
<meta charset="UTF-8">
<title>Form</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){
var chk = true;
var Name = document.getElementById("txt");
var methd= document.getElementById("method");
var rad1= document.getElementById("radM");
var sel= document.getElementById("selM");
var necro = document.getElementById("a");
var guard = document.getElementById("b");
var ele = document.getElementById("c");
var shatter = document.getElementById("imp");
var cor = 0;
Name.style.backgroundColor="#fff";
methd.setAttribute("style", "display:none");
rad1.setAttribute("style", "display:none");
sel.setAttribute("style", "display:none");
if (Name.value==''){
Name.style.backgroundColor = "red";
methd.setAttribute("style", "display:inline");
chk = false;
}
if ((necro.checked==false) && (guard.checked==false) && (ele.checked==false)){
rad1.setAttribute("style", "display:inline");
}
if (shatter.value==0){
selM.setAttribute("style", "display:inline");
}
if (chk==false){
document.getElementById("error").setAttribute("style", "display:inline");
} else {
if (Name.value=="no"){
document.getElementById(txt).innerHTML += 'No';}
if (Name.value=="yes"){
document.getElementById(txt).innerHTML += 'Yes';}
if (ele.checked == true){
document.getElementById(c).innerHTML += 'Elementalist';}
if (necro.checked == true){
document.getElementById(a) += 'Necromancer';}
if (guard.checked == true){
document.getElementById(b) +='Guardian';}
if (shatter.value==1){
document.getElementById(imp) += 'Shatter';
}
if (shatter.value==2){
document.getElementById(imp) += 'Sunless';
}
if (shatter.value==3){
document.getElementById(imp) += 'Claw';
}
style.display = "inline";
innerHTML = "<span>You chose " + imp + txt + " correct!</span>";
}
}
</script>
</head>
<body>
<div class="page">
<article>
<div id="error" class="error"></div>
<h1>What Guild Wars 2 Profession Are You</h1>
<div class="cssTable" style="margin-top:-25px;">
<form method="post" action="thankyou.php" >
<table>
<tr><td colspan="3"></td></tr>
<tr>
<td><div align="right">In Guild Wars 2 Do You Like To Do Damage? </div> </td><td width="217"><input id="txt" name="txt" type="text" size="25"> <br/></td><td><div id="method" style="display:none"><img height="25px" src="purple.png" ></div></td><br/></tr>
<tr>
<td><div align="right">What Best Describes You?</div></td><td>
<input id="a" type="radio" name = "group1" value="A">Healer</input><br/>
<input id="b" type="radio" name = "group1" value="B">One With The Elements</input><br/>
<input id="c" type="radio" name = "group1" value="C">Darkness</input>
</td><td><div id="radM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr>
<td>What One Skill Would You Like To Have?</td>
<td>
<select id="imp"><option value="0" selected="true">Pick A Skill</option>
<option value="1">Stealth</option>
<option value="2">Summon Illusions</option>
<option value="3">Great With A Bow and Arrow</option></select>
</td><td><div id="selM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()" /><span id="grde" style="padding-left:25px"> </span></td></tr></table></form></div></article>
</main></div>
</body>
</html>
I moved your call to checkForm() from an onclick on a button to the onsubmit of the form, and started returning chk from checkForm(). You should go through your checkForm() function and start making it work field by field. There are properties that you're trying to access incorrectly.
You can see it at:
http://jsbin.com/homeq/1/
I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help!
I am fairly new to Javascript and HTML so could you explain it, thank you
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
and here is a jsfiddle
Change:
var inputs = document.getElementsByName('Exam_Type');
to
var inputs = document.getElementsByName('examtype');
It seems you picked the wrong name for the radio elements.
Your for loop was checking the radio buttons incorrectly.
Code:
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
Please find the working fiddle here http://jsfiddle.net/sDLV4/2/
I changed code here please check...
Please find the working fiddle here
http ://jsfiddle.net/sDLV4/3/
Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:
Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.
In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.
For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>
I am developing this for use in Internet Explorer 8 (because at work we have to use it). I have a page that has a table withing a form. The table has a button to "clone" rows, "AddScheduleRow()". That part works good. Each row has a button to delete that row "DeleteRow(r)". That part works well too. I also have a script to rename/renumber each row, "RenumberRows()". It almost works good. I can rename the text fields (for example what was previously StartDate3 now becomes StartDate2). However, in each row is an input that is type="image" and it is named like you should with any input. The name of it is "StartDateCal". The problem is that during the renaming process, when it hits the image input (TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;), I get a JavaScript error "'TheForm.StartDateCal' is null or not an object". I cannot figure this one out and it's standing in the way of moving on.
What can I do to try to rename an < input type = image /> ?
Below is the necessary code:
HTML
<html>
<head>
</head>
<body>
<form name="UpdateSchedule" method="post" action="DoSchedule.asp">
<input type="hidden" name="NumRows" value="0">
<input type="hidden" name="RowsAdded" value="0">
<table id="ClassScheduleTable">
<tr id="ScheduleRow" style="display:none;">
<td>
<input type="text" name="RowNum" value="0" size="1" onclick="alert(this.name)">
</td>
<td>
<b>Start Date</b> <input type="text" name="StartDate" value="" onclick="alert(this.name);" size="8">
<input type="image" name="StartDateCal" src="http://www.CumminsNorthwest.com/ATT/Img/Calendar3.png" style="border-style:none;" onClick="alert('name = ' + this.name);return false;">
</td>
<td>
<input type="button" value="Del." name="DelRow" class="subbuttonb" onclick="DeleteRow(this);">
</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">
<input type="button" value="Add Class Date" class="SubButton" onclick="AddScheduleRow();">
</td>
</tr>
</table>
</form>
</body>
<script language="JavaScript">
JS
var TheForm = document.forms.UpdateSchedule;
var NumRows =0;
var RowsAdded =0;
function AddScheduleRow(){
NumRows++;
TheForm.NumRows.value = NumRows;
RowsAdded++;
TheForm.RowsAdded.value = RowsAdded;
var TableRowId = "ScheduleRow";
var RowToClone = document.getElementById(TableRowId);
var NewTableRow = RowToClone.cloneNode(true);
NewTableRow.id = TableRowId + NumRows ;
NewTableRow.style.display = "table-row";
var NewField = NewTableRow.children;
for (var i=0;i<NewField.length;i++){
var TheInputFields = NewField[i].children;
for (var x=0;x<TheInputFields.length;x++){
var InputName = TheInputFields[x].name;
if (InputName){
TheInputFields[x].name = InputName + NumRows;
//alert(TheInputFields[x].name);
}
var InputId = TheInputFields[x].id;
if (InputId){
TheInputFields[x].id = InputId + NumRows;
//alert(TheInputFields[x].id);
}
}
}
var insertHere = document.getElementById(TableRowId);
insertHere.parentNode.insertBefore(NewTableRow,insertHere);
RenumberRows();
}
AddScheduleRow();
function DeleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById("ClassScheduleTable").deleteRow(i);
NumRows--;
TheForm.NumRows.value = NumRows;
RenumberRows();
}
function RenumberRows(){
var TempCounter = 0;
for (var i=0;i<=RowsAdded;i++){
if (TheForm.RowNum[i]){
TempCounter++;
TheForm.RowNum[i].name = "RowNum" + TempCounter;
TheForm.RowNum[i].value = TempCounter;
TheForm.StartDate[i].name = "StartDate" + TempCounter;
TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;
}
}
}
</script>
</html>
might be to do with your DTD,
try HTML4 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You can use
document.getElementsByName('StartDateCal')[i].name = "StartDateCal" + TempCounter;
instead of
TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;