Tôi muốn tạo động văn bản kiểu nhập trong biểu mẫu web của mình. Cụ thể hơn, tôi có một trường văn bản nơi người dùng nhập số lượng trường văn bản mong muốn; Tôi muốn các trường văn bản được tạo động ở cùng một dạng.
Làm thế nào để làm điều đó?
Tôi muốn tạo động văn bản kiểu nhập trong biểu mẫu web của mình. Cụ thể hơn, tôi có một trường văn bản nơi người dùng nhập số lượng trường văn bản mong muốn; Tôi muốn các trường văn bản được tạo động ở cùng một dạng.
Làm thế nào để làm điều đó?
Câu trả lời:
Với JavaScript:
var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM
Sử dụng Javascript, tất cả những gì bạn cần là document.createElementvà setAttribute.
var input = document.createElement("input");
input.setAttribute('type', 'text');
Sau đó, bạn có thể sử dụng appendChildđể nối phần tử đã tạo vào phần tử mẹ mong muốn.
var parent = document.getElementById("parentDiv");
parent.appendChild(input);
Lấy số lượng trường văn bản từ người dùng và gán nó cho một biến.
var no = document.getElementById("idname").value
Để tạo các trường đầu vào, sử dụng createElementphương thức và chỉ định tên phần tử tức là "đầu vào" làm tham số như bên dưới và gán nó cho một biến.
var textfield = document.createElement("input");
Sau đó gán các thuộc tính cần thiết cho biến.
textfield.type = "text";
textfield.value = "";
Cuối cùng, hãy thêm biến vào phần tử biểu mẫu bằng appendChildphương thức. để phần tử đầu vào sẽ được tạo trong chính phần tử biểu mẫu.
document.getElementById('form').appendChild(textfield);
Lặp lại bước 2,3 và 4 để tạo số phần tử đầu vào mong muốn do người dùng cung cấp bên trong phần tử biểu mẫu.
for(var i=0;i<no;i++) {
var textfield = document.createElement("input");
textfield.type = "text"; textfield.value = "";
document.getElementById('form').appendChild(textfield);
}
Đây là mã hoàn chỉnh
function fun() {
/*Getting the number of text fields*/
var no = document.getElementById("idname").value;
/*Generating text fields dynamically in the same form itself*/
for(var i=0;i<no;i++) {
var textfield = document.createElement("input");
textfield.type = "text";
textfield.value = "";
document.getElementById('form').appendChild(textfield);
}
}<form id="form">
<input type="type" id="idname" oninput="fun()" value="">
</form>Bạn có thể làm điều gì đó như thế này trong một vòng lặp dựa trên số lượng trường văn bản mà họ nhập.
$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');
Nhưng để có hiệu suất tốt hơn, trước tiên tôi sẽ tạo tất cả html và đưa nó vào DOM chỉ một lần.
var count = 20;
var html = [];
while(count--) {
html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));
Chỉnh sửa ví dụ này sử dụng jQuery để nối thêm html, nhưng bạn cũng có thể dễ dàng sửa đổi nó để sử dụng innerHTML.
Tôi nghĩ rằng liên kết sau đây sẽ giúp bạn. Nếu bạn muốn tạo động các trường và cũng muốn xóa chúng cùng lúc, bạn có thể nhận trợ giúp từ đây. Tôi đã có cùng một câu hỏi, vì vậy tôi đã có câu trả lời
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
i--;Ngoài ra, bạn sẽ phải xử lý riêng biệt trường đầu vào gốc và trường nhập bổ sung nếu bạn đặt nó vào một biểu mẫu được xử lý bởi PHP.
Xem câu trả lời này cho một giải pháp không phải JQuery. Chỉ giúp tôi ra ngoài!
bạn có thể sử dụng ES6 back thoát
var inputs = [
`<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button id='notebtn0' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button class='notebuttons' id='notebtn9' >creat</button>`
].sort().join(" ");
document.querySelector('#hi').innerHTML += `<br>` +inputs;<div id="hi"></div>Ý tưởng cốt lõi của giải pháp là:
inputyếu tố mớitextĐiều này có thể được thực hiện thông qua tập lệnh đơn giản này:
var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);
Bây giờ câu hỏi là, làm thế nào để làm cho quá trình này động. Như đã nêu trong câu hỏi, có một đầu vào khác mà người dùng chèn số lượng đầu vào để tạo. Điều này có thể được thực hiện như sau:
function renderInputs(el){
var n = el.value && parseInt(el.value, 10);
if(isNaN(n)){
return;
}
var input;
var parent = document.getElementById("parent");
cleanDiv(parent);
for(var i=0; i<n; i++){
input = document.createElement('input');
input.setAttribute('type', 'text');
parent.appendChild(input);
}
}
function cleanDiv(div){
div.innerHTML = '';
}Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<div id="parent">
Generated inputs:
</div>nhưng thường chỉ thêm một đầu vào là không thực sự hữu ích, tốt hơn là thêm tên cho đầu vào, để nó có thể dễ dàng được gửi dưới dạng biểu mẫu. Đoạn mã này cũng thêm một tên:
function renderInputs(el){
var n = el.value;
var input, label;
var parent = document.getElementById("parent");
cleanDiv(parent);
el.value.split(',').forEach(function(name){
input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', name);
label = document.createElement('label');
label.setAttribute('for', name);
label.innerText = name;
parent.appendChild(label);
parent.appendChild(input);
parent.appendChild(document.createElement('br'));
});
}
function cleanDiv(div){
div.innerHTML = '';
}Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">
</div>Truy vấn và lấy phần tử DOM vùng chứa
Tạo phần tử mới
Đặt phần tử mới vào tài liệu Cây
//Query some Dib region you Created
let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper");
let input = document.createElement("input");
//create new Element for apex
input.setAttribute("type","text");
input.setAttribute("size","30");
containter.appendChild(input); // put it into the DOM
<button id="add" onclick="add()">Add Element</button>
<div id="hostI"></div>
<template id="templateInput">
<input type="text">
</template>
<script>
function add() {
// Using Template, element is created
var templateInput = document.querySelector('#templateInput');
var clone = document.importNode(templateInput.content, true);
// The Element is added to document
var hostI = document.querySelector('#hostI');
hostI.appendChild(clone);
}
</script>
Mẫu HTML hiện là tiêu chuẩn được khuyến nghị để tạo nội dung động.