Solved

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

Posted on 2014-03-26
10
1,094 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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 500 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

627 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