如何获取值输入使用jQuery

时间:2019-06-18 13:37:35

标签: jquery

我有2种形式: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);
   }
    });
  });

1 个答案:

答案 0 :(得分:2)

由于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: