Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to set text into a Span element from a function?

    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:
    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:
    Code:
    <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:
    Code:
    <td class="letter4" id="title"><span class="asterisk1" id="ast"> </span> </td>
    <td id="inputField"></td>
    Thanks,
    Cesar

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry but your script doesn't make sense to me.
    Try this. I believe this is what you are trying to do.
    Code:
    <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

  • #3
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.

  • #11
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code:


    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>

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.

    Code:
    <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>

  • #13
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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?

  • #14
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Something like this?
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •