Блог

Главная - Вопросы по программированию - Захват текста из нескольких полей ввода

Захват текста из нескольких полей ввода

#javascript #jquery

#javascript #jquery

Вопрос:

Как мне захватить текст из нескольких полей ввода с помощью jquery. В настоящее время моя функция выглядит следующим образом

 $("#submit").click(function() {
    $("#inputDiv").text($("input").val());
})

Это захватывается только из первого поля ввода, однако как мне заставить его принимать значение каждого поля

Вот пример моей работы на данный момент:http://jsfiddle.net/YqWv2/3 /

Комментарии:

1. Использовать $("input").each(...)

2. Вы бы имели в виду что-то вроде этого? jsfiddle.net/v76gk

3. @SpYk3HH Да, но это были бы отдельные элементы, в конце концов, я хочу создать форму с элементами, к которым вы позже сможете добавлять значения

4. да, без проблем придерживайтесь .each предложений и научитесь больше использовать имена классов, а не идентификаторы, просто предложение

Ответ №1:

 $("#submit").click(function() {
    $("#inputDiv").empty();
    $('input').each(function () {
        $("#inputDiv").append($(this).val()).append('<br/>');
    });
})

Вам нужно выполнить цикл по всем полям

Комментарии:

1. Это не экранирует HTML. Лучше $("#inputDiv").text($("#inputDiv").text() $(this).val());

2. @blgt также я хотел добавить br после каждой записи, и .text() перезапишет все.

3. @Silkster Это не имеет значения, вам всегда нужно избегать пользовательского ввода или рисковать XSS-редактированием

4. @blgt отметил, но это совсем другая проблема.

5. Кроме того, я не хочу выполнять всю работу за OP 😉

Ответ №2:

Вы можете использовать метод jQuery .map , чтобы получить все значения и добавить их к соответствующему элементу.

 $("#submit").click(function() {
    $("#inputDiv").text( 
       $("input").map(function() { return this.value; }).get().join(',') 
    );
});

РАБОЧАЯ ДЕМОНСТРАЦИЯ JSFIDDLE

Ответ №3:

Вот моя версия

 $("#submit").click(function() {    
    var str = "";
    $("input").each(function(e){
        var currentItem = $(this).val();
        str = str   currentItem;
    });
    $("#inputDiv").html(str);
})

JSFiddle