如何将输入值1放入输入2中，使用jquery

Question

i have 2 input, i want when i click on button validate the value of input 1 puts in the input 2 and also it's input 1 empty give a message fill input 1. help plz. knowing that the button validate hide the form 1 and display the form 2:

    <div id='form1'>
     <div class="form-group col-md-4 col-md-offset-4">
        <label>number day 1</label>
       <input type="text" class="form-control" placeholder="nombre de jour 1">
     </div> 
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></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'>
   <div class="form-group col-md-4 col-md-offset-4">
        <label>Number day 2</label>
       <input type="text" class="form-control" placeholder="nombre de jour 2">
    </div>  

   <table class="table table-bordered">
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
  </table>
</div>

jquery code to hide form1 and display form2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){

    $("#form1").hide();
  });
  $("#hide").click(function(){
    $("#form2").show();
  });
});

</script>

the CSS code to hide the form 2 at the start:

        <style>
    #form2{
display:none;
}         
</style>

Answer 1

You can set id for input and use

let value = $('#input1').val();
$('#input2').val(value);

 $(document).ready(function(){ $("#hide").click(function(){ let value = $('#input1').val(); if (value == ""){ $('#error').show(); }else{ $("#form1").hide(); $("#form2").show(); $('#input2').val(value); } }); }); 

 #form2{ display:none; } #error{ color:red; display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <td><a href="#" class="hit">click</a></td> </tr> <tr> <td>ee</td> <td>ff</td> <td>gg</td> <td>hh</td> <td><a href="#" class="hit">click</a></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'> <div class="form-group col-md-4 col-md-offset-4"> <label>Number day 2</label> <input type="text" id='input2' class="form-control" placeholder="nombre de jour 2"> </div> <table class="table table-bordered"> <tr> <td>rr</td> <td>rr</td> <td>rr</td> <td>rr</td> <td><a href="#" class="hit">click</a></td> </tr> <tr> <td>rr</td> <td>rr</td> <td>rr</td> <td>rr</td> <td><a href="#" class="hit">click</a></td> </tr> </table> </div>