Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-03-26
10
Medium Priority
?
1,120 Views
Last Modified: 2014-03-26
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
0
Comment
Question by:jerrrrry
  • 6
  • 4
10 Comments
 
LVL 8

Expert Comment

by:soupBoy
ID: 39956331
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
 

Author Comment

by:jerrrrry
ID: 39957079
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
 
LVL 8

Expert Comment

by:soupBoy
ID: 39957135
Try it with your '<script type="text/javascript" src="fonctions/affiche.js"></script>' tag at the bottom of the document....
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:jerrrrry
ID: 39957242
it doesn't work for now
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 39957272
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
 

Author Comment

by:jerrrrry
ID: 39957285
nothing happens, i use firebug  it doesn't see the js
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 39957286
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
 
LVL 8

Accepted Solution

by:
soupBoy earned 2000 total points
ID: 39957292
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
 

Author Comment

by:jerrrrry
ID: 39957328
ok i omiitted to close <option> now it works!
thanks
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 39957338
Right on :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question