CODEWITHSUNDEEP
jquery
Najib Marzouk
Najib Marzouk

Reputation: 355

How to display the value of an input on jquery?

I have 2 forms: form1 and form2. form2 is hidden and when I click on the validation button, form1 disappears and form2 appears. form1 contains an input1. When I click on the validation button, I want the value of input1 to be put after "name:" on form2.

<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="name">
       <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'>
    <h4>name : </h4>
     <table class="table table-bordered">
     <tr>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
     </tr>
     <tr>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
     </tr>
    </table>
  </div>

code jquery:

 $(document).ready(function(){
    $("#hide").click(function(){
  let value = $('#input1').val();

  if (value = ""){
     $('#error').show();
  }else{
      $("#form1").hide();
       $("#form2").show();


   }
    });

  });

Upvotes: 0

Views: 19

Answers (1)

Carlos27
Carlos27

Reputation: 185

If I understand correctly, you were missing the part where you send the name over to the other form right? If that's the problem, since you don't have an input on the second form, simply add a <span id="thename"></span> with an id so you can select it and give it the name from the first form. From there send the name value over to the span with jQuery.

$('#thename').text(value);


$(document).ready(function() {
  $("#hide").click(function() {
    let value = $('#input1').val();
    $('#thename').text(value);

    if (value = "") {
      $('#error').show();
    } else {
      $("#form1").hide();
      $("#form2").show();


    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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="name">
    <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'>
  <h4>name : <span id="thename"></span></h4>
  <table class="table table-bordered">
    <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
    </tr>
    <tr>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions