时间戳

首页 > 解决方案 > 如何将输入的值放入表中的一组输入中使用jquery

jquery - 如何将输入的值放入表中的一组输入中使用jquery

问题描述

我在表单 1 中有一个输入，并且一个表在表单 2 中包含输入 2，当我单击按钮验证时，我想将表单 1 的输入 1 的值放入数组输入 2 表单 2 中，在我的情况下，它仅在表格第一行的第一个输入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>

标签： jquery

解决方案

如果我正确理解您的问题，您希望将输入框的值从 form1 放入表中的两个输入框。

将 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);
   }
    });

  });

推荐阅读