我在一个form1中有一个输入,并且一个表包含在form 2中的input2,我想在单击按钮validate时将form1的input1的值放入数组input2 form2中,在我的情况下,它给出了值仅在表的第一行的第一个输入1处,知道按钮会验证隐藏form1并显示form2.plz帮助
<div id='form1'>
<div class="form-group col-md-4 col-md-offset-4">
<label>number day 1</label>
<input type="text" id='input1' class="form-control" placeholder="nombre de jour 1">
<span id='error'>Input can not blank</span>
</div>
<table class="table table-bordered">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button id="hide" class="btn btn-success " type="submit">valider</button>
</div>
</div>
<!------table2 ------>
<div id='form2'>
<table class="table table-bordered">
<tr>
<td><input type="text" id='input2' class="form-control" placeholder="nombre de jour 2"></td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
</tr>
<tr>
<td><input type="text" id='input2' class="form-control" placeholder="nombre de jour 2"></td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
</tr>
</table>
</div>
对jquery进行编码以显示和隐藏表单并将值输入:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('#input2').val(value);
}
});
});
代码CSS
<style>
#form2{
display:none;
}
#error{
color:red;
display:none;
}
</style>
答案 0 :(得分:1)
如果我正确理解了您的问题,则要将表1中的输入框的值放入表中的两个输入框。
将id =“ input2”更改为class =“ input2”,然后在jQuery中更改选择器。
这是您需要更改的内容
<div id='form2'>
<table class="table table-bordered">
<tr>
<td><input type="text" class='input2' class="form-control" placeholder="nombre de jour 2"></td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
</tr>
<tr>
<td><input type="text" class='input2' class="form-control" placeholder="nombre de jour 2"></td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
</tr>
</table>
</div>
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('.input2').val(value);
}
});
});