Solved

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

Posted on 2014-03-26
10
1,074 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

759 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