How to get the value of user text input of user created input, jQuery

Question

I have created a button that lets the user create a new text input. I am trying to get the value of the text input of the newly created input.

HTML

<div class='pop-up-box-radio' Title="Edit Radios">
    <div style="display: inline; float: left; margin-left: 5%;">
        <div style="clear: both;">
            <ul class="new-radios"></ul>
        </div>
        <p style="padding-top: 15px;">
            <input type="button" class="add-radio" value="New Radio" />
        </p>
        <p>
            <input type="button" class="values" value="Values" />
        </p>
        <p class="theValues"></p>
    </div>
</div>

jQuery

// ADD RADIO
$('.add-radio').click(function(){
    $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});

// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();

$('.values').click(function(){
    $("p.theValues").append("<p>" + newRadio + "</p>");
});

// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
    var clickedButton = $(this);
    clickedButton.parent().remove();
});

When the value button is clicked, the only response I get is 'undefined'.

JSfiddle

Stewartside · Accepted Answer · 2015-10-09 15:50:29Z

You need a slight amendment to your JS to be able to find the new element you have found.

Firstly, var newRadio will run on browser load and not on the click function to create a new input. Your best option is to run it when clicking the .values button.

Secondly, .click() cannot find dynamically created elements. If you change this out be a .on('click' function, it will be able to find the dynamically added element.

Third and lastly, this will only find one element and not find all of them. If you make an each() function and loop through, you will be able to find all of the inputs.

// ADD RADIO
$('.add-radio').click(function() {
  $("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
$('.values').on('click', function() {
  var list = ''; // create list variable
  $('input.added-radio').each(function() { // start each loop
    var curRadio = $(this).val(); // get value of current item
    list += curRadio + ' - '; // append it to the list
  }); // end loop
  $("p.theValues").append("<p>" + list + "</p>"); // append list to the page
});

// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
  var clickedButton = $(this);
  clickedButton.parent().remove();
});

li {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pop-up-box-radio' Title="Edit Radios">
  <div style="display: inline; float: left; margin-left: 5%;">

    <div style="clear: both;">
      <ul class="new-radios"></ul>
    </div>
    <p style="padding-top: 15px;">
      <input type="button" class="add-radio" value="New Radio" />
    </p>
    <p>
      <input type="button" class="values" value="Values" />
    </p>
    <p class="theValues"></p>
  </div>
</div>

Matt Slonetsky · Accepted Answer · 2015-10-09 15:58:16Z

Your newRadio var is grabbing the value of $('input.added-radio') on initial page load (undefined, as no new fields have been added yet).

Your JSFiddle works if you move the .val() update inside your click function

$('.values').click(function(){
  // GET VALUE OF INPUT
  var newRadio = $('input.added-radio').val();
  $("p.theValues").append("<p>" + newRadio + "</p>");
});

Updated JSFiddle

As an aside, $('input.added-radio').val() will only grab the value from the first field if multiples exist

Get the current value of the first element in the set of matched elements...

(from the .val() api)

So if a user clicks New Radio twice and enters text in both fields, only the value from the first one will be appended when your Values button is clicked. If the first field is closed by clicking the X to the right, then the value from the next field will be used.

DinoMyte · Accepted Answer · 2015-10-09 15:59:24Z

1

Your current implementation is only going to give you the value from the first dynamically created input control. Therefore, you would need to iterate through each element.

$('.values').click(function(){
    $('input.added-radio').each(function(i,op)
    {
    $("p.theValues").append("<p>" + $(this).val() + "</p>");
    });
});

Fiddle : http://jsfiddle.net/91e4a7wy/30/

answered Oct 9, 2015 at 15:59

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to get the value of user text input of user created input, jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related