www.webdeveloper.com
Results 1 to 3 of 3

Thread: displaying innerHTML of dropdown menu problem..

Hybrid View

  1. #1
    Join Date
    Jun 2011
    Posts
    29

    displaying innerHTML of dropdown menu problem..

    hello.. i will give u right away the code, and then explain u my problem..


    this is a part of the php code that concern us.. this code is about showing the showing the fields of a table in a dropdown menu..
    Code:
    echo <<< END_FORM2
    
    <h2 align="left">Modify Charts</h2>
    <hr />
    <form method="post">
    <textarea cols="40" id="put" rows="3" name="chart2"></textarea>
    <p>
    <label> Charts: </label><select name="charts_idd" onchange='returnValues()'>
    <option value="">Please Choose A Chart</option>
    END_FORM2;
    
    $sql='SELECT * from charts';
      @ $result = mysql_query($sql);
    	while ($row = mysql_fetch_array($result)){
    	echo "<option id='give' value=\"$row[charts_id]\">$row[charts_desc]</option>";}
    
    echo "</select><input type=\"submit\"value=\"Change It\" /></p></form>";
    }
    this is the javascript code. what im trying to do here is, when i choose something from the dropdown menu, i want the chosen option to be displayed in the textarea. this has to do with modifying the charts of a table called charts. so, u choose a chart from the dropdown menu, the chart u choose will be displayed in the textarea and then u can modify it and click on the change it value to be changed..

    Code:
    <script>
      function returnValues()
      {
      var values=document.getElementById('give').innerHTML;
      
      document.getElementById('put').innerHTML=values;
      }
      </script>
    my problem is that i have a mistake somewhere and each option i choose from the dropdown menu, it will always display the first option in the textarea..

    any solutions please? any help will be highly appreciated.. take a look at the photos below to understand what im trying to do..

    thank u in advance

    first.JPG second.JPG third.JPG fourth.JPG

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Each option must have an unique ID for it to work. Right now all your option elements are called "give" and document.getElementById() only returns the first one (because it only expects one to exist).

    However, it's probably better to skip the IDs all together and just use the name of the form and the select element:
    Code:
    <form method="post" name="chartForm">
    	<textarea cols="40" id="put" rows="3" name="chart2"></textarea>
    	<p>
    		<label>Charts:</label>
    		<select name="charts_idd" onchange="returnValues()">
    			<option value="">Please Choose A Chart</option>
    			<option value="0">Desc0</option>
    			<option value="1">Desc1</option>
    			<option value="2">Desc2</option>
    		</select>
    		<input type="submit" value="Change It" />
    	</p>
    </form>
    Code:
    <script>
    function returnValues()
    {
    	var selectElement = document.chartForm.charts_idd;
    	var values = selectElement.options[selectElement.selectedIndex].innerHTML;
    	document.chartForm.chart2.innerHTML = values;
    }
    </script>
    Last edited by ReFreezed; 12-08-2012 at 03:49 PM.

  3. #3
    Join Date
    Jun 2011
    Posts
    29
    thank you.. this totally works just better than great.. thank you..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles