php + javascript on selected option (displayed by php) a hidden textarea appears

hello what i have is a php file that display a select getting info from the database
but what iwould like is having a last <option value that on click on it dispays an hidden textarea

thanks for your help







<?php
require_once ("fonctions/connec.php");


function affiche_auteur (){
echo"<SELECT id='auteur' size='1' onchange='<script>change();</script>' >";

$query1 = "SELECT * FROM auteurs";
$result1 = mysql_query($query1) or die(mysql_error());
while($row = mysql_fetch_array($result1))
  {
   $id=$row['id'];
  echo"<OPTION value='.$id.'>";
  $nom=$row['nom'];
	echo $nom ;
	
}  
 echo"<OPTION value='nouveau' >un autre auteur";
// when this option value is selected i want the textarea name="txtReason" id="txtReason" to appear

echo"</select>";
	
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="fonctions/affiche.js"></script>
<title>ajoutez une citation</title>
</head>
<body>
<FORM method="post" action="ajout.php">

inscrivez ici la citation : <P>

<TEXTAREA name="texte" rows=10 COLS=40></TEXTAREA> <P>
auteur:<?php affiche_auteur();?>
<textarea name="txtReason" id="txtReason" style="display: none;" >essai</textarea>



</form></body></html>

Open in new window



inside the file fonctions/affiche.js

<script type='text/javascript'>
function change(){
if (this.options[this.selectedIndex].value=='nouveau'){this.form['txtReason'].style.display = 'block'};
}
</script>

Open in new window

explain.jpg
jerrrrryAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
soupBoyConnect With a Mentor Commented:
Here is a working example using your code.  I just hard coded the html (can't run your php obviously) and I place the files where your includes (for your style and script) should be placed...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>ajoutez une citation</title>
    <style>
    #txtReason {
        display: none;
    }
    </style>

</head>

<body>
    <FORM method="post" action="ajout.php">

        inscrivez ici la citation :
        <P>

            <TEXTAREA name="texte" rows=10 COLS=40></TEXTAREA>
            <P>
                <SELECT id='auteur' size='1'>
                    <option>test</option>
                    <option>test</option>
                    <option>test</option>
                    <option value='nouveau'>nouveau</option>
                </SELECT>

                <textarea id='txtReason' placeholder='Just a placeholder for the text area'></textarea>


    </form>
</body>
<script>
var theSelect = document.getElementById('auteur'),
    theTxtArea = document.getElementById('txtReason');

theSelect.onchange = function() {
    if (this.value == 'nouveau') {
        theTxtArea.style.display = 'block';
    } else {
        theTxtArea.style.display = 'none';
    }
}
</script>

</html>

Open in new window

0
 
soupBoyCommented:
Here is a jsfiddle I built that hides and shows a textarea based on option value using javascript.

Here is the code as well...
Demo HTML:
<select id="auteur">
    <option value="-1" selected>Select Somthing</option>
    <option value="nouveau">nouveau</option>
</select>

<textarea id="txtReason" placeholder="Just a placeholder for the text area"></textarea>

Open in new window

CSS:
#txtReason{
    display: none;
}

Open in new window

Javascript:
var theSelect = document.getElementById('auteur'),
    theTxtArea = document.getElementById('txtReason');

theSelect.onchange = function(){
    if(this.value == 'nouveau'){
        theTxtArea.style.display = 'block';
    }else{
        theTxtArea.style.display = 'none';
    }
};

Open in new window


Let me know if this wasn't what you were looking for and I'll take another stab at it.

- Chris
0
 
jerrrrryAuthor Commented:
is not working for me can u please check my try

<?php
require_once ("fonctions/connec.php");


function affiche_auteur (){
echo"<SELECT id='auteur' size='1'>";
echo"<option value='-1' selected>Select Somthing</option>";
$query1 = "SELECT * FROM auteurs";
$result1 = mysql_query($query1) or die(mysql_error());
while($row = mysql_fetch_array($result1))
  {
   $id=$row['id'];
  echo"<OPTION value='.$id.'>";
  $nom=$row['nom'];
	echo $nom ;
	
}  
echo" <option value='nouveau'>nouveau</option>";
echo"</select>";
 echo"<textarea id='txtReason' placeholder='Just a placeholder for the text area'></textarea>";



	
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="fonctions/affiche.js"></script>
<title>ajoutez une citation</title>
<LINK rel="stylesheet" type="text/css" href="fonctions/style.css">

</head>
<body>
<FORM method="post" action="ajout.php">

inscrivez ici la citation : <P>

<TEXTAREA name="texte" rows=10 COLS=40></TEXTAREA> <P>
auteur:<?php affiche_auteur();?>




</form></body></html>

Open in new window



fonctions/affiche.js


<script type='text/javascript'>
var theSelect = document.getElementById('auteur'),
    theTxtArea = document.getElementById('txtReason');

theSelect.onchange = function(){
    if(this.value == 'nouveau'){
        theTxtArea.style.display = 'block';
    }else{
        theTxtArea.style.display = 'none';
    }
</script>

Open in new window


thanks
citations--2-.zip
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
soupBoyCommented:
Try it with your '<script type="text/javascript" src="fonctions/affiche.js"></script>' tag at the bottom of the document....
0
 
jerrrrryAuthor Commented:
it doesn't work for now
0
 
soupBoyCommented:
Hmmm.....what isn't working?  Are you getting a javascript error?  Are you using the dev tools in the browser?  Saying it doesn't work makes it pretty hard to debug remotely...

Try removing the <script></script> tag from within the affiche.js file, they shouldn't be in there anyways...

- Chris
0
 
jerrrrryAuthor Commented:
nothing happens, i use firebug  it doesn't see the js
0
 
soupBoyCommented:
Also, in your affiche.js file you are missing your closing bracket to the onchange event.

you have:
theSelect.onchange = function(){
    if(this.value == 'nouveau'){
        theTxtArea.style.display = 'block';
    }else{
        theTxtArea.style.display = 'none';
    }

If should be:
theSelect.onchange = function(){
    if(this.value == 'nouveau'){
        theTxtArea.style.display = 'block';
    }else{
        theTxtArea.style.display = 'none';
    }
}
0
 
jerrrrryAuthor Commented:
ok i omiitted to close <option> now it works!
thanks
0
 
soupBoyCommented:
Right on :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.