dynamic field

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
akaballa
Forum Newbie
Posts: 3
Joined: Thu Jun 26, 2008 9:47 am

dynamic field

Post by akaballa »

Hi,

Im creating a php website form that requires some tweaks. Currently, i am working on coding a case where if the 'other' option in a drop down list is selected then a new textbox must appear instanteously on change. I was wondering how I can do this. I initially tried to do it though javascript but am not getting it. Is there a way to do it through php? Can someone please show me how I can do this? Here is my code that i did so far

<div id="organization" style="display:none;">
<p>
Organization <select name="organization" onchange = " if (this.text == 'Other')
{document.getElementById('otherOrgName').style.display = 'block';}
else{ document.getElementById('otherOrgName').style.display = 'none';} " >

<?php

while($row = mysql_fetch_array($org))
{
echo '<option value="org">'.$row['orgName'] . '</option';

}
?>
</select>
</p>
</div>

<div id = "otherOrgName" style="display:none;">
<p>
Organization Name <input type="text" name="otherOrgName">
</p>
</div>


Thanks!
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: dynamic field

Post by jayshields »

You could do it with PHP, but it would require an unnecessary page refresh. JavaScript is the ideal method.

Something like this:

Code: Select all

 
<script type="text/javascript">
  function toggleHiddenElement(theId)
  {
    if(document.getElementById("changer").value == 'other') {
    if (document.getElementById(theId).style.display == 'none') {
        document.getElementById(theId).style.display = '';
    } else {
        document.getElementById(theId).style.display = 'none';
    }
    }
  }
</script>
 
<select id="changer" onClick="toggleHiddenElement(\'whatever\')">
  <option value="x">x</option>
  <option value="y">y</option>
  <option value="other">other</option>
</select>
<input type="text" id="whatever" style="display: none;" />
Post Reply