CODEWITHSUNDEEP
javascriptjqueryhtml
espresso_coffee
espresso_coffee

Reputation: 6110

How to show button after typing text in textbox?

I have my table crated dynamically. Also I created textbox that should disable all other text boxes after user click to input text in one of them. What I'm struggling is to get button created just next to text box which I clicked on. My current code show the button on the same spot. Does not matter which text box I clicked on my button always show up next to the first text box. HTML code:

<tr>
    <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
    <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
    <td><input type="text" name="fname" id="fname">
        <input type="button" id="test" name="test" value="Save" onClick="testButton()" style="display: none">
   </td>
</tr>

JQuery code:

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $("#test").show();
        } else {
            $(":text").removeAttr('disabled');
            $("#test").hide();
        }
    });
});

I'm not sure why button show up only in the first row. My text box function works fine. If I click in one text box all other will be blocked. Only issue is that my button is not created next to the text box that I clicked but first one. If anyone see where is my code breaking please let me know. Thank you.

Upvotes: 0

Views: 3735

Answers (3)

Baro
Baro

Reputation: 5520

The answer of Azim is partially correct, the "next" selector can't be an ID selector, otherwise you select only the specific textbox with the specific ID. The right way is:

$(this).next("input").show();

Example: here

Upvotes: 2

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Use next() and prev() to find next and previous element like following. Hope this will help you.

$(".fname").keyup(function (e) {
     if ($(this).val() != '') {
        $(".fname").not(this).attr('disabled', 'disabled');
        $(this).next(".test").show();
     } else {
        $(".fname").removeAttr('disabled');
        $(this).next(".test").hide();
     }
});

$(".test").click(function (e) {
     alert($(this).prev(".fname").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
</table>

Update:

Button:

<input type="button" class="test" name="test" 
     onclick="testButton(this)" value="Save" style="display: none">

JS Function

function testButton(btn) {
    var test = $(btn).prev('.fname').val();
    alert(test);
}

Upvotes: 2

ataravati
ataravati

Reputation: 9155

That happens because all of the buttons have the same id. So, $("#test") always finds the first button:

You need to use a class instead of id, like this:

<input type="button" class="test" value="Save" onClick="testButton()" style="display: none">

Then, your key-up event should be like this:

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $(this).next(".test").show();
        } else {
            $(":text").removeAttr('disabled');
            $(this).next(".test").hide();
        }
    });
});

Upvotes: 1

Related Questions