How to get input text value and push it into array in jQuery?

Question

I have a checkbox function that when user checked on one of the specified value it will display an input text that will ask user to input a number and there will be another input text based on the number that user has put. This is the example output

if user enter 2, there will be 2 input text will appear.

Now I have problem with pushing the tier name into my temp array. Below is what I have tried. But I'm still not getting any value inside my temp.

< script >
  let temp = [];
$(document).ready(function() {


  $("#staff_tier").change(function() {
    let m = $(this).val();
    $('#tier').html('');
    var tier_num = 1;
    for (var i = 0; i < parseInt(m); i++) {

      $('#tier').append(`<label><b><span style="color:#e60000;">*</span><i> Tier (${tier_num++})</i></b></label><br>
                                <div class="input-group-prepend">
                                    <input class="from-control" type="text" placeholder="" id="tier_name"  required >
                                </div>
                                `);


      temp.push($('#tier_name').val());
    }


    console.log(temp);
  });
}); <
/script>

What I'm trying to achieve is I want the input value got push into my temp. How do I fix this problem ?

and you won't. JS is client side script. You need to save it on backend. — Wordica
– Wordica, Commented Sep 8, 2021 at 18:33

Dharman · Accepted Answer · 2021-09-08 18:21:04Z

1

There are a few things that you got wrong:

You're having a loop, but you always print an input field with the same id: <input id="tier_name">
You listen for a change on #staff_tier, but then you simply print some html code that is static. You need (after fixing #1) to add pieces (input fields), that also have listeners so that when they change - you get their value
After having separate inputs with listeners, you can have a global place where you store their values.

At this point, it would be much easier of you add any tiny reactive library (no need for React or anything huge). Search online, but any of the smaller ones would do the trick: Sinuous, Reef or even Preact.

edited Sep 8, 2021 at 18:21

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 8, 2021 at 18:15

Andrey Popov

7,5404 gold badges45 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

How to get input text value and push it into array in jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related