Как выбрать один текстовый элемент на странице с несколькими формами с помощью jQuery

#jquery #forms

#jquery #формы

Вопрос:

У меня есть страница с несколькими полями комментариев. Когда кто-то нажимает кнопку отправки для поля комментариев, jQuery обрабатывает отправку и публикует комментарий. Затем я хочу вернуть тексту в поле для комментариев значение пустой. Я использую что-то вроде этого:

 $('.formstyle').submit(function() {        
    $.post("/messages/", $(this).serialize());
    return false;
});

Я знаю, что есть .reset() опция, но это все еще не говорит мне, как получить доступ к одному текстовому элементу среди многих. Я могу использовать $(":input[name=new_message]").val(''); для установки текста всех текстовых полей на странице, но это может раздражать, если у кого-то есть сообщение, которое они не отправили. Я бы подумал, что что-то вроде this.(":input[name=new_message]").val(''); будет работать, но без кубиков. Я думаю, что я просто не соединяю точки между this (или, что более вероятно $(this) ) и селектором ввода.

1. Есть ли несколько полей комментариев, каждое в своей собственной форме со своей кнопкой отправки, или несколько полей комментариев в одной форме с одной кнопкой отправки?

2. Отдельные формы с отдельными кнопками отправки. Я действительно понял это (после бесконечного поиска) сразу после того, как отправил этот вопрос. Я просто передал this в качестве контекста селектору и использовал $("input[name=new_message]", this).val(''); . Сработало как шарм. Stackexchange сообщает мне, что я не могу ответить на свой вопрос в течение 8 часов, поэтому мне нужно подождать, чтобы закрыть это.

3. Или примите один из приведенных ниже ответов. Возможно, вы в конечном итоге нашли ответ самостоятельно, но это не значит, что люди не тратили время на то, чтобы дать его вам.

4. @ChrisPratt: я сделал этот комментарий до того, как кто-либо опубликовал ответ.

Ответ №1:

Попробуйте:

 $(":input[name='new_message']",this).val('');

2-й аргумент for $() определяет контекст для селектора, поэтому селектор будет соответствовать только вводу внутри формы, которая запускает отправку

1. Это похоже на то, что я в итоге сделал (упомянуто в моем комментарии выше). Спасибо.

2. Забавно, когда я использую ваше решение, кажется, что сообщение работает только в первый раз. После этого текст будет очищен, но второй комментарий не будет отправлен. Есть идеи?

3. Я почти уверен, что мое предложение не помешает отправке какой-либо формы.

Ответ №2:

Вы можете просто использовать это:-

 $('.formstyle').submit(function() {        
    $.post("/messages/", $(this).serialize());
    $(this).find('input[name=new_message]').val('');
    return false;
});

Ответ №3:

Если у вас несколько <form> s, this будет ссылаться на конкретный отправляемый. Вы можете использовать $(this).find(':input[…]').val('') для сброса поля только внутри этой формы.