Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery and display it in a textbox

Question

i have code where you can add or delete textbox using .append() and .remove() in jquery, now i want to implode all the value of the textboxes separated by commas and pass it into another textbox located outside the script. how can i do it? here's the code for dymically adding and removing textbox. (not mine just got it here in stackoverflow) HTML:

<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />

javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnAdd").bind("click", function () {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
});
$("#btnGet").bind("click", function () {
    var values = "";
    $("input[name=DynamicTextBox]").each(function () {
        values += $(this).val() + "\n";
    });
    alert(values);
});
$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
        '<input type="button" value="Remove" class="remove" />'
}
</script>

"now i want to implode all the value of the textboxes separated by commas and pass it into another textbox located outside the script" Which element is "another textbox" ? Or, should "another textbox" be dynamically created ? — guest271314
– guest271314, Commented Jan 12, 2016 at 14:50
Which element is "another textbox" where values should be set ? — guest271314
– guest271314, Commented Jan 12, 2016 at 14:53
oh , i forgot to put another textbox for the container, sorry — Anecito Alima Santillan
– Anecito Alima Santillan, Commented Jan 12, 2016 at 14:54
well as i said above the code isnt mine, when you hit the button withe the value of "get value" an alert will display will all the values in the texboxes, but i want it to be put inside a texbox instead of displaying it in alert — Anecito Alima Santillan
– Anecito Alima Santillan, Commented Jan 12, 2016 at 14:58

guest271314 · Accepted Answer · 2016-01-12 15:12:47Z

2

Use .val() to set value of "another textbox" to values

$(function() {
  $("#btnAdd").bind("click", function() {
    var div = $("<div />");
    div.html(GetDynamicTextBox(""));
    $("#TextBoxContainer").append(div);
  });
  $("#btnGet").bind("click", function() {
    var values = 
      $.map($("input[name=DynamicTextBox]"), function(el) {
        return el.value
      }).join(",\n");
    $("#anotherTextbox").val(values);
  });
  $("body").on("click", ".remove", function() {
    $(this).closest("div").remove();
  });
});

function GetDynamicTextBox(value) {
  return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />&nbsp;' +
    '<input type="button" value="Remove" class="remove" />'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
  <!--Textboxes will be added here -->
</div>
<br />
<input id="btnGet" type="button" value="Get Values" />
<input id="anotherTextbox" type="text" />

edited Jan 12, 2016 at 15:12

answered Jan 12, 2016 at 14:58

guest271314

1

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

2 Comments

guest271314 Over a year ago

jsfiddle.net/uLr2eg89 Slightly adjusted at stacksnippets, above; same approach

Anecito Alima Santillan Over a year ago

yeah, sorry about that, it's actually my first time asking question here.

Collectives™ on Stack Overflow

Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery and display it in a textbox

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related