How to display the value of an input on jquery?

Question

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();


   }
    });

  });

Your code should work just fine. I just don't see a "NameInput1" in your code on the second form. But you'd just set that field with .val() again. — Grant Noe
– Grant Noe, Commented Jun 17, 2019 at 17:59
I write like that but it does not work: name: ("# input1"). val (), you can write complete code to solve the problem please — Najib Marzouk
– Najib Marzouk, Commented Jun 17, 2019 at 18:09

Carlos27 · Accepted Answer · 2019-06-17 18:25:07Z

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>

Collectives™ on Stack Overflow

How to display the value of an input on jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related