带有foreach循环的同一div中的两个表单

时间：2018-04-10 08:00:14

标签： javascript jquery laravel-5

我使用两种形式进行兼职和全职提交，我也使用foreach循环使其调用动态。但问题是当隐藏和显示这些形式时，全时形式放置在其位置但是半个时间留下全时形式占据的空间。现在我试图在“区域”div中显示两种形式。

是的，请告诉我在哪里放置foreach语句我想从数据库中动态调用它

Blade.php 

function hideA(x) {
  if (x.checked) {
    var full1 = document.getElementById("fullEmployeeType").style.visibility = "hidden";
    var part1 = document.getElementById("partEmployeeType").style.visibility = "visible";
  }
  var form = document.getElementById("area");
  form.appendChild(part1);

}

function hideB(x) {
  if (x.checked) {
    document.getElementById("partEmployeeType").style.visibility = "hidden";
    document.getElementById("fullEmployeeType").style.visibility = "visible";
  }
  $('.area').empty();
  $('.area').append(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel-body pl-0">
  <input id="checkbox3" data-type="round" type="radio" onchange="hideB(this)" name="full" checked>Full Time
  <input id="checkbox3" data-type="round" type="radio" onchange="hideA(this)" name="full">Part Time

  <div id="area" class="area">

  </div>
  <form name="fullEmployeeType" id="fullEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Full</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>



  <form name="partEmployeeType" style="visibility: hidden" id="partEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Part</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>
</div>

4 个答案:

答案 0 :(得分：2)

问题是你正在使用css property style =“visibility：hidden”。这样做，它隐藏了元素，但元素仍占据空间。 而是使用：

if (x.checked) {
        var full1=document.getElementById("fullEmployeeType").style.display = "none";
        var part1=document.getElementById("partEmployeeType").style.display = "block";
    }

和表单

<form name="partEmployeeType" style="display: none" id="partEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">

答案 1 :(得分：1)

我相信你是最难的方式。

  1. 可见性占用空间

  2. 使用jQuery切换显示和隐藏使用display：none

  3. 你需要两种形式吗？你可以只显示和隐藏不同的东西

    4. $(function() {
 $("[name=full]").on("click",function() {
   $("#fullEmployeeType").toggle(this.id=="yes");
   $("#partEmployeeType").toggle(this.id=="no");
 });
 $("[name=full]:checked").click()
});
    .area { background-color:yellow }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel-body pl-0">
  <input id="yes" data-type="round" type="radio" name="full" checked>Full Time
  <input id="no" data-type="round" type="radio" name="full">Part Time

  <div id="area" class="area">

    <form name="fullEmployeeType" id="fullEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
      {{csrf_field()}}
      <p>Full</p>
      <input type="hidden" name="action" value="update">
      <div class="form-group">
        <label>System Inactivity Logout Time (Minutes)</label>
        <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
      </div>
      <div class="form-group">
        <label>Prayer Break (Minutes)</label>
        <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
      </div>
      <div class="form-group">
        <label>Toilet Break (Minutes)</label>
        <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
      </div>
      <div class="form-group">
        <label>Other (Lunch/Tea) (Minutes)</label>
        <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
      </div>
      <div class="form-group">
        <label>Late Arrival Deduction (Minutes)</label>
        <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
      </div>
      <div class="button-group">
        <input type="submit" value="Update" class="btn btn-info" />
      </div>
    </form>



    <form name="partEmployeeType"  id="partEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
      {{csrf_field()}}
      <p>Part</p>
      <input type="hidden" name="action" value="update">
      <div class="form-group">
        <label>System Inactivity Logout Time (Minutes)</label>
        <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
      </div>
      <div class="form-group">
        <label>Prayer Break (Minutes)</label>
        <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
      </div>
      <div class="form-group">
        <label>Toilet Break (Minutes)</label>
        <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
      </div>
      <div class="form-group">
        <label>Other (Lunch/Tea) (Minutes)</label>
        <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
      </div>
      <div class="form-group">
        <label>Late Arrival Deduction (Minutes)</label>
        <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
      </div>
      <div class="button-group">
        <input type="submit" value="Update" class="btn btn-info" />
      </div>
    </form>
  </div>
</div>

答案 2 :(得分：0)

简单我只是首先隐藏两个表格，并根据已检查的电台的值显示任何一个或全部的一个 // HTML 

$(function() {
  toggleForm();
  $("input[name=full]").on("change", function() {

    toggleForm();
  })
})

function toggleForm() {
  $(".form").hide();

  if ($("input[name=full]:checked").val() == 1) {
    $(".form1").show();
  } else {
    $(".form2").show();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel-body pl-0">
  <input value="1" id="checkbox3" data-type="round" type="radio" name="full" checked>Full Time
  <input value="2" id="checkbox3" data-type="round" type="radio" name="full">Part Time
  <form name="fullEmployeeType" id="fullEmployeeType" class="form form1" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Full</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>



  <form name="partEmployeeType" id="partEmployeeType" class="form form2" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Part</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>
</div>

答案 3 :(得分：0)

您可以真正简化代码。

您不需要为每个按钮创建一个功能，而是可以使用.on("change", function(){ … })将功能绑定到它们两个。
您还应该使用jQuery的.show()和.hide()，这将使您的代码更容易。

因此，以下是我将如何管理您的单选按钮操作：

$(".checkbox3").on("change", function() {
  $( $(".checkbox3:not(:checked)").attr("val") ).hide();
  $( $(".checkbox3:checked").attr("val") ).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel-body pl-0">
  <!-- Here I changed id to class, because you shouldn't use the same id for both of your radio buttons, and added the "val" attribute -->
  <input val="#fullEmployeeType" class="checkbox3" data-type="round" type="radio" name="full" checked>Full Time
  <input val="#partEmployeeType" class="checkbox3" data-type="round" type="radio" name="full">Part Time

  <div id="area" class="area">

  </div>
  <form name="fullEmployeeType" id="fullEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Full</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>


  <!-- I changed style to "display: none;" -->
  <form name="partEmployeeType" style="display: none" id="partEmployeeType" role="form" method="post" action="{{url('/system-configurations')}}">
    {{csrf_field()}}
    <p>Part</p>
    <input type="hidden" name="action" value="update">
    <div class="form-group">
      <label>System Inactivity Logout Time (Minutes)</label>
      <input class="form-control validate[required]" name="inactivity_logout_time" id="inactivity_logout_time" type="text" value="{{$systemConfig[0]->inactivity_logout_time}}">
    </div>
    <div class="form-group">
      <label>Prayer Break (Minutes)</label>
      <input class="form-control validate[required]" name="prayer_break" id="prayer_break" type="text" value="{{$systemConfig[0]->prayer_break}}">
    </div>
    <div class="form-group">
      <label>Toilet Break (Minutes)</label>
      <input class="form-control validate[required]" name="toilet_break" id="toilet_break" type="text" value="{{$systemConfig[0]->toilet_break }}">
    </div>
    <div class="form-group">
      <label>Other (Lunch/Tea) (Minutes)</label>
      <input class="form-control validate[required]" name="other_breaks" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="form-group">
      <label>Late Arrival Deduction (Minutes)</label>
      <input class="form-control validate[required]" name="late_arrival" id="other_breaks_lunch_toilet_tea" type="text" value="{{$systemConfig[0]->other_breaks_lunch_toilet_tea}}">
    </div>
    <div class="button-group">
      <input type="submit" value="Update" class="btn btn-info" />
    </div>
  </form>
</div>

相关问题
最新问题