CODEWITHSUNDEEP
javascriptjqueryhtml
rapidoodle
rapidoodle

Reputation: 352

Show textbox when button is click

I'm trying to hide and show the password of the user but I'm having a hard time. Here is my markup:

<td>Username: <td>
<td><input type="text" class="form-control" value="<?php echo $row['Username'];?>"readonly><td>
<td><input type="button" class="btn btn-primary show" value="Show Password">
<input type="button" class="btn btn-primary hide" value="Hide Password" style="display:none;"><td>
</tr>
<tr  class="password" style="display:none;">
<td>Password: <td>
<td><input type="text" class="form-control" value="<?php echo $row['Password']; ?>" readonly><td>
</tr>

And my jQuery

$(".show").click(function(){
$('.hide').show();
$('.show').hide();});

Upvotes: 0

Views: 14420

Answers (3)

Abraham Hamidi
Abraham Hamidi

Reputation: 13839

Your HTML is invalid, you need to wrap a table tag around a tr tag or the tr and everything in it will return undefined in Javascript:

<table>
<tr>
    <td>Username:
        <td>
            <td>
                <input type="text" class="form-control" value="<?php echo $row['Username'];?>" readonly>
                <td>
                    <td>
                        <input type="button" class="btn btn-primary show" value="Show Password">
                        <input type="button" class="btn btn-primary hide" value="Hide Password" style="display:none;">
                        <td>
</tr>
<tr class="password" style="display:none;">
    <td>Password:
        <td>
            <td>
                <input type="text" class="form-control" value="<?php echo $row['Password'];?>" readonly>
                <td>
</tr>
                </table>

and to complete your JQuery, you could use this:

$(".show").click(function () {
    $('.hide').show();
    $(this).hide();
    $('.password').eq(0).show();
});

$('.hide').click(function () {
    $('.show').show();
    $(this).hide();
    $('.password').eq(0).hide();
});

DEMO

Upvotes: 2

Deepak Ingole
Deepak Ingole

Reputation: 15772

You also can use .toggle() method like

$(".show").click(function () {
    $('.hide').toggle();
    $(this).toggle();
    $('.password').eq(0).toggle();
});

$('.hide').click(function () {
    $('.show').toggle();
    $(this).toggle();
    $('.password').eq(0).toggle();
});

Working fiddle

Also do some little changes to HTML as suggested by @Man of Snow..

Upvotes: 1

user3141031
user3141031

Reputation:

You need a [unique] identifier for your password textbox and for your jQuery selector to point to it.

Example:

<td><input type="text" class="form-control" id="pwd" value="<?php echo $row['Password']; ?>" readonly><td>

And your jQuery selector should therefore look for am element with id="pwd":

$(".show").click(function(){
    $('#pwd').show();
});

$(".hide").click(function(){
    $('#pwd').hide();
});

Upvotes: 1

Related Questions