如何从 javascript 变量设置 th:field thymeleaf
how to set th:field thymeleaf from javascript variable
我正在使用 J2EE Spring 启动 jpa 和 thymeleaf
我有一个表单(thymeleaf),当我点击一个添加按钮时,将使用 javascript 动态创建一个 table,一行包含几个 select 下拉列表我如何分配值 select在下拉菜单中输入百里香字段
html 形式:
<form th:object="${order}" method="post" th:action="@{'/order'}">
<table id="myTable2" >
<tr id="initialRow1" class="select_row">
<td> <button type="button" onClick ="addRow(this)">Add</button>
<label> Adultes</label>
<select id="select8" class="select1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option
><option>5</option>
<option>6</option>
</select>
<label>Enfatns</label>
<select id="idS" class="select2" onchange="myFunction()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></td>
</tr>
</table>
<div class="mb-3">
<label for="numberOfAdults">Nombre Adultes</label>
<select th:field="*{numberOfAdults}" class="form-select form-select-sm"
aria-label=".form-select-sm example">
<option th:each="idx: ${#numbers.sequence(0, travel.numberOfAdults)}"
th:value="${idx}"
th:text="${idx}"></option>
</select>
</div>
<div class="mb-3">
<label for="numberOfChildren">numberOfChildren</label>
<select id="numberOfChildren" th:field="*{numberOfChildren}" class="form-
select form-select-sm"
aria-label=".form-select-sm example">
<option th:each="idx: ${#numbers.sequence(0, travel.numberOfChildren)}"
th:value="${idx}"
th:text="${idx}"></option>
</select>
</div>
<div>
<input type="hidden" th:field="*{travel.id}">
</div>
<script th:inline="javascript">
/*<![CDATA[*/
function sumOppositeWalls(nbrA){
var table = document.getElementById('myTable2');
var rowCount = table.rows.length;
//alert(rowCount);
var minusCount=0;
for(var i=1;i<rowCount;i++){
nbrA=document.getElementById('id1_'+i).value;
alert(nbrA);
}
var wall2=document.getElementById('select8').value;
alert(wall2);
}/*]]>*/
</script>
<br>
<button type="submit" class="btn btn-primary">Aller au sommaire
</button>
</form>
le javaScript
<script th:inline="javascript">
window. addRow = function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "text";
element1.innerHTML="Adultes :";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.id="numberOfAdults" ;
element2.setAttribute("th:field","*{numberOfAdults}");
//element2.type = "select";
var option1 = document.createElement("option");
option1.innerHTML = "1";
option1.value = "1";
element2.add(option1, null);
var option2 = document.createElement("option");
option2.innerHTML = "2";
option2.value = "2";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "3";
option2.value = "3";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "4";
option2.value = "4";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "5";
option2.value = "5";
element2.add(option2, null);
element2.add(option2, null);
cell2.appendChild(element2);
}
</script>
enter image description here
我找到了我在 javascript 代码中添加的解决方案:
element2.name="numberOfAdults"; // when i create the dropdown dynamically
.......
在我获取值的函数上添加此代码:
function sumOppositeWalls(nbrA){
var table = document.getElementById('myTable2');
var rowCount = table.rows.length;
//alert(rowCount);
var minusCount=0;
for(var i=1;i<rowCount;i++){
nbrA=document.getElementById('id1_'+i).value;
nbrE=document.getElementById('id2_'+i).value;
$('#numberOfAdults').val()=nbrA;
$('#numberOfChildren').val()=nbrb;
alert(nbrA);
}
我正在使用 J2EE Spring 启动 jpa 和 thymeleaf 我有一个表单(thymeleaf),当我点击一个添加按钮时,将使用 javascript 动态创建一个 table,一行包含几个 select 下拉列表我如何分配值 select在下拉菜单中输入百里香字段
html 形式:
<form th:object="${order}" method="post" th:action="@{'/order'}">
<table id="myTable2" >
<tr id="initialRow1" class="select_row">
<td> <button type="button" onClick ="addRow(this)">Add</button>
<label> Adultes</label>
<select id="select8" class="select1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option
><option>5</option>
<option>6</option>
</select>
<label>Enfatns</label>
<select id="idS" class="select2" onchange="myFunction()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></td>
</tr>
</table>
<div class="mb-3">
<label for="numberOfAdults">Nombre Adultes</label>
<select th:field="*{numberOfAdults}" class="form-select form-select-sm"
aria-label=".form-select-sm example">
<option th:each="idx: ${#numbers.sequence(0, travel.numberOfAdults)}"
th:value="${idx}"
th:text="${idx}"></option>
</select>
</div>
<div class="mb-3">
<label for="numberOfChildren">numberOfChildren</label>
<select id="numberOfChildren" th:field="*{numberOfChildren}" class="form-
select form-select-sm"
aria-label=".form-select-sm example">
<option th:each="idx: ${#numbers.sequence(0, travel.numberOfChildren)}"
th:value="${idx}"
th:text="${idx}"></option>
</select>
</div>
<div>
<input type="hidden" th:field="*{travel.id}">
</div>
<script th:inline="javascript">
/*<![CDATA[*/
function sumOppositeWalls(nbrA){
var table = document.getElementById('myTable2');
var rowCount = table.rows.length;
//alert(rowCount);
var minusCount=0;
for(var i=1;i<rowCount;i++){
nbrA=document.getElementById('id1_'+i).value;
alert(nbrA);
}
var wall2=document.getElementById('select8').value;
alert(wall2);
}/*]]>*/
</script>
<br>
<button type="submit" class="btn btn-primary">Aller au sommaire
</button>
</form>
le javaScript
<script th:inline="javascript">
window. addRow = function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("label");
element1.type = "text";
element1.innerHTML="Adultes :";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.id="numberOfAdults" ;
element2.setAttribute("th:field","*{numberOfAdults}");
//element2.type = "select";
var option1 = document.createElement("option");
option1.innerHTML = "1";
option1.value = "1";
element2.add(option1, null);
var option2 = document.createElement("option");
option2.innerHTML = "2";
option2.value = "2";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "3";
option2.value = "3";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "4";
option2.value = "4";
element2.add(option2, null);
var option2 = document.createElement("option");
option2.innerHTML = "5";
option2.value = "5";
element2.add(option2, null);
element2.add(option2, null);
cell2.appendChild(element2);
}
</script>
enter image description here
我找到了我在 javascript 代码中添加的解决方案:
element2.name="numberOfAdults"; // when i create the dropdown dynamically
.......
在我获取值的函数上添加此代码:
function sumOppositeWalls(nbrA){
var table = document.getElementById('myTable2');
var rowCount = table.rows.length;
//alert(rowCount);
var minusCount=0;
for(var i=1;i<rowCount;i++){
nbrA=document.getElementById('id1_'+i).value;
nbrE=document.getElementById('id2_'+i).value;
$('#numberOfAdults').val()=nbrA;
$('#numberOfChildren').val()=nbrb;
alert(nbrA);
}