SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple <DIV> and dynamic text?

    Hello,
    I have a series of select boxes, when an item is selected it puts the selected item into a text box without refeshing the page. I got the code working, but I would like to replace the text boxes with <div>selected text here</div>. I have tried the method here: http://www.cryer.co.uk/resources/javascript/script4.htm but it only works with one named item on the page.

    I hope the attached html code (generated by PHP) helps explain what I want to do.

    Essentally I want to replace
    <input type='text' size='25' maxlength='40' id='answer' name='answer[0]' value=""'>

    with
    <div id='myAnswer'></div>

    The problem may be here in the JS: document.getElementById('myAnswer').innerHTML = temp[1];

    But I can't work out how to identify an individual elementID, I tried this: <div id='myAnswer0'> and getElementById('myAnswer.id') and varieties of this with no sucess.

    Can anyone help? Thanks.

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript"><!--
    function frmSelect(id) {
    var ansCount = 0;
    
    box = document.forms[0].sel[id];
    ansGiven = box.options[box.selectedIndex].value;
    if (ansGiven) {
       temp = ansGiven.split('!');
       document.frmMenus.answerid[id].value = temp[0];
       document.frmMenus.answer[id].value = temp[1];
       document.getElementById('myAnswer').innerHTML = temp[1];
       }
    
    for (i = 0; i < document.frmMenus.answerid.length; i++){
      if (document.frmMenus.answerid[i].value !="") { 
         ansCount = ansCount+1; }
      }
        
    document.frmMenus.answered.value = ansCount;
    }
    
    //--></script>
    
    </head>
    <body>
    <form name='frmMenus' action='' method='post'>
    No. Answers: 
    <input type='text' size='5' maxlength='5' id='answered' name='answered' value=""'><br />
    <div><div id='myAnswer'></div><br />
    <input type='hidden' id='answerid' name='answerid[0]' value="">
    <input type='text' size='25' maxlength='40' id='answer' name='answer[0]' value=""'>
    <br />
    <select id='sel' name='sel[0]' onChange='frmSelect(0);'>
    <option value=''> -- Select One -- </option>
    <option value="0!chown">chown</option>
    <option value="1!make">make</option>
    <option value="2!peas">peas</option>
    <option value="3!mokfish">mokfish</option>
    <option value="4!turnip">turnip</option>
    </select></div><hr>
    <div><div id='myAnswer'></div><br />
    <input type='hidden' id='answerid' name='answerid[1]' value="">
    <input type='text' size='25' maxlength='40' id='answer' name='answer[1]' value=""'>
    <br />
    <select id='sel' name='sel[1]' onChange='frmSelect(1);'>
    <option value=''> -- Select One -- </option>
    <option value="0!mike">mike</option>
    <option value="1!cheese">cheese</option>
    <option value="2!beans">beans</option>
    <option value="3!pharts">pharts</option>
    <option value="4!fibre">fibre</option>
    </select></div><hr>
    <input type='submit' name='submit'>
    </form></body></html>

  2. #2
    SitePoint Enthusiast Zeldinha's Avatar
    Join Date
    Sep 2004
    Location
    Barcelona [Spain]
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if it's exactly what you are looking for. But I have a form with various boxes which have dynamic text. I made a function like this:

    Code:
    function divWrite( divName, divValue ) {
    	var div = document.getElementById( divName );
    	div.innerHTML = divValue;
    }
    And then, on the OnChange/etc event I call this function, with the name of the div I want to write in and the content. For example:

    Code:
    onFocus="divWrite('help','This is the help box');"
    Hope it helps,

    Z.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But I can't work out how to identify an individual elementID
    <div id='divA>some text</div>
    <div id="divB>other text</div>

    document.getElementById('divA') will obtain a reference to the 'divA' <div>, and
    document.getElementById('divB') will obtain a reference to the 'divB' <div>.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies,

    It turned out to be a case of putting the strings together.

    function frmSelect(id)
    ...
    var myAns = "myAnswer"+id;
    ...
    document.getElementById(myAns).innerHTML = temp[1];


    And the HTML (PHP):

    <span id='myAnswer".$i."'>&nbsp;</span>


Bookmarks

Posting Permissions

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