使用JavaScript在laravel中添加输入
使用JavaScript在laravel中添加输入
提问于 2020-06-24 19:47:19
我在表单中有一些输入字段。它可以使用javascript动态添加。例如，如果我选择了孩子的数量，那么与我选择的数量相对应的div就会添加到下面，所有的输入字段都是这样的。
但我想在选择了孩子的数量后有这个表格
我的代码如下：
document.addEventListener("change",function(f){ //On ajoute un ecouteur d'evenement de type change, et on appelle l'evenement f
var div = document.getElementById("bloc_enfants");
div.innerHTML= '';
var x = f.target.value; //On recupere la value du select
for(i=1;i<=x;i++){
var div_input = document.createElement("div");
//Ajout d'un input pour les prénoms et nom
var label_input = document.createElement("label");
label_input.innerHTML='Prénoms et nom Enfant '+i;
div_input.appendChild(label_input); //on ajoute le label dans la div input
var input = document.createElement("input");
input.setAttribute("class","form-control");
input.setAttribute("name","prenoms_et_nom_enfant"+i);
input.setAttribute("id","prenoms_et_nom_enfant"+i);
input.setAttribute("required","required");
div_input.appendChild(input);
div.appendChild(div_input); //ajoute input dans div
var input = document.createElement("div");
//Ajout de deux boutons radios pour le sexe enfant
var label_input = document.createElement("label");
label_input.innerHTML='Sexe enfant '+i;
div_input.appendChild(label_input); //on ajoute le label dans la div input
var input = document.createElement("input");
input.setAttribute("type","radio");
input.setAttribute("class","form-control");
input.setAttribute("name","sexe_enfant_"+i);
input.setAttribute("id","sexe_enfant_"+i);
input.setAttribute("required","required");
div_input.appendChild(input);
//Ajout d'un input pour la date de naissance
var label_input = document.createElement("label");
label_input.innerHTML='Date de naissance enfant '+i;
div_input.appendChild(label_input); //on ajoute le label dans la div input
var input = document.createElement("input");
input.setAttribute("class","form-control");
input.setAttribute("name","date_de_naissance_enfant_"+i);
input.setAttribute("id","date_de_naissance_enfant_"+i);
input.setAttribute("required","required");
div_input.appendChild(input);
var div_input = document.createElement("div");
}
}) <div class="col-lg-12">
<div class="col-lg-3">
<select required class="form-control" name='nombre_denfants' id='nombre_denfants'>
<option value="" disabled selected >Sélectionner le nombre d'enfants</option>
<option name='nombre_denfants'>1</option>
<option name='nombre_denfants'>2</option>
<option name='nombre_denfants'>3</option>
<option name='nombre_denfants'>4</option>
<option name='nombre_denfants'>5</option>
<option name='nombre_denfants'>6</option>
<option name='nombre_denfants'>7</option>
<option name='nombre_denfants'>8</option>
<option name='nombre_denfants'>9</option>
<option name='nombre_denfants'>10</option>
<option name='nombre_denfants'>11</option>
<option name='nombre_denfants'>12</option>
</select>
</div>
<div class="col-lg-3"> </div>
<div class="col-lg-3"> </div>
<div class="col-lg-3"> </div>
</div>
<div class="row" style="margin-bottom:5px;margin-top:10px;margin-left:10px;">
<div class="col-lg-3"> </div>
<div class="col-lg-3" id="bloc_enfants"> </div>
<div class="col-lg-3"> </div>
<div class="col-lg-3"> </div>
</div>我的问题是:如何将每个div放在同一行中？谁能帮帮我1：https://i.stack.imgur.com/dgNXJ.png 2：https://i.stack.imgur.com/fzsYm.png 3：https://i.stack.imgur.com/Xu4Az.png
回答 1
Stack Overflow用户
发布于 2020-06-24 22:13:51
像这样添加类行。请浏览引导程序文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62554330
复制相关文章
相似问题
腾讯云开发者
