...

View Full Version : How to set text into a Span element from a function?



cesark
03-20-2004, 12:24 PM
I have been trying to set text into a span element when a user select the option 7 of a dropdownlist, and it doesn’ t run. I receive the error: 'null' is null or it isn’ t an object.

Here is the code:


function checkAct() {

var Activity = document.formName.userAct.value
var mySpan = document.getElementById("ast");
var myTD1 = document.getElementById("title");
var myTD2 = document.getElementById("inputField");

if (Activity == 7) {
mySpan.innerText = "*";
myTD1.innerText = "Type the Activity";
var whichAct = document.createElement("<INPUT TYPE='text' NAME='typeAct'>")
myTD2.insertBefore(whichAct);


} else {
mySpan.innerText = "";
myTD1.innerText = "";
myTD2.innerHTML = "";
}

}
checkAct();


The dropdownlist:


<form>
...
<td><asp:dropdownlist id="userAct" onChange="checkAct();" runat="server" ...></asp:dropdownlist></td>
...



And the span element where the asterisk would has to appear when the user selects 7:


<td class="letter4" id="title"><span class="asterisk1" id="ast"> </span> </td>
<td id="inputField"></td>


Thanks,
Cesar

Willy Duitt
03-20-2004, 04:14 PM
I'm sorry but your script doesn't make sense to me.
Try this. I believe this is what you are trying to do.

<script type="text/javascript">
<!--//
function chkOpt(which){
if(which.value == 7){
newText = '* Type the Activity ';
newText+= '<INPUT TYPE="text" NAME="typeAct">';
document.getElementById('S1').innerHTML = newText;
}
}
//-->
</script>
</HEAD>

<BODY>
<form name="F1">
<select onChange="chkOpt(this)">
<option value="">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select><br />
<span id="S1"></span>
</form>

.....Willy

cesark
03-20-2004, 06:03 PM
Your code is the same than mine, but you create the input text as text, but it isn' t text it is a form object (a form element).

I don' t want to put the text title and the input text into the span.. I want to put the title into one cell (<td></td>), one asterisk into the Span (because this asterisk is red 'class=ast3'), and the input text into another cell (<td></td>). So, something as I wrote.

The problem is that the asterisk doesn' t appear, only the title and the input text.

Willy Duitt
03-20-2004, 06:15 PM
Originally posted by cesark
Your code is the same than mine, but you create the input text as text, but it isn' t text it is a form object (a form element).

I don' t want to put the text title and the input text into the span.. I want to put the title into one cell (<td></td>), one asterisk into the Span (because this asterisk is red 'class=ast3'), and the input text into another cell (<td></td>). So, something as I wrote.

The problem is that the asterisk doesn' t appear, only the title and the input text.

What are you talking about?
I built a form element!

If you wish to position the asterick, the text and the input.
Build your data cells within the newText variable I provided.
Why do you want a bunch of empty data cells on your page. If you do it that way. You will run into problems with the empty cells collapsing and skewing the rest of your positioning.

If you insist on using empty data cells.
At least place a &amp;nbsp; in each one as the default value.

As for the rest of your problems. I can't run and test your codes because you have not provided enough information and I'm not inclined to build a table just to test your codes.

Good Luck;
.....Willy

cesark
03-20-2004, 06:29 PM
Empty cells can have problems ??

newText is a variable, and myTD1 is a variable, it is the same !...

And for you (document.createElement("<INPUT TYPE='text'...) it doesn' t make sense here? maybe yes, but at least try to explain why..

My code are very very clear, and of course it is not all the page.


Anyway thank you

Willy Duitt
03-20-2004, 07:26 PM
No, your codes are not very clear.

You are using innerText which is IE proprietary for two elements then swith to innerHTML for another and there is no reason to use the DOM to create a form element.

Additionally, if you hard coded the three elements into your document and changed the display property on page load and then again when the correct option was chosen, at least the element(s) would be available for those with javascript disabled.

eg:

<script type="text/javascript">
<!--//
function chkAct(which){
if(which.value != 7){
document.getElementById('S1').style.display = 'none';
}
else{
document.getElementById('S1').style.display = 'block';
}
}
//-->
</script>
</HEAD>

<BODY onload="chkAct(0)">
<form name="F1">
<select onChange="chkAct(this)">
<option value="">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select><br />
<span id="S1">
<td class="letter4" id="title">
<span class="asterisk1" id="ast">*</span></td>
<td id="inputField"><INPUT TYPE='text' NAME='typeAct'> Type the Activity</td>
</span>
</form>

.....Willy

cesark
03-22-2004, 05:09 PM
Thanks Willy.

If i put your last code alone runs fine, but when I put it into my aspx page it doesn't run, the input field, text and asterisk always appears and the function doesn't do anything.

Willy Duitt
03-22-2004, 05:46 PM
I do not have any experience with ASP and therefore can not really help you. I do know the ASP control appends (_ctrl_) to the form name, but I do not see how that would affect this script since it does not rely on the name. Perhaps ASP conflicts with javascript. Try using Jscript instead.

.....Willy

cesark
03-23-2004, 10:27 AM
I already have seen the problem, your function doesn' t run if the 'Select' element is in a table cell (<td></td>). Then, How I have to do it? Generally form elements are inside cells, isn' t it?

glenngv
03-23-2004, 10:58 AM
I don't see how the position of the select element affects the script posted by Willy. Can you post your code?

Form elements do not have to be necessarily inside the table cells. Actually, most experienced web developers don't use tables at all. They primarily use CSS to present the data in a flexible manner. But enough of that, that's another story.

cesark
03-23-2004, 12:27 PM
Here is the code:




<html>

<head>
<title></title>



<script type="text/javascript">
<!--//
function chkAct(which){
if(which.value != 7){
document.getElementById('S1').style.display = 'none';
}
else{
document.getElementById('S1').style.display = 'block';
}
}
//-->
</script>
</HEAD>




<BODY onLoad="chkAct(0)">

<form name="F1">
<table>
<td>
<select onChange="chkAct(this)">
<option value="">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select><br /></td>
<span id="S1">
<td id="title"><span class="ast" id="ast">*</span>&nbsp;Type the Activity:</td>
<td id="inputField"><INPUT TYPE='text' NAME='typeAct'></td>
</span>
</table>
</form>
</body>
</html>

glenngv
03-23-2004, 12:52 PM
Actually, the code doesn't work at all even if the select element is not inside the table cell. I didn't notice earlier that the span tag has <td> tags in it which is very wrong.



<html>
<head>
<title></title>
<script type="text/javascript">
<!--//
function chkAct(which){
if(which.options[which.selectedIndex].value != "7"){
document.getElementById('title').style.display = 'none';
document.getElementById('inputField').style.display = 'none';
}
else{
document.getElementById('title').style.display = 'inline';
document.getElementById('inputField').style.display = 'inline';
}
}
//-->
</script>
</HEAD>

<BODY onLoad="chkAct(document.F1.sel)">

<form name="F1">

<table>
<tr>
<td>
<select name="sel" onChange="chkAct(this)">
<option value="">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</td>
<td><span id="title"><span class="ast" id="ast">*</span> Type the Activity:</span></td>
<td><span id="inputField"><INPUT TYPE='text' NAME='typeAct'></span></td>
</tr>
</table>
</form>
</body>
</html>

cesark
03-23-2004, 01:37 PM
Ok, now runs fine :).
My first code exposed it comes of the advise of another person to do a similar thing, the original code proposed was:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form name="formUser">
<table width="176" height="77">
<tr>
<td width="168" height="28" id="numForms"></td>
</tr>
<tr>
<td width="168"><select name="userT" onChange="form1ofX()">
<option value="0">(Select)</option>
<option value="1">type 1</option>
<option value="2">type 2</option>
</select></td>
</tr>

</table>
</form>
</body>
</html>
<script language="JavaScript">
function form1ofX() {

var userType = document.formUser.userT.value
var myTD = document.getElementById("numForms");

switch(userType) {

case "0":
myTD.innerHTML = "";
break;

case "1":
myTD.innerHTML = "Form 1 of 3";
break;

case "2":
myTD.innerHTML = "Form 1 of 2";
break;

default:
break;

}
}
form1ofX();

</script>


It runs perfect and it seems a logical structure. But I didn’ know how to do more ‘complicate’ things like to add a different text appearance in front of another text format (for instance the red asterisk in my case exposed here). Anyway I suppose that this code isn’ t wrong, since you can define the ‘id’ in the table cells (<td id=”myTD”></td>) and this ‘id’ has some utility, isn’ t it?

cesark
03-23-2004, 01:59 PM
In fact, what happens with the (<body onLoad="">) content if I generate several form controls from several form controls?
Now I generate it from only one control (the Select), and then the body tag is (<body onLoad="chkAct(document.F1.sel)>"). But what happens if I generate more controls from aditional 'Select' (sel2, sel3 and sel4) with other functions as well?

glenngv
03-24-2004, 02:56 AM
Something like this?


<html>
<head>
<title></title>
<script type="text/javascript">
<!--//
function chkAct(which, targetValue){
var suffix = which.name.substring(which.name.length-1);
if(which.options[which.selectedIndex].value != targetValue){
document.getElementById('title'+suffix).style.display = 'none';
document.getElementById('inputField'+suffix).style.display = 'none';
}
else{
document.getElementById('title'+suffix).style.display = 'inline';
document.getElementById('inputField'+suffix).style.display = 'inline';
}
}

function init(){
chkAct(document.F1.sel1,'7');
chkAct(document.F1.sel2,'3');
chkAct(document.F1.sel3,'5');
}
//-->
</script>
</HEAD>

<BODY onLoad="init()">

<form name="F1">

<table>
<tr>
<td>
<select name="sel1" onChange="chkAct(this,'7')">
<option value="0">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</td>
<td><span id="title1"><span class="ast">*</span> Type the Activity 1:</span></td>
<td><span id="inputField1"><INPUT TYPE='text' NAME='typeAct1'></span></td>
</tr>
<tr>
<td>
<select name="sel2" onChange="chkAct(this,'3')">
<option value="0">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</td>
<td><span id="title2"><span class="ast">*</span> Type the Activity 2:</span></td>
<td><span id="inputField2"><INPUT TYPE='text' NAME='typeAct2'></span></td>
</tr>
<tr>
<td>
<select name="sel3" onChange="chkAct(this,'5')">
<option value="0">--- Choose an option ---</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
</td>
<td><span id="title3"><span class="ast">*</span> Type the Activity 3:</span></td>
<td><span id="inputField3"><INPUT TYPE='text' NAME='typeAct3'></span></td>
</tr>
</table>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum