javascript - 如何获取值输入使用jquery

Question

我有两种形式：form1 和 form2。form2 被隐藏，当我点击验证按钮时，form1 消失，form2 出现。form1 包含一个 input1。当我单击验证按钮时，我希望将 Nameinput1 的值放在 form2 上的“name:”之后。有人告诉我错误在哪里

  <div id='form1'>
    <h3>form group 1</h3>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif

     {!! csrf_field() !!}

    <div class="form-group">
     <label>Date:</label>
      <input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
    </div>

    <div class="form-group">
      <label>Select Chantier:</label>
      {!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
    </div>

    <div class="form-group">
      <label>Select Ouvrage:</label>
      {!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
    </div>

    <div class="form-group">
      <label>Nbre de jour</label>
        <input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
      <span id='error'>Input can not blank</span>
    </div>
    <div class="form-group">
      <label>name</label>
        <input type="text"  id='name' class="form-control" placeholder="name">
    </div>

    <div class="form-group col-md-offset-5 ">
      <button class="btn btn-success " type="submit" id="hide">valider</button>
    </div>

  </div>

表格 2：

<div id='form2'>
    <h3>form group 2</h3>
    <h4>name : <span id="name"></span></h4>

   <table class="table table-bordered" id="mytable">
        <tr>
            <th>Archive</th>
            <th><input type="checkbox" id="check_all"></th>
            <th>S.No.</th>
            <th>matricule</th>
            <th>nom & prenom</th>
            <th>salaire net</th>
            <th>nbre de jour </th>
            <th>prime</th>
        </tr>
        @if($salaries->count())
            @foreach($salaries as $key => $salarie)
                <tr id="tr_{{$salarie->id}}">
                  <td>archive</td>
                  <td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
                  <td>{{ ++$key }}</td>
                  <td>{{ $salarie->matricule }}</td>
                  <td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
                  <td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
                  <td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
                  <td><input type="text" name="prime" class="form-control" value="0"></td>
                </tr>
            @endforeach
        @endif
    </table>

  <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success add-all" type="submit" >Pointage</button>
  </div>

 </div>
</div>

代码jQuery：

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

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

       $('.input2').val(value);
   }
    });
  });

标签： javascriptjquery

Answer 1

因为 2 种形式的 id 与名称相同，所以您需要使用 $('#form2 #name').text(value);

$(document).ready(function(){
    $("#hide").click(function(){
  let value = $('#input1').val();
  let name = $('#form1 #name').val();
  //alert(name);
   $('#form2 #name').text(name);

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

       $('.input2').val(value);
   }
    });
  });

$(document).ready(function(){
    $("#hide").click(function(){
  let value = $('#input1').val();
  let name = $('#form1 #name').val();
  //alert(name);
   $('#form2 #name').text(name);

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

       $('.input2').val(value);
   }
    });
  });

#form2{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
    <h3>form group 1</h3>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif

     {!! csrf_field() !!}

    <div class="form-group">
     <label>Date:</label>
      <input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
    </div>

    <div class="form-group">
      <label>Select Chantier:</label>
      {!! Form::select('chantier_id',[''=>'--- Select Chantier ---']+$chantiers,null,array('class' => 'form-control','id' => 'select1')) !!}
    </div>

    <div class="form-group">
      <label>Select Ouvrage:</label>
      {!! Form::select('ouvrage_id',[''=>'--- Select Ouvrage ---'],null,array('class' => 'form-control','id' => 'select2')) !!}
    </div>

    <div class="form-group">
      <label>Nbre de jour</label>
        <input type="text" name="nbr" id='input1' class="form-control" placeholder="nbre de jour" value="1">
      <span id='error'>Input can not blank</span>
    </div>
    <div class="form-group">
      <label>name</label>
        <input type="text"  id='name' class="form-control" placeholder="name">
    </div>

    <div class="form-group col-md-offset-5 ">
      <button class="btn btn-success " type="submit" id="hide">valider</button>
    </div>

  </div>

<div id='form2'>
    <h3>form group 2</h3>
    <h4>name : <span id="name"></span></h4>

   <table class="table table-bordered" id="mytable">
        <tr>
            <th>Archive</th>
            <th><input type="checkbox" id="check_all"></th>
            <th>S.No.</th>
            <th>matricule</th>
            <th>nom & prenom</th>
            <th>salaire net</th>
            <th>nbre de jour </th>
            <th>prime</th>
        </tr>
        @if($salaries->count())
            @foreach($salaries as $key => $salarie)
                <tr id="tr_{{$salarie->id}}">
                  <td>archive</td>
                  <td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
                  <td>{{ ++$key }}</td>
                  <td>{{ $salarie->matricule }}</td>
                  <td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
                  <td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
                  <td ><input type="text" class='input2' name="nbreJ" class="form-control" ></td>
                  <td><input type="text" name="prime" class="form-control" value="0"></td>
                </tr>
            @endforeach
        @endif
    </table>

  <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success add-all" type="submit" >Pointage</button>
  </div>

 </div>
</div>
code jquery: