Получить значения динамически создаваемой строки через PHP / jQuery

0

Мне нужно было получить значения каждой динамически созданной строки и напечатать эти значения. Что делает текущий код, так это то, что он может предупреждать все добавленные значения или печатать на консоли. Теперь, как я могу напечатать эти значения?

Например, пользователь добавил еще одну строку и выбрал следующее:

Изображение 174551

После того, как пользователь нажимает "Получить значения", все значения ("Женщина", "Леди, мужчина" и "Шерц") должны быть напечатаны на сгенерированной таблице, и страница должна выглядеть так:

Изображение 174551

Теперь у меня есть следующий код.

HTML-представление:

<button>Add More Order</button>
<button>Delete Added Order</button>

<div id="wrap" class="order-container">
  <p>       
    <select class="getThis">
      <option>--Gender--</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>   
    <input type="text" class="getThis" placeholder="Name"/>
  <br>
  </p>
</div>

  <input type="submit" id="getValues" value="Get Values"></input>

JQuery:

$(document).ready(function(){

    //Add new row   
    $("button:nth-of-type(1)").click(function(){
        $("#wrap").append("<p><select class='getThis'><option>--Gender--</option><option>Male</option><option>Female</option></select><input type='text' class='getThis' placeholder='Name'/><br></p>").trigger('create');
    });

    //Remove last added row
    $("button:nth-of-type(2)").click(function(){
        $("p:last-of-type").remove();
    });

//alert values
$("#getValues").click(function() {
        $(".getThis").each(function() {
           var getThis =  $(this).val();
           //console.log(getThis);
           alert(getThis);

     });

  });

}); // Document Ready End

Здесь JSfiddle для демонстрации.

Есть идеи? Kamsahamnida!

  • 0
    How can I put the values into input type=text Какой вход ???
  • 0
    Можете ли вы объяснить, в каком текстовом поле вы хотите значение.
Показать ещё 3 комментария
Теги:

4 ответа

1
Лучший ответ

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

DEMO

$("#getValues").click(function () {
        var $table = $('#resultTable').length ? $('#resultTable').find('tr:gt(0)').remove().end() : $('<table/>').append('<tr><th>Gender</th><th>Name</th>').appendTo('body').attr('id', 'resultTable');
        var getValues = $("p:has(select.getThis)").find('select.getThis').map(function () {
            return {
                gender: this.value,
                name: $(this).next().val()
            }
        }).get();
        $.each(getValues, function (_, fields) {
            $table.append($('<tr/>', {
                html: '<td>' + fields.gender + '</td><td>' + fields.name + '</td>'
            }))
        });
    });
Поделиться
  • 0
    Отлично! Большое спасибо за ответ, @A. Wolff! :)
1

попробуй это:

 $("#getValues").click(function() {
    $("select.getThis").each(function() {
       var getThis =  $(this).val();
       $(this).next().val(getThis);
 });});

Рабочая демонстрация

Поделиться
  • 1
    +1 я тоже такой вопрос понимаю даже не имеет особого смысла
  • 0
    Спасибо за ответ, @Milind Anantwar. Что-то вроде того. Но я постараюсь поработать над вашим кодом. Кстати, я обновил свой пост. :)
1

Измените класс входных данных на что-то еще, так как он может начать конфликтовать, а затем попробуйте следующее:

$("#getValues").click(function() {
  $(".getThis").each(function() {
    var getThis =  $(this).val();
    $(this).closest("p").find("input[type='text']").val(getThis);
  });
});

Что он делает, так это от текущей цели до тега ближайшего родительского абзаца, и оттуда он находит вход [type = 'text'] и дает ему значение

Поделиться
  • 0
    Привет, @ Карл Вийбург. Я ценю ваш ответ. Я изменил свой вопрос выше. :)
1

пытаться

document.getElementById('getValues').value;
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню