Get values of dynamically created row via PHP/jQuery

Question

I needed to get the values of each dynamically created rows and print those values. What the current code does is that it can alert the all the added values or print to console. Now, how can I print those values?

For instance user has added one more row and selected the following:

enter image description here

After the user clicks Get Values, all the values (Female, Lady, Male and Schertz) must be printed to a generated table and page should look like this:

enter image description here

Now what I have are the following code.

HTML view:

<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

Here's a JSfiddle for a demo.

Any ideas? Kamsahamnida!

How can I put the values into input type=text Which input??? — A. Wolff
– A. Wolff, Commented Apr 28, 2014 at 8:33
My apologies, @A.Wolff, I was not able to clear which input I'm referring to. I edited my question. Anyway, I'm planning to get all the values the user has entered (the name and gender) and put those values to an <input type="text">. — novice
– novice, Commented Apr 28, 2014 at 8:42
Please, consider to explain expected behaviour providing relevant sample. You want ONLY dynamic elements? What if more than one dynamic element, must create more input text or fill already existing ones? So then, should e.g names separated by comma or what? Etc... Still unclear what you are asking — A. Wolff
– A. Wolff, Commented Apr 28, 2014 at 8:49
@A.Wolff, I updated my post. Was I able to clear my question? Thanks. :) — novice
– novice, Commented Apr 28, 2014 at 9:07

A. Wolff · Accepted Answer · 2014-04-28 09:26:08Z

1

You could use e.g:

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>'
            }))
        });
    });

answered Apr 28, 2014 at 9:26

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milind Anantwar · Accepted Answer · 2014-04-28 08:31:15Z

1

try this:

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

Working Demo

answered Apr 28, 2014 at 8:31

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

A. Wolff Over a year ago

+1 I understand question like this too even doesn't make much sense

novice Over a year ago

Thanks for answering, @Milind Anantwar. Something like that. But I'll try to work on your code. Btw, I updated my post. :)

Bip · Accepted Answer · 2014-04-28 08:33:12Z

1

try

document.getElementById('getValues').value;

answered Apr 28, 2014 at 8:33

Bip

6972 gold badges11 silver badges29 bronze badges

Comments

Karl Viiburg · Accepted Answer · 2014-04-28 08:33:59Z

1

Change your inputs class to something else as it might start confilcting and then try this:

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

What it does is it goes from the current target to the closest parent paragraph tag and from there it finds the input[type='text'] and gives it the value

answered Apr 28, 2014 at 8:33

Karl Viiburg

8321 gold badge11 silver badges35 bronze badges

1 Comment

novice Over a year ago

Hi, @Karl Viiburg. I appreciate your answer. I have changed my question above. :)

Collectives™ on Stack Overflow

Get values of dynamically created row via PHP/jQuery

4 Answers 4

DEMO

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related