What is the best way to dynamically retrieve the value from a textbox?

Question

What is the best way to dynamically retrieve the value from a textbox?

Whenever I click on the ADD button, I am dynamically adding three textboxes. These textboxes are located within the same div tag and each has a different name.

Therefore, every time I click on the ADD button, I create a new div with three textboxes inside it.

Now, I need to be able to access the values entered into these text fields. How can I do that?

    <div class="ord" id="parent">

    </div>
    <button type="button" class="btn btn-primary fa fa-plus add btn-xs"> Add </button>

JS

   var items = "<form role='form' class='form-inline' style='padding-bottom: 5px;'>"
                    + "<div class='form-group'><input id='med' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='qua' placeholder='' class='form-control'></div>"
                    + "<div class='form-group' style='padding-left: 5px;'><input id='rem' placeholder='' class='form-control'></div>"

  $('.add').on("click",function(){
div_id = div_id + 1
$( ".ord" ).append('<div id="item'+div_id+'">' + items + '<button style="margin-left: 3px;" type="button" id="item'+div_id+'" class="btn btn-default btn-danger btn-xs fa fa-close" onclick=deleteitem(id)></button></form></div>');
   })

I have an array of IDs for all the div tags, such as [item1, item2, item3].

How can I retrieve the text entered in all the text fields?

javascript jquery html css

Answer 1

Answer №1

Make sure to use the .forEach method and concatenate the id with a "#" when selecting an element in order to create a valid ID selector.

['element1', 'element2', 'element3'].forEach(function(element) {
  $("#" + element).find('input').each(function() {
    console.log(this.value);
  });
});

Note: If element1,... are the id values of parent div elements, remember to use .find('input') to locate descendant <input> elements. You can then use .each to loop through all the found elements and retrieve their value.

Reminder: When calling the deleteitem(id) function, make sure to pass this.id instead of just id.

Answer 2

Make sure to use the .forEach method and concatenate the id with a "#" when selecting an element in order to create a valid ID selector.

['element1', 'element2', 'element3'].forEach(function(element) {
  $("#" + element).find('input').each(function() {
    console.log(this.value);
  });
});

Note: If element1,... are the id values of parent div elements, remember to use .find('input') to locate descendant <input> elements. You can then use .each to loop through all the found elements and retrieve their value.

Reminder: When calling the deleteitem(id) function, make sure to pass this.id instead of just id.

Answer 3

Answer №2

let elements = ['element1', 'element2', 'element3']; // this is your "list of Ids for all div tags"
elements.forEach(function(element) {
    $('#' + element).find('input[type="text"]').each(function() {
        console.log($(this).val());
    }):
});

You may want to consider adding type="text" to your input fields.

Furthermore, keep in mind that having multiple occurrences of the same id in your code is not recommended.

Below is an improved code snippet to address this issue:

let elements = [];
let divId = 0;

// Create a function to ensure only one instance of #med, #qua, and #rem
function getInputs(id) {
    let inputs = "";
    inputs += '<form role="form" class="form-inline">';
    inputs += '    <div class="form-group"><input type="text" id="med' + id + '" class="form-control" /></div>';
    inputs += '    <div class="form-group"><input type="text" id="qua' + id + '" class="form-control" /></div>';
    inputs += '    <div class="form-group"><input type="text" id="rem' + id + '" class="form-control" /></div>';
    inputs += '</form>';
    
    return inputs;
}

// Click event handler for the Add button
$(".add").on("click", function() {
    let currentId = "item" + divId; // Ensure only one instance of #item0, #item1, etc.
    
    let html = "";
    html += '<div id="' + currentId + '">';
    html += getInputs(divId);
    html += '    <button type="button" data-delete="' + currentId + '" class="btn btn-danger btn-xs">Close</button>';
    html += '</div>';
   
   $(".ord").append(html);
  
   elements.push(currentId);
   divId++;
});

// Click event handler for the Close button
$(document).on("click", "button[data-delete]", function(evt) {
    evt.preventDefault();
    let id = $(this).data("delete");
    
    $("#" + id).remove();
  
    // Remove the element from the list
    let index = elements.indexOf(id);
    if (index !== -1) {
        elements.splice(index, 1);
    }
});


// Change event handler for the input fields
$(document).on("change", 'input[type="text"]', function() {
    elements.forEach(function(item) {
        $('#' + item).find('input[type="text"]').each(function() {
            console.log($(this).attr("id") + " => " + $(this).val());
        });
    });
});

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="ord" id="parent">

</div>
<button type="button" class="btn btn-primary add">Add</button>

Answer 4

let elements = ['element1', 'element2', 'element3']; // this is your "list of Ids for all div tags"
elements.forEach(function(element) {
    $('#' + element).find('input[type="text"]').each(function() {
        console.log($(this).val());
    }):
});

You may want to consider adding type="text" to your input fields.

Furthermore, keep in mind that having multiple occurrences of the same id in your code is not recommended.

Below is an improved code snippet to address this issue:

let elements = [];
let divId = 0;

// Create a function to ensure only one instance of #med, #qua, and #rem
function getInputs(id) {
    let inputs = "";
    inputs += '<form role="form" class="form-inline">';
    inputs += '    <div class="form-group"><input type="text" id="med' + id + '" class="form-control" /></div>';
    inputs += '    <div class="form-group"><input type="text" id="qua' + id + '" class="form-control" /></div>';
    inputs += '    <div class="form-group"><input type="text" id="rem' + id + '" class="form-control" /></div>';
    inputs += '</form>';
    
    return inputs;
}

// Click event handler for the Add button
$(".add").on("click", function() {
    let currentId = "item" + divId; // Ensure only one instance of #item0, #item1, etc.
    
    let html = "";
    html += '<div id="' + currentId + '">';
    html += getInputs(divId);
    html += '    <button type="button" data-delete="' + currentId + '" class="btn btn-danger btn-xs">Close</button>';
    html += '</div>';
   
   $(".ord").append(html);
  
   elements.push(currentId);
   divId++;
});

// Click event handler for the Close button
$(document).on("click", "button[data-delete]", function(evt) {
    evt.preventDefault();
    let id = $(this).data("delete");
    
    $("#" + id).remove();
  
    // Remove the element from the list
    let index = elements.indexOf(id);
    if (index !== -1) {
        elements.splice(index, 1);
    }
});


// Change event handler for the input fields
$(document).on("change", 'input[type="text"]', function() {
    elements.forEach(function(item) {
        $('#' + item).find('input[type="text"]').each(function() {
            console.log($(this).attr("id") + " => " + $(this).val());
        });
    });
});

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="ord" id="parent">

</div>
<button type="button" class="btn btn-primary add">Add</button>

What is the best way to dynamically retrieve the value from a textbox?

Answer №1

Answer №2

Similar questions

Guide on how to retrieve server error responses in javascript using axios

Using setInterval in React within an onChange event

Execute JavaScript unit tests directly within the Visual Studio environment

Is it possible to create a hyperlink in the <button> element?

gallery showcasing pictures with a prominent main image and accompanying smaller images

Having trouble getting JSON data to display in CanvasJS

Tips for implementing jQuery functions such as lightbox and other features on a page loaded via ajax requests

Ensure one div scrolls independently while the other remains fixed using Bootstrap

What is the best way to activate a button based on the presence of a cookie?

Error: Attempting to access the 'filter' property of an undefined value is not permitted in React. This issue has caused an undefined error

What is the best way to retrieve AWS secret values using JavaScript?

Using HTML5 and CSS for 3D transformations along with stacking divs to create a unique accordion

Having trouble with Bootstrap dropdowns not opening when clicking with jQuery?

Choose a Date from the Calendar and Modify the Link Text

Using Node.js and React to dynamically render a different HTML file in response to a request

Header contains problem with cross-domain access in $http

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Displaying XML data in an HTML document

Having trouble retrieving the value of a custom directive attribute

Issue Alert: Inconsistencies with Google Scripts spreadsheets