Как показать кнопку после ввода текста в текстовое поле?

Question

У меня есть столик динамически. Также я создал текстовое поле, которое должно отключить все остальные текстовые поля после нажатия пользователем, чтобы ввести текст в одно из них. Я пытаюсь создать кнопку рядом с текстовым полем, на которое я нажал. Мой текущий код показывает кнопку на том же месте. Не имеет значения, какое текстовое поле я нажал на кнопку, всегда отображается рядом с первым текстовым полем. HTML код:

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

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

Я не уверен, почему кнопка появляется только в первом ряду. Моя функция текстового поля работает отлично. Если я нажму в одном текстовом поле, все остальные будут заблокированы. Единственная проблема заключается в том, что моя кнопка создается не рядом с текстовым полем, которое я нажал, а первой. Если кто-нибудь увидит, где мой код взломан, пожалуйста, дайте мне знать. Спасибо.

javascript jquery html

0

espresso_coffee 17 Дек 2015 в 22:06

Answer 1

Это происходит потому, что все кнопки имеют одинаковый идентификатор. Итак, $("#test") всегда находит первую кнопку:

Вам нужно использовать класс вместо идентификатора, например так:

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

Тогда ваше событие должно быть таким:

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

1

ataravati 17 Дек 2015 в 19:15

Answer 2

Используйте next() и prev(), чтобы найти следующий и предыдущий элемент, например, следующий. Надеюсь, что это поможет вам.

$(".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>

Обновление:

Кнопка:

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

Функция JS

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

2

Ibrahim Khan 17 Дек 2015 в 19:39

Answer 3

Ответ Azim частично правильный, селектор «следующий» не может быть селектором идентификатора, в противном случае вы выбираете только конкретное текстовое поле с конкретным идентификатором. Правильный путь:

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

Пример: здесь

2

eylay 3 Янв 2016 в 20:19

Как показать кнопку после ввода текста в текстовое поле?

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript