javascript - Show textbox when button is click - Stack Overflow

admin管理员组

文章数量:1326134

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();});

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();});

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 6, 2014 at 3:21 rapidoodle asked Jan 14, 2014 at 3:05 rapidoodlerapidoodle 36211 gold badge33 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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();
});

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

本文标签： javascriptShow textbox when button is clickStack Overflow