Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-03-26
10
Medium Priority
?
1,108 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

722 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