How to display text on click using jquery or ajax?

Question

I am new in php. I have a code in which i use HTML``select tag. Now i want to display text below when user click on select tag ptions

my select tag code is

<select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select>

my page result is

Please help me how i can display text on click?

I tried to solve by problem by this example of W3school

MY FULL PAGE CODE IS

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "pacra1";


$conn = new mysqli($servername, $username, $password, $dbname);
//$id2 = $_GET['id'];
$sql= "SELECT r.client_id,c.id,t.id,a.id,o.id,c.name as cname,t.title as ttitle,a.title as atitle,o.title as otitle, l.title as ltitle, s.title as stitle, co.fname, co.mname, co.lname, co.designation, co.city
FROM og_ratings r 
LEFT JOIN og_companies c
ON r.client_id = c.id
LEFT JOIN og_rating_types t
ON r.rating_type_id = t.id
LEFT JOIN og_actions a
ON r.pacra_action = a.id
LEFT JOIN og_outlooks o
ON r.pacra_outlook = o.id
LEFT JOIN og_lterms l
ON r.pacra_lterm = l.id
LEFT JOIN og_sterms s
ON r.pacra_sterm = s.id
LEFT JOIN   companies_contact co
ON c.id = co.companies_id
WHERE r.client_id= 20
ORDER BY r.id DESC
LIMIT 1";


$sql1= "SELECT r.client_id,c.id,t.id,a.id,o.id,c.name as cname,t.title as ttitle,a.title as atitle,o.title as otitle, l.title as ltitle, s.title as stitle
FROM og_ratings r 
LEFT JOIN og_companies c
ON r.client_id = c.id
LEFT JOIN og_rating_types t
ON r.rating_type_id = t.id
LEFT JOIN og_actions a
ON r.pacra_action = a.id
LEFT JOIN og_outlooks o
ON r.pacra_outlook = o.id
LEFT JOIN og_lterms l
ON r.pacra_lterm = l.id
LEFT JOIN og_sterms s
ON r.pacra_sterm = s.id
WHERE c.id= 20
ORDER BY r.id DESC
LIMIT 1,1";

$result = $conn->query($sql);

$result1 = $conn->query($sql1);
//$array = array('1','2','3');

while ($row = $result->fetch_assoc()){
    while ($row1 = $result1->fetch_assoc()){

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Notification Letter.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />


    <style>
a:link {
    text-decoration: black;
}

a:visited {
    text-decoration: black;
}

a:hover {
    text-decoration: none;
}


</style>
</head>
<body link="#000000">

    <div style=" margin-left:auto; margin-right:auto; width: 60%">
    <div style="margin-top: 10px; width: 800px; font-family: 'Times New Roman', Times, serif;">
    <div style=" margin:auto; width:60px; height:auto; align: middle">
    <img src="image/pacra_logo.png" alt="logo">
    </div>
    <div style="margin:auto; width:auto; text-align:center; font-family:'Times New Roman', Times, serif; font-variant: small-caps; font-size:20px; font-weight:bold">
    The Pakistan Credit Rating Agency Limited 
    <hr>
    </div>
    </div>
    <form action="test1.php" method="POST">
    <div style="margin-top: 10px; width: auto">

 <div style="width: auto; float:" contenteditable="true"> <input type="text" name="nl" id="nl" value="NL FY 15" readonly /> </div>

 <div style=" margin-top:10px; width:280px; float:left; font-family:'Times New Roman', Times, serif; text-align:left; font-size:14px" contenteditable="true" align="center">
 <input type="text" name="to_name" value="<?php echo $row['fname']?> <?php echo $row['mname']?> <?php echo $row['lname']?>" readonly/> <br> <input type="text" name="to_designation" value="<?php echo $row['designation']?>" readonly/> <br> <input type="text" name="company" value="<?php echo $row['cname'] ?>" readonly/> <br> <input type="text" name="address" value="<?php echo $row['city'] ?>" readonly/></div>

 <div style=" margin-top:10px; margin-left:300px; width:auto; float:left; font-family:'Times New Roman', Times, serif; text-align:right; font-size:14px" contenteditable="true" align="center" ><input type="text" name="confidential" value="Confidential" readonly/><br><input type="date" /></div>

 <div style="margin-top: 110px; width:auto" align="center">
 <input type="text" name="company" value="<?php echo $row['cname'] ?>" width="500px" readonly/>
 </br>
 <table> <tr> <td> <input type="text" name="er" value="Entity Ratings - " readonly/> 
 <select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select></td></tr></table>
 </div>
 </div>
 <div style="margin-top: 10px; width: auto" >
 <div style="margin-top:10px; width:auto">
 <input type="text" name="dear_sir" value="Dear <?php echo $row['fname']?> <?php echo $row['lname']?>"/>
 </div>
 </div>


 <div>
<!------------------------- HERE I WANT TO DISPLAY MY TEXT---------------------------> 

 </div>


  <div style="margin-top: 70px; width: auto" align="center">
 <div style="width:auto; margin-top:10px"> 
 <table border="1">
        <tr>
            <td> ID </td>
            <td> <?php echo $row['client_id'] ?> </td>
        </tr>

        <tr> 
            <td>Name </td>
            <td><?php echo $row['cname'] ?> </td>
        </tr>

        <tr>
            <td>Rating Type </td>
            <td><?php echo $row['ttitle'] ?> </td>
        </tr>
        <tr>
            <td>Action </td>
            <td><?php echo $row['atitle'] ?> </td>
        </tr>
        <tr>
            <td>Outlook </td>
            <td><?php echo $row['otitle'] ?></td>
        </tr>
        <tr>
            <td rowspan="2">Long Term Rating </td>
            <td>Current (<?php echo $row['ltitle'] ?>) <tr><td>Previous (<?php echo $row1['ltitle'] ?>)</td> </tr></td>
        </tr>

        <tr>
            <td rowspan="2">Short Term Rating </td>
            <td>Current (<?php echo $row['stitle'] ?>) <tr><td>Previous (<?php echo $row1['stitle'] ?>)</td> </tr></td>
        </tr>


</table>
 </div>

 <div style="width:auto"> 

 </div>
 </div>
 <div style="margin-top:10px; width:auto">
 <input type="text" name="y_truly" value="Yours truly" readonly/>
 </div>
 <div style="margin-top:10px; width:450px">
 <select name="s_name">
  <option value="shahzad">Muhammad Shahzad Saleem</option>
  <option value="hanif">Jhangeer Hanif</option>
  <option value="rana">Rana Nadeem</option>
  </select>

   <br>
   <select name="s_designation">
  <option value="coo">Chief Operating Officer</option>
  <option value="uh">Unit Head</option>
   </select>
  </div>
 <div style="margin-top:10px; width:auto">
 <input type="checkbox" name="chk" value="p_release" checked> Encl: 1) Press Release<br>
  <!--<input type="checkbox" name="chk1" value="p_release" checked> Encl: 1) Press Release<br> -->
  <input type="checkbox" name="chk2" value="r_report"> 2) Rating Report<br>

 </div>


    <div style="margin-top:10px">
    <input type="submit" name="submit" value="Submit">
    <input type="submit" name="submit" value="Save">
    </div>

    </form>

<div style="clear: both;"></div>

    <div style="margin-top:30px; width:800px; float:left; text-align:center; font-family:'Times New Roman', Times, serif; font-size:18px;">
    <hr>
 <strong>Awami Complex FB-1, Usman Block, New Garden Town, Lahore-54600, Pakistan</strong>  
 </br>PABX: 92(42)35869504 Fax: 92(42)35830425 Email: [email protected] 
 </br><a href="http://www.pacra.com/">www.pacra.com</a>
    </div>
    </div>

    </div>

    </body>
</html>


<?php
    }
}
?>

Have you tried something? Showing something on click is a common thing, and there are plenty of tutorials out there, secondly, how is this related to php? — Epodax
– Epodax, Commented Aug 6, 2015 at 12:41
Just because you use php in your code does not mean that your question is related to PHP :) Only use tags where the tags are relevant for the question :) — Epodax
– Epodax, Commented Aug 6, 2015 at 12:44
As @Epodax said, this not php-related: you can do this in JavaScript/jQuery. — user5192753
– user5192753, Commented Aug 6, 2015 at 12:44

Mubashar Abbas · Accepted Answer · 2015-08-06 12:45:18Z

2

Assuming you have an element #yourelement hidden (display:none), you can use the 'change' event on select box.(it's better than the click). and show the element on change.

$('select[name="ot"]').change(function() {
   $('#yourelement').show();
});

Hope this helps.

answered Aug 6, 2015 at 12:45

Mubashar Abbas

5,7234 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ANR Upgraded Version · Accepted Answer · 2015-08-06 13:16:44Z

1

HTML

<select name="ot">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select> 

<div id="UpdatedResultHere" style="display:none;"> Updated text Here</div>
<div id="InitialResultHere" > Initial text Here</div>

SCRIPT:

$('select[name="ot"]').change(function() {
         $("#UpdatedResultHere").toggle();
        $("#InitialResultHere").toggle();      
 });

Working Demo Here

edited Aug 6, 2015 at 13:16

answered Aug 6, 2015 at 13:04

ANR Upgraded Version

9471 gold badge16 silver badges41 bronze badges

2 Comments

sunny Over a year ago

I want to diplay two different text. If user click on Update then display a different text and if user click on initial then display a different text

ANR Upgraded Version Over a year ago

Check out Updated Post @sunny

shafiq.rst · Accepted Answer · 2015-08-06 13:12:59Z

1

http://jsfiddle.net/3Lzo4q7m/11/

Add id in your html select like below

<select name="ot" id="select">
  <option value="up">Update</option>
  <option value="in">Initial</option>
   </select></td></tr></table>
 </div>

Same for div

<div id="display">
<!------------------------- HERE I WANT TO DISPLAY MY TEXT---------------------------> 

 </div>

js part you can display it on change like this

$('#select').on('change',function(){
            $('#display').show()
        })

and on click like this

   $('#select').on('click',function(){
            $('#display').show()
        })

edited Aug 6, 2015 at 13:12

answered Aug 6, 2015 at 13:07

shafiq.rst

1,2962 gold badges12 silver badges26 bronze badges

1 Comment

sunny Over a year ago

it display same text when i click on update or initial but i want to display two differnt text

Collectives™ on Stack Overflow

How to display text on click using jquery or ajax?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related