[英]Add input forms dinamically trough AJAX and JQUERY
我現在遇到的問題是,我現在要附加的內容太過僅僅在主JavaScript文件中創建內容。
有沒有一種方法可以將這些內容放入其他HTML文件中,然后在JavaScript文件中使用AJAX調用它,並可能在循環中附加此內容,以將其添加從選擇輸入標記中選擇的次數?
這是選擇輸入代碼:
<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
這是我要附加的內容:
<div class="row beneficiario-info">
<div class="col-md-6">
<div class="form-group w-75">
<label for="bene-nombreyapellido">Nombre y Apellido</label>
<input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
</div>
<!-- form group -->
<div class="form-group w-75">
<label for="bene-ci-numero">Cedula de identidad</label>
<div class="input-group">
<div class="input-group-prepend">
<select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
<option value="VE">V</option>
<option value="EX">E</option>
</select>
</div>
<!-- cedula tipo prepend -->
<input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
</div>
<!-- input group -->
</div>
<!-- form group -->
</div>
<!-- col -->
<div class="col-md-6">
<div class="form-group w-75">
<label for="parentezco">Parentezco</label>
<select name="parentezco" id="parentezco" class="custom-select">
<option value="">---------</option>
<option value="hijo">Hijo</option>
<option value="padre">Padre</option>
<option value="hermano">Hermano o Hermana</option>
<option value="conyugue">Conyugue</option>
</select>
</div>
<div class="form-group">
<label for="servicioadicional">Servicios Adicionales</label>
<select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
<option value="medico">Médico</option>
<option value="odontologico">Odontológico</option>
<option value="funerario">Funerario</option>
<option value="vial">Víal</option>
</select>
</div>
</div>
<!-- col -->
</div>
<!-- row beneficiario -->
這是JavaScript代碼:
var number = 0;
$('#ctd-beneficiarios').on('change', function() {
numero = $(this).val();
beneficiarios_wrapper.html('');
for (var i = 0; i < numero; i++) {
}
});
beneficiarios_wrapper
是要將內容附加到的div。
與其將其存儲在單獨的文件中並通過AJAX進行檢索,不如使用一個隱藏的模板:
$main = $('#main'); for(var i=0;i<5;i++){ var $template = $('.template').clone(); $template.removeClass('template'); $template.find('.mainText').text("Template "+i); $main.append($template); $template.show(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div class="template" style="display:none;"> <span class ="mainText"></span> </div> </div>
或者,正如J. Titus所建議的那樣:
$main = $('#main'); for(var i=0;i<5;i++){ var template = document.getElementById('template').innerHTML; var $template = $(template) $template.find('.mainText').text('Template '+i) $main.append($template); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id="template" type="text/template"> <div> <div class="test"> <span class="mainText">test</span> </div> </div> </script> <div id="main"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.