Create array based on user entered inputs

Question

I have table/form where the length is dynamic (user can add/delete rows). I would like to create an array onsubmit containing the values the user has entered and use console.log to show the array values as well as the length of array.

HTML

<div class="container">
  <form id="online1" action="#">
    <table class="table" id="tblData">
        <thead>
            <tr>
                <th>Youtube ID</th>
                <th>Add/Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" class="form-control song-input" placeholder="5YCcad6hklE" />
                </td>
                <td>
                    <button type="button" class="btn btn-default btn-add">Add</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="form-control" placeholder="t6Lr8ggJWi4" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-del">Del</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" class="form-control" placeholder="YmzfaapaPMA" />
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-del">Del</button>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-primary">Submit</button>
    </form>

jQuery

jQuery(".btn-primary").click(function(){


var values = [];
$('.yt-mix').each(function() {
    values[this.name] = this.value;
});
    var mix_size = values.length;
    console.log(values); // "5YCcad6hklE", "t6Lr8ggJWi4", "YmzfaapaPMA" 
    console.log(mix_size); // 3 rows
});

Working on this fiddle http://jsfiddle.net/1jmjdxLL/

alert($("#tblData tbody tr").length)

Sudharsan S
– Sudharsan S

2015-06-01 13:37:08 +00:00
Commented Jun 1, 2015 at 13:37 — Sudharsan S
– Sudharsan S, Commented Jun 1, 2015 at 13:37

Tushar · Accepted Answer · 2015-06-01 13:50:57Z

4

You can use each to loop over all the textboxes. :text pseudo-selector selects all the textboxes.

$(document).ready(function() {
    $(document).on('click', '.btn-primary', function() {
        var values = [];
        $('#tblData :text').each(function() {
            if ($(this).val()) {
                values.push($(this).val());
            }
        });

        console.log(values);
        console.log(values.length);
    });
});

Demo: https://jsfiddle.net/tusharj/1jmjdxLL/1/

edited Jun 1, 2015 at 13:50

answered Jun 1, 2015 at 13:34

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

sixtwowaifu Over a year ago

Thanks, only need it to fire when .btn-primary is pressed however :)

Tushar Over a year ago

@LordTubington There you go. Updated answer

blindpirate · Accepted Answer · 2015-06-01 13:43:52Z

2

$(".btn-primary").click(function(){

    var values = [];
    $('#tblData input').each(function() {
        values.push($(this).val());
    });
    var mix_size = values.length;
    console.log(values); // "5YCcad6hklE", "t6Lr8ggJWi4", "YmzfaapaPMA" 
    console.log(mix_size); // 3 rows
});

answered Jun 1, 2015 at 13:43

blindpirate

1141 silver badge5 bronze badges

Collectives™ on Stack Overflow

Create array based on user entered inputs

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related