How to Get Input Value Dynamically Using Jquery

How to get input value dynamically using jQuery?

You can loop on input which has a name attribute using the each function and get that value.

var arr = [];$(":input[name]").each(function(index, element) {  arr.push($(this).val());});console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type='text' name='foo' value='1' /><input type='text' name='bar' value='2' /><input type='text' name='foo' value='3' /><input type='text' name='bar' value='4' /><input type='text' name='foo' value='5' /><input type='text' name='bar' value='6' /><input type='text' value='7' />

Jquery - Get value from dynamically created inputs

EDIT:

In this code, you're not properly using context. http://api.jquery.com/jQuery.each/

$('input[id^="txtAnswer"]').each(function(input){
        var value = $('input[id^="txtAnswer"]').val();
        var id = $('input[id^="txtAnswer"]').attr('id');
        alert('id: ' + id + ' value:' + value);
});

In your .each, what's passed to the function is an item in the array you pulled with your selector. When you set value = $('input..., you're pulling the same array all over again.

Use .each, this way:

$('your selector').each(function(index, item){
    var val = $(item).val();
    var id = $(item).attr('id');
    ...
});

Unless you need the answers to have ids, why not use data-* attributes to denote them as an answer? You can tag each one like this:

<input data-type="answer"/>

Then just pull them all in this manner:

$('input[data-type="answer"]')

Doing it this way removes concern about needing to make sure every dynamic id is unique, if they aren't important. I have a data filter I created for work that dynamically creates elements after the page is loaded and I have no problem pulling data from the DOM in this manner.

How to get value from dynamically created inputs jquery

Change your ids to classes, your #dynamic_field isn't a input so you don't have a change event,

Lets say you change the values on the price input:

var i = 1;    $('#add_field').click(function(){       i++;        $('#dynamic_field').append('<tr id="row'+i+'"><td class="col-md-5"><textarea class="name borders table-control" type="text" rows="1" cols="45" name="name[]"></textarea></td><td class="col-md-2"><input class="borders table-control price" type="text" name="price[]"></td><td class="col-md-2"><input class="borders table-control qty" type="text" name="qty[]"></td><td class="col-md-2"><input class="form-control total" type="text" name="total[]"></td><td class="text-center"><span id="'+i+'" style="color: red" name="remove" class="btn_remove"><i class="fa fa-times" aria-hidden="true"></i></span></td></tr>');        });

    $('body').on('change','.price',function(){        var closestParent = $(this).closest('tr');//get the values relative to the parent        var name = closestParent.find('.name').val();         var price = closestParent.find(".price").val();         var qty = closestParent.find(".qty").val();         var total = closestParent.find(".total").val();         console.log(name,price,qty,total);    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="add_field">Add</button><div id="dynamic_field"></div>

Jquery read value of dynamic input field

You're not selecting all the elements to find the average value.

These lines are the problem:

var parentRow = $(this).parents('td');
var inputs = parentRow.children('input');

The first line only selects the td immediately above the chosen input. Therefore its only child is the input that's been changed. The other inputs are ignored. So you then divide that single value by 3, meaning the final average is completely wrong.

This example is correct - we go all the way up to the <tr>, and then use .find() to get all the inputs within the <tr> (can't use children because it only goes down one level, so you'd just get the <td>s.

Also I've made it more flexible by dividing by the number of inputs, rather than a hard-coded value. So if you add more inputs to the row it'll automatically average those as well.

$(document).on('input', '.userInput', function () {
    var parentRow = $(this).parents('tr');
    var inputs = parentRow.find('input');
    var avgText = parentRow.find('.avg');
    var avg = 0;    
    inputs.each(function () {
        avg += parseInt(this.value);
    });
    avg /= inputs.length;
    avgText.text(avg);
});

Change input value dynamically with jQuery

1.You can use input or keyup method.

2.Also .val() will give you a string value, so comparing it with 0.2 convert it to float with the help of parseFloat()

like below:-

Example 1:-

jQuery('input').on('input', function () {    var myInput = jQuery(this);    if (parseFloat(myInput.val()) < 0.2 ) {        jQuery('.alert').css('display', 'block')    }    else {        jQuery('.alert').css('display', 'none')    }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value=""><p class="alert" style="display: none">minimum value is 0.2</p>

how to generate dynamic input and get the value by id using jquery

You can use the jquery #map() function like this:

var list = wrapper.find('input').map(function() {
  return $(this).val();
}).get();

when you want to submit the list of values to the send to the server - see demo below:

$(document).ready(function() {  var max_fields = 10; //maximum input boxes allowed  var wrapper = $(".input_fields_wrap"); //Fields wrapper  var add_button = $(".add_field_button"); //Add button ID
  var x = 1; //initlal text box count  $(add_button).click(function(e) { //on add input button click    e.preventDefault();    if (x < max_fields) { //max input box allowed      x++; //text box increment      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box    }  });
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text    e.preventDefault();    $(this).parent('div').remove();    x--;  });
  /* ADDED THIS */  $('.submit').click(function() {    var list = wrapper.find('input').map(function() {      return $(this).val();    }).get();    // send to server here    console.log(list);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="input_fields_wrap">  <button class="add_field_button">Add More Fields</button>  <div><input type="text" name="mytext[]"></div></div><button class="submit">Submit</button>

JQuery can't get input value from dynamically created field

$(function(){ $(document).ready(function(){    $(document).on('keyup', '.inputclass', function(){     alert($(this).val());  }); });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/jquery-1.12.4.js"></script><form><table width="250" border="0" cellspacing="0" cellpadding="0" id="dataTable">  <tr>    <td>Field 1</td>    <td><input type="text" class="inputclass" /></td>  </tr>  <script> var counter =1; $(function(){  $('#addNew').click(function(){   counter += 1;   $('#dataTable').append('<tr><td>Field ' + counter + '</td><td><input type="text" class="inputclass"/></td></tr>');  }); });</script></table><br/><input type="button" id="addNew" value=" ± Add New Field"/></form>

JQuery get value from dynamically created input by tr

Problem: You don't have a data-qty attribute in your tr. Also there is no data-qty at all in your table.

Solution: During your table creation you are assigning the data[i].qty to your input element as value. Hence you need to read the input value. Like below.

   qty = tr.find('#qty').val();

NOTE: Satpal provided a valid point. If at all you are building the tr in a loop then you are assigning the same id to all the input elements in the all the rows which is not recommended. Its better you remove the id attribute and just use the name attribute to select the element. like

tr.find('input[name="qty"]').val(); or tr.find('td:eq(1) input').val()

However if this is the case then Satpal gave the right answer.

Get individual input values from dynamic input fields

You need to pass current textbox id to your changeFunc function.

function changeFunc(e){
    console.log($("#" + e.target.id).val()); 
  }

Here is working sample.

How to Get Input Value Dynamically Using Jquery