Two forms in same div with foreach loop

Question

I am using two form for part time and full time submission and I am also to use foreach loop to make its call dynamic. But the problem is when hide and show these form, full time form is placed in its place but half time leaves space that full time form occupies. Now I am trying to show both form in "area" div.

And yes, Please also tell me where to put foreach statement I want to call it dynamically from database

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>

1. Please update the snippet I made for you to have only HTML and Script if it is a jQuery question. 2 Why not use jQuery to show and hide? `$("#fullEmployeeType").toggle(!x.checked);$("#partEmployeeType").toggle(x.checked);` — mplungjan, Apr 10 '18 at 08:02
[Use display: none](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) instead of visibility: hidden — alexP, Apr 10 '18 at 08:04
I am able to show an hide forms but problem to show both forms in specific div — Faiez, Apr 10 '18 at 08:04
You shouldn't use the same `id` (`checkbox3`) for both of your radio buttons. — Takit Isy, Apr 10 '18 at 08:19

score 2 · Answer 1 · answered Apr 10 '18 at 08:12

The problem is you are using css property style="visibility: hidden". What this does is, it hides the element but the element still occupies the space. Instead use :

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

and for form

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

mplungjan · Accepted Answer · 2018-04-10T09:32:18.910

I believe you are going about this the hardest way.

Visibility takes up space
Using jQuery toggle you show and hide using display:none
Do you NEED two forms? you can show and hide just the things that are different

$(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>

alexP answer had worked but now the problem is where to put foreach loop — Faiez, Apr 10 '18 at 08:20
I do not know what you mean by loop. If that’s a server thing, please ask a new question — mplungjan, Apr 10 '18 at 08:48

score 0 · Answer 3 · edited Apr 10 '18 at 08:56

Simple i just hide both form first and according to value of checked radio show one of any either full or part //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>

Takit Isy · Answer 4 · 2018-04-10T08:44:28.507

You can really simplify your code.

You don't need to create a function for each of your buttons, instead you can bind a function to both of them using .on("change", function(){ … }).
You should also use jQuery's .show() and .hide(), this will make your code a lot easier.

So, here is how I'll do to manage your radio buttons actions:

$(".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>

Two forms in same div with foreach loop

4 Answers4