显示动态创建的输入字段的值 - jQuery
Display values from dynamically created input fields - jQuery
当用户单击“添加”按钮时,我有 jquery 段代码在 div 中创建了 2 个输入字段。
该脚本还为每个输入的用户名及其地址添加唯一 ID,例如:
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">1</span>
</div>
<input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
</div>
</div>
用户名1 地址1
用户名2 地址2
用户名3 地址3
...
我如何“立即”为每个用户名字段创建具有相同 ID(数字)的 <div>
并附加与 ID 匹配的用户名和地址值,例如:
<div id="result1">
username1(value) <br/>
adress1(value)
</div>
此外,当我单击删除按钮 (span) 时,如何删除该用户名、其地址字段和匹配结果 <div>
并重新排列左侧字段和结果 ID。
我一直卡在这一点上:
https://jsfiddle.net/ribosed/f0arxw5h/17/
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var usernamesDiv = $(document.createElement('div'))
.attr("id", 'usernames' + counter);
usernamesDiv.after().html('<div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
'</span></div><input type="text" id="username' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
'<input type="text" id="adress' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + ' <div class="input-group-append"><span class="input-group-text" id="inputGroup-sizing-sm">Remove</span></div>' +
'</div>');
usernamesDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#username" + counter).remove();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- JS ------jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding:45px 10px 10px 10px;">
<button type="button" id='addButton' class="btn btn-primary btn-sm" >Add username</button>
<br/>
<div id='TextBoxesGroup'>
<div id="usernames1">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">1</span>
</div>
<input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
</div>
</div>
</div>
<div>
这是适合您的完整工作代码。很少有东西需要 change
才能 更好地工作 以满足您的要求。
要在每个输入框下方显示 each
值 dynamically
,我们需要 jQuery $.each
动态添加用户名和地址 class 功能到每个输入字段。
一旦我们遍历每个可用的输入,我们将检查它 attr
例如,您的 username1
或 address1
。由于 id's
是动态添加的,因此我们需要确保获得它们的值 separately
,以便它们显示在结果部分。
我还通过向页面添加新字段输入框来简化您的代码,我们可以使用 append()
函数向我们的 div 添加新的克隆 fields
。我们只是保留了一个 div 来显示这些新字段(一个新的 div)。
要remove
一个特定的添加字段输入组,我们需要使用event delegation
并在remove
按钮创建后将class添加到remove
按钮,我们可以.remove功能.parent 函数将从页面中删除整个 input group
以及 decrease
计数器。
最后,我在每一行代码中都添加了注释,以供您理解
现场工作演示:
$(document).ready(function() {
//Counter
var counter = 2;
//Add fields
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return
}
//New field HTML
var usernamesDiv = ('<div id="usernames' + counter + '"><div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
'</span></div><input type="text" id="username' + counter + '" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
'<input type="text" id="adress' + counter + '" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + '<div class="input-group-append"><span class="input-group-text removeButton">Remove</span></div>' +
'</div><div id="results' + counter + '"></div></div>');
//Append new fields
$('.newTextBoxes').append(usernamesDiv);
//Increase the counter
counter++;
});
//Remove clicked field
$(document).on('click', '.removeButton', function() {
//Remove clicked feilds
$(this).parent().parent().parent().remove(); //remove username parent
//Decrease the counter
counter--;
});
//Display results / below each input
$(document).on('click', '#showInputValue', function() {
//Each username
var results = '<div id="results">'
$('.username').each(function(index, element) {
var getUserAttr = $(element).attr('id')
var getUserValue = $(element).val()
var lastChar = getUserAttr.substr(getUserAttr.length - 1);
var getDiv = $('#results' + lastChar + '')
var getDiv1 = $('#results' + lastChar + ' .user')
getDiv1.html('') //empty username
getDiv.append('<span class="user">' + getUserAttr + '(' + getUserValue + ')<br></span>')
})
//Each address
$('.address').each(function(index, element) {
var getAddrAttr = $(element).attr('id')
var getAddrValue = $(element).val()
var lastChar = getAddrAttr.substr(getAddrAttr.length - 1);
var getDiv = $('#results' + lastChar + '')
var getDiv1 = $('#results' + lastChar + ' .addr')
getDiv1.html('') //empty address
getDiv.append('<span class="addr">' + getAddrAttr + '(' + getAddrValue + ')</span>')
})
})
});
.removeButton {
cursor: pointer;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div style="padding:45px 10px 10px 10px;">
<button type="button" id='addButton' class="btn btn-primary btn-sm">Add username</button>
<br>
<br>
<div id='TextBoxesGroup'>
<div id="usernames1">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">1</span>
</div>
<input type="text" id="username1" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="address1" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text">Remove</span>
</div>
</div>
<div id="results1"></div>
</div>
<div class="newTextBoxes"></div>
<button type="button" id='showInputValue' class="btn btn-success btn-sm">Display Input Values</button>
</div>
当用户单击“添加”按钮时,我有 jquery 段代码在 div 中创建了 2 个输入字段。
该脚本还为每个输入的用户名及其地址添加唯一 ID,例如:
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">1</span>
</div>
<input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
</div>
</div>
用户名1 地址1
用户名2 地址2
用户名3 地址3
...
我如何“立即”为每个用户名字段创建具有相同 ID(数字)的 <div>
并附加与 ID 匹配的用户名和地址值,例如:
<div id="result1">
username1(value) <br/>
adress1(value)
</div>
此外,当我单击删除按钮 (span) 时,如何删除该用户名、其地址字段和匹配结果 <div>
并重新排列左侧字段和结果 ID。
我一直卡在这一点上: https://jsfiddle.net/ribosed/f0arxw5h/17/
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var usernamesDiv = $(document.createElement('div'))
.attr("id", 'usernames' + counter);
usernamesDiv.after().html('<div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
'</span></div><input type="text" id="username' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
'<input type="text" id="adress' + counter + '" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + ' <div class="input-group-append"><span class="input-group-text" id="inputGroup-sizing-sm">Remove</span></div>' +
'</div>');
usernamesDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#username" + counter).remove();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- JS ------jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding:45px 10px 10px 10px;">
<button type="button" id='addButton' class="btn btn-primary btn-sm" >Add username</button>
<br/>
<div id='TextBoxesGroup'>
<div id="usernames1">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">1</span>
</div>
<input type="text" id="username1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="adress1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text" id="inputGroup-sizing-sm">Remove</span>
</div>
</div>
</div>
<div>
这是适合您的完整工作代码。很少有东西需要 change
才能 更好地工作 以满足您的要求。
要在每个输入框下方显示 each
值 dynamically
,我们需要 jQuery $.each
动态添加用户名和地址 class 功能到每个输入字段。
一旦我们遍历每个可用的输入,我们将检查它 attr
例如,您的 username1
或 address1
。由于 id's
是动态添加的,因此我们需要确保获得它们的值 separately
,以便它们显示在结果部分。
我还通过向页面添加新字段输入框来简化您的代码,我们可以使用 append()
函数向我们的 div 添加新的克隆 fields
。我们只是保留了一个 div 来显示这些新字段(一个新的 div)。
要remove
一个特定的添加字段输入组,我们需要使用event delegation
并在remove
按钮创建后将class添加到remove
按钮,我们可以.remove功能.parent 函数将从页面中删除整个 input group
以及 decrease
计数器。
最后,我在每一行代码中都添加了注释,以供您理解
现场工作演示:
$(document).ready(function() {
//Counter
var counter = 2;
//Add fields
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return
}
//New field HTML
var usernamesDiv = ('<div id="usernames' + counter + '"><div class="input-group input-group-sm mb-3"><div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">' + counter +
'</span></div><input type="text" id="username' + counter + '" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Username"> ' +
'<input type="text" id="adress' + counter + '" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">' + '<div class="input-group-append"><span class="input-group-text removeButton">Remove</span></div>' +
'</div><div id="results' + counter + '"></div></div>');
//Append new fields
$('.newTextBoxes').append(usernamesDiv);
//Increase the counter
counter++;
});
//Remove clicked field
$(document).on('click', '.removeButton', function() {
//Remove clicked feilds
$(this).parent().parent().parent().remove(); //remove username parent
//Decrease the counter
counter--;
});
//Display results / below each input
$(document).on('click', '#showInputValue', function() {
//Each username
var results = '<div id="results">'
$('.username').each(function(index, element) {
var getUserAttr = $(element).attr('id')
var getUserValue = $(element).val()
var lastChar = getUserAttr.substr(getUserAttr.length - 1);
var getDiv = $('#results' + lastChar + '')
var getDiv1 = $('#results' + lastChar + ' .user')
getDiv1.html('') //empty username
getDiv.append('<span class="user">' + getUserAttr + '(' + getUserValue + ')<br></span>')
})
//Each address
$('.address').each(function(index, element) {
var getAddrAttr = $(element).attr('id')
var getAddrValue = $(element).val()
var lastChar = getAddrAttr.substr(getAddrAttr.length - 1);
var getDiv = $('#results' + lastChar + '')
var getDiv1 = $('#results' + lastChar + ' .addr')
getDiv1.html('') //empty address
getDiv.append('<span class="addr">' + getAddrAttr + '(' + getAddrValue + ')</span>')
})
})
});
.removeButton {
cursor: pointer;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div style="padding:45px 10px 10px 10px;">
<button type="button" id='addButton' class="btn btn-primary btn-sm">Add username</button>
<br>
<br>
<div id='TextBoxesGroup'>
<div id="usernames1">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">1</span>
</div>
<input type="text" id="username1" class="form-control username" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="User name">
<input type="text" id="address1" class="form-control address" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Adress">
<div class="input-group-append">
<span class="input-group-text">Remove</span>
</div>
</div>
<div id="results1"></div>
</div>
<div class="newTextBoxes"></div>
<button type="button" id='showInputValue' class="btn btn-success btn-sm">Display Input Values</button>
</div>