时间戳

首页 > 解决方案 > 如何在 jquery 上显示输入的值？

jquery - 如何在 jquery 上显示输入的值？

问题描述

我有两种形式：form1 和 form2。form2 被隐藏，当我点击验证按钮时，form1 消失，form2 出现。form1 包含一个 input1。当我单击验证按钮时，我希望将 input1 的值放在 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>

代码jQuery：

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

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


   }
    });

  });

标签： jquery

解决方案

如果我理解正确，您错过了将姓名发送到其他表格的部分，对吗？如果这是问题所在，因为您在第二个表单上没有输入，只需添加一个<span id="thename"></span>带有 id 的 a，这样您就可以选择它并从第一个表单中为其命名。从那里使用 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>

推荐阅读