[英]Dynamically add inputs to a dynamic form
我打算在必要時以也在 js 中動態返回的形式添加動態輸入。 我正在嘗試這樣做,但如有必要,它不會添加新的輸入。
代碼:
for (var i = 0; i < data1.length; i++) {
Id = data1[i][0];
DataRegisto = data1[i][1];
Cliente = data1[i][2];
Orcamento = data1[i][3];
Ref = data1[i][4];
Designacao = data1[i][5];
Quantidade = data1[i][6];
Valor = data1[i][7];
linha1 += `<div class="input_fields_wrap1">
<div class="form-group col-md-2">
<input type="text" class="form-control1" name="Refe[]" value="${Ref}">
<span class="form-highlight"></span>
<span class="form-bar"></span>
<label class="label1" for="Refe">Refª</label>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control1" name="Valo[]" value="${Valor}">
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Valo">Valor</label>
</div>
<button class="btn btn-warning caixa add_field_button1"><i class="fa fa-plus-square fa-5x taman" aria-hidden="true"></i></button>
</div>`;
$("#retorc1").html(linha1);
$(document).ready(function() {
var max_fields1 = 100; //maximum input boxes allowed
var wrapper1 = $(".input_fields_wrap1"); //Fields wrapper
var add_button1 = $(".add_field_button1"); //Add button ID
var x1 = 1; //initlal text box count
$(add_button1).click(function(e) { //on add input button click
e.preventDefault();
var length1 = wrapper1.find("input:text").length;
if (x1 < max_fields1) { //max input box allowed
x1++; //text box increment
$(wrapper1).append('<div id="teste1"><div class="form-group col-md-2"><input type="text" class="form-control1" name="Refe[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Refe">Refª</label></div><div class="form-group col-md-6"><input type="text" class="form-control1" name="Designaca[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Designaca">Designação</label></div><div class="form-group col-md-2"><input type="text" class="form-control1" name="Qtda[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Qtda">Quantidade</label></div><div class="form-group col-md-2"><input type="text" class="form-control1 Preco1" name="Valo[]" value="0.00" /><span class="form-highlight">$</span><span class="form-bar"></span><label class="label1" for="Valo">Valor</label></div><button class="remove_field1" style="background-color: #313348;"><span class="fa fa-trash fa-fw" aria-hidden="true"></span></button></div>');
}
$('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 });
});
$(wrapper1).on("click", ".remove_field1", function(e) { //user click on remove text
e.preventDefault();
$("#teste1").remove();
x1--;
})
});
沒有返回錯誤,但是當我單擊按鈕添加行時,它什么也不做
我正在嘗試這種方式:
我將 onclick 添加到按鈕:
<button class="btn btn-warning caixa" onclick="adcElemento();"><i class="fa fa-plus-square fa-5x taman" aria-hidden="true"></i></button>
然后我創建了以下 function
function adcElemento() {
let myForm;
myForm = document.getElementById('retorc1');
document.body.appendChild(myForm);
let myInput;
myInput = document.createElement('input');
myForm.appendChild(myInput);
myInput.setAttribute('type', 'text');
myInput.setAttribute('name', 'Refe[]');
}
但它不會向表單添加輸入。
動態地將輸入添加到動態表單
創建一個form
元素:
let myForm;
myForm = document.createElement('form');
將form
元素添加到文檔body
:
document.body.appendChild(myForm);
一旦您開始着手創建一個元素並將其附加到父元素,您就可以創建一個input
元素並將其附加到form
元素,其方式與創建form
元素並將其附加到body
元素:
創建input
元素並將其添加到form
元素:
let myInput;
myInput = document.createElement('input');
myForm.appendChild(myInput);
創建新的動態元素並將其添加到已呈現的元素是一回事,但如果您想為新的動態元素attribute
怎么辦?
你可以這樣做:
myInput.setAttribute('type', 'text');
myInput.setAttribute('value', Ref);
如果您想將class
添加到新的動態元素中怎么辦?
你可以這樣做:
myInput.classList.add('form-control1');
工作示例:
function adcElemento() { let myForm = document.getElementById('retorc1'); let myInput = document.createElement('input'); myInput.setAttribute('type', 'text'); myInput.setAttribute('name', 'Refe[]'); myForm.appendChild(myInput); }
input { display: block; margin: 12px 0 0; }
<form id="retorc1"> <button type="button" class="btn btn-warning caixa" onclick="adcElemento();">Click Me</button> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.