jQuery get value of inner text input

Question

I have a form which adds a row of text inputs dynamically if a user wants to add a new row, it automatically populates a new row with an input field with the same id and class as the previous ones. My question is how can i get the value of each text input field?

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
        </div>
    </div>
</div>

Maybe this helps: https://stackoverflow.com/questions/4088467/get-the-value-in-an-input-text-box — Zykrates, Feb 18 '18 at 23:19

score 1 · Answer 1 · answered Feb 18 '18 at 23:58

Here's what I did: I started by changing your architecture a bit by putting the input fields that contain the product name and price into a global item div. now, every product (item) will have its own name and price field! Then with Jquery, if we click on add-item I take the first item I make an outerHTML and I add it to the div containing all the items

Then to get all items I created a button named get-items where when it pressed, I create an array, I browse all the items and for each item , I take its field name and the price field that I push in the array!

$("document").ready(function () {
 
  $("#add-item").on('click', function () {
   $('.add-items').append($('.add-items .item')[0].outerHTML)
  })
  
 
  $("#get-items").on('click', function () {
  var arr = []
   $.each($(".item"), function () {
     arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
   })
   console.log(arr)
  })
})

<!-- I presume you've included Jquery like this -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-xs-12 col-md-12" id="items">
    <div class="row add-items">
      <div class="item">
        <div class="col-md-6 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="item">Item:</label>
                <input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
            </div>
        </div>
        <div class="col-md-3 col-sm-12 mx-auto">
            <div class="form-group">
                <label for="charge">Item cost:</label>
                <input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
            </div>
        </div>
      </div>
     </div>
        <div class="col-md-3 col-sm-12 text-right">
            <button id="add-item" class="addBtn" type="button">+ item</button>
    </div>
    <div class="col-md-3 col-sm-12 text-right">
            <button id="get-items" class="addBtn" type="button">Get Items Array</button>
    </div>
</div>

superradio · Answer 2 · 2018-02-18T23:21:11.877

0

That's how you get the value of your text input values

document.getElementById("item").value
document.getElementById("charge").value

edited Feb 18 '18 at 23:21

answered Feb 18 '18 at 23:13

superradio

89
1
2
9

No that's not how you get the value of text inputs. You have to use .value in that case. Also this does not answer the question. – posixpascal Feb 18 '18 at 23:15
It does get the value of the fields, that's what he wanted to know. – superradio Feb 18 '18 at 23:22
Yes, now it does. :) – posixpascal Feb 18 '18 at 23:22
What now? Your first submission wasn't doing what OP wanted, now that you've edited I'm not changing my vote as this still does not satisfy me. It's not like he asked for a solution to get an elements current value as his own answer shows us. I did not give your answer a downvote to get my answer to the top, sorry if you got that impression. – posixpascal Feb 19 '18 at 00:20

posixpascal · Answer 3 · 2018-02-18T23:22:58.317

First of it would be good if you can post your JS code as well so I can assist you a little bit better.

Second I would not give the same elements the same ID everytime, the class is fine however.

Now you can get your inputs text using:

$(".your-input-class").map(function(){
    return this.val();
});

To get the text of the last (e.g. newest) input element use:

$(".your-input-class").last().val();

Since I'm not sure what exactly you are trying to achieve at the moment I'll also leave this code:

// Access new item input text (if single input):
$("#item").val();

// Access new item input text (if multiple):
$("[name='item[]']").map(function(){ return this.val(); })

// Access charge input (if single input):
$("#charge").val();

// Access charge input (if multiple):
$("[name='charge[]']").map(function(){ return this.val(); })

score 0 · Answer 4 · answered Feb 18 '18 at 23:24

0

$("#items").delegate("#charge", "blur", function(){
     var value = $(this).val();   
});

I have finally gotten a way to do it.

answered Feb 18 '18 at 23:24

Benjamin Mwendwa Munyoki

337
1
8
20

jQuery get value of inner text input

4 Answers4