Develop Reference

remove required tags on hidden tabs with Javascript

I would remove required tag from fields are in hidden tabs when I click on tab using Javascript. The fields with required tag, since they are not used, block the submit form, preventing insertion into the database. This is my code:
<ul class="nav nav-tabs nav-justified">
<li class="active">Cliente</li>
<li>Azienda</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cliente">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nome">Nome*</label>
<input class="form-control" name="nome" id="nome" required="true" autocomplete="off" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sesso">Sesso*</label>
<select class="form-control chosen chzn-done" name="sesso" id="sesso" required="true" style="display: none;">
<option value="" selected="\"selected\""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="azienda">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ragione_sociale">Ragione sociale*</label>
<input class="form-control " name="ragione_sociale" id="ragione_sociale" required="true" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="desc_attivita">Descrizione attività dell'azienda*</label>
<textarea class="form-control " name="desc_attivita" id="desc_attivita" required="true"></textarea></ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="citta">Città*</label>
<input class="form-control " name="citta" id="citta" required="true" value="" autocomplete="off">
</div>
</div>
</div>

First find all the select elements, then loop through them, if they are rendered as display: none then change the required attribute to false.
document.querySelectorAll('select').forEach((elem) => {
if (window.getComputedStyle(elem).display === 'none') {
elem.required = false;
}
});
If you know the id's or classes of the elements that will be display none, then you can just use those instead of using the loop.

How can I call a function independently on each element in a page?

For each element in my database, I am creating a separate thumbnail to display. I have a dropdown menu, and depending on the user's selection I want to show a different form using a function, but the function only works on the first element in the page. When I make a selection on the second, third element, the selection affects the first element and not its corresponding element. How can I solve this such that when I make a selection on the first element, it affects the first element, a selection on the second element affects the second element and so on? My code looks something like this at the moment (in the example below the elements are hard-coded, but in my actual code the elements come from a database and are displayed in a loop):
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function choose(that) {
if (that.value == "option1") {
document.getElementById("option1").style.display = "block";
document.getElementById("option2").style.display = "none";
} else {
document.getElementById("option1").style.display = "none";
document.getElementById("option2").style.display = "block";
}
}
</script>
I already tried using a jquery each() loop but to no avail. I tried jquery by adding a class to the parent div in each element, and wrapping my current function in a $('.newClass').each(function choose(that){...});.
I also tried getting all the elements with the new class in the parent div, and then looping through them and calling the current function in each iteration but that didn't work. Something like:let elements = document.querySelectorAll('.newClass'); and then for(let i = 0; ...){function choose(that){...}}.
I have also tried not using loops, but instead, use jquery to get the next element of a certain class, and use classes instead of ids in my code. I think this is the best approach but I cannot get it to work. My new function that uses classes instead of ids looks like:
function choose(that) {
if (that.value == "option1") {
$(this).closest('.option1').style.display = "block";;
$(this).closest('.option2').style.display = "none";
} else {
$(this).closest('.option1').style.display = "none";
$(this).closest('.option2').style.display = "block";
}
}
Please help, how can I get this to work?

The mistake was duplicated id attributes. What I've done was prefixing them based on the section-name:
first-section-option1
first-section-option2
second-section-option1
second-section-option2
and used CSS attribute selector, targeting sibling with id ending with desired option index:
[id$="option1"]
I also prefixed the select's id attributes, but it's irrelevant.
Working example below:
function choose(that) {
var $select = $(that);
if (that.value == "option1") {
$select.siblings('[id$=option1]').show();
$select.siblings('[id$=option2]').hide();
} else {
$select.siblings('[id$=option2]').show();
$select.siblings('[id$=option1]').hide();
}
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="first-element-tipo">Make a selection:</label>
<select id="first-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="first-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="first-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="second-element-tipo">Make a selection:</label>
<select id="second-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="second-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="second-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>

dropdown binding and removing option from remaining dropdowns

I have 3 dropdowns and that 3 dropdowns has same options.
options ex... kiran, viran, charan, narine.
If i select kiran in first dropdown that has to be not showing in remaining dropdowns(should show only viran, charan,narine). And if i select viran in next two dropdowns of anyone. The 3rd dropdown should show only charan and narine.
And i have 3 scope variables in my html for 3 dropdowns. u can see below please help me guys.
Here is my Html and am using Angular Js for this:
<html>
<body>
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Primary Physician</option>
</select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Secondary Physician</option>
</select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option>
</select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>
</html>
<script>
$scope.createOrUpdateResidentProvider = function () {
blockUI.start();
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
residentService.post($scope.constants.API.CREATE_NEW_RESIDENT_PROVIDER, $scope.residentprovider).then(
function (response) {
toaster.pop('success', response.message);
blockUI.stop();
},
function (response) {
toaster.pop('error', response.message);
blockUI.stop();
})
}
</script>

Use disable when ... ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders"
var app = angular.module('myApp',[]);
app.controller('appCtrl', function($scope){
$scope.serviceProviders =[{"ServiceProviderID":1,personbase:{"FullName":"AAA"}},{"ServiceProviderID":2,personbase:{"FullName":"BBB"}},{"ServiceProviderID":3,personbase:{"FullName":"CCC"}}];
$scope.createOrUpdateResidentProvider = function () {
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="appCtrl">
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Primary Physician</option></select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Secondary Physician</option></select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID || residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option></select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<br>{{residentprovider.pPhysician}}
{{residentprovider.sPhysician}} {{residentprovider.aPhysician}}<br>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>

ng-change event of dropdown can be used to change the options of other dropdown
for eg.
<div ng-app="App" >
<div ng-controller="ctrl">
option 1:
<select id="ddl1" ng-model="dataSelected1" ng-change="removeValue(dataSelected1)"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
<br/>
option 2:
<select id="ddl2" ng-model="dataSelected2"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
</div>
</div>
$scope.datas=[{id:1,name:"kiran"},{id:2,name:"viran"},{id:3,name:"charan"},{id:4,name:"narine"}]
$scope.removeValue=function(item){
alert(item.name);
$('#ddl2 option')
.filter(function(i, e) { return $(e).text() == item.name}).remove();
}
demo sample
demo Updated

Why my datepicker is not functioning?

I'd like to add a datepicker to my code to pick the birth date of user, however, even though I have embed the jquery and jquery-ui, the datepicker is not functioning and showed up...
Here is my code (I am using laravel 5.2)
here is the layout:
<!--
Retrospect by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)-->
<head>
<title>#yield('title')</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="{{asset('assets/css/index.css')}}" />
<script src="{{asset('jquery-ui/external/jquery/jquery.js')}}"></script>
<link rel="stylesheet" href="{{asset('jquery-ui/jquery-ui.css')}}">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1>#yield('header')</h1>
Menu
</header>
<!-- Nav -->
<nav id="nav">
<!-- Authentication Links -->
#if (Auth::guard('web')->guest())
<ul class="links">
<li>Home</li>
<li>assessment</li>
<!-- <li>Kirim Email</li> -->
</ul>
#else
<ul class="links">
<li>Home</li>
<li>assessment</li>
<li>Edit Account</li>
<li>Edit Pasien</li>
<li>Logout</li>
<!-- <li>Kirim Email</li> -->
</ul>
#endif
</nav>
#yield('content')
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon fa-facebook">
<span class="label">Facebook</span>
</a></li>
<li><a href="#" class="icon fa-twitter">
<span class="label">Twitter</span>
</a></li>
<li><a href="#" class="icon fa-instagram">
<span class="label">Instagram</span>
</a></li>
<li><a href="#" class="icon fa-linkedin">
<span class="label">LinkedIn</span>
</a></li>
</ul>
<p>
FAQ | Terms & Conditions
</p>
<ul class="copyright">
<li>© PT. Digital Media Laboratorindo.</li>
<li>Images: Unsplash.</li>
<li>Design: TEMPLATED.</li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="{{asset('assets/js/skel.min.js')}}"></script>
<script src="{{asset('assets/js/util.js')}}"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="{{asset('assets/js/index.js')}}"></script>
and here is my own form...
#extends('master.nonindex')
#section('title')
Halaman Edit Pasien
#endsection
#section('header')
Edit Pasien
#endsection
#section('content')
<script src="{{asset('jquery-ui/jquery-ui.min.js')}}"></script>
<script type="text/javascript">
$(".datepicker1").datepicker({
//home service
dateFormat: 'yy-mm-dd',
altField: '.datepicker1',
altFormat: 'yy-mm-dd',
minDate: '+1d',
maxDate: '+14d'
});
</script>
<!-- Main -->
<section id="main" class="wrapper">
<div class="container">
<!-- Form -->
<section>
#foreach($pasien as $p)
<h3>Edit Pasien {{$p->nama_panggilan}}</h3>
<form method="post" action="{{URL::to('updatePasien')}}">
<input type="hidden" name="nama_panggilan" value="{{$p->nama_panggilan}}">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
Nama depan:
<input type="text" name="nama_depan" id="name" value="{{$p->nama_depan}}" placeholder="Nama Depan" />
</div>
<div class="6u$ 12u$(xsmall)">
Nama belakang:
<input type="text" name="nama_belakang" id="email" value="{{$p->nama_belakang}}" placeholder="Nama Belakang" />
</div>
<div class="12u$">
No. KTP:
<input type="text" name="ktp" value="{{$p->no_ktp}}" placeholder="Nomor KTP Anda">
</div>
<div class="12u$">
Alamat:
<input type="text" name="alamat" value="{{$p->alamat}}" placeholder="Tuliskan Alamat Anda">
</div>
<div class="12u$">
Tanggal lahir:
<input type="text" name="tanggal_lahir" value="{{$p->tanggal_lahir}}" placeholder="Tanggal Lahir" class="datepicker1">
</div>
<div class="12u$">
Agama: <br>
<select name="agama" id="category">
<option value="{{$p -> agama}}">{{$p -> agama}}</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Islam">Islam</option>
<option value="Konghucu">Konghucu</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
</div>
<div class="12u$">
Jenis Kelamin: <br>
#if($p->jenis_kelamin=='L')
<select name="jenis_kelamin" id="category">
<option value="L" selected>Laki-laki</option>
<option value="P">Perempuan</option>
</select>
#elseif($p->jenis_kelamin=='P')
<select name="jenis_kelamin" id="category">
<option value="L">Laki-laki</option>
<option value="P" selected>Perempuan</option>
</select>
#else
<select name="jenis_kelamin" id="category">
<option value="" selected>Jenis Kelamin Anda</option>
<option value="L">Laki-laki</option>
<option value="P" >Perempuan</option>
</select>
#endif
</div>
<div class="6u 12u$(xsmall)">
TB:
<input type="text" name="tb" id="name" value="{{$p->tb}}" placeholder="TB Anda" />
</div>
<div class="6u$ 12u$(xsmall)">
BB:
<input type="text" name="bb" id="email" value="{{$p->bb}}" placeholder="BB Anda" />
</div>
<div class="12u$">
Golongan Darah: <br>
<select name="goldar" id="category">
<option value="{{$p -> gol_darah}}">{{$p -> gol_darah}}</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="12u$">
Status Perkawinan: <br>
<select name="status_perkawinan" id="category">
<option value="{{$p -> status_perkawinan}}">{{$p -> status_perkawinan}}</option>
<option value="1">Kawin</option>
<option value="2">Belum Kawin</option>
</select>
</div>
<div class="12u$">
Apakah anda mempunyai Alergi?
<input type="text" name="alergi" value="{{$p->alergi}}" placeholder="Apakah anda mempunyai Alergi">
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Update" class="special" /></li>
</ul>
</div>
</div>
</form>
#endforeach
</section>
</div>
</section>
#endsection
Thank you for your help...
UPDATE:
here is the code rayon
#extends('master.nonindex')
#section('title')
Halaman Edit Pasien
#endsection
#section('header')
Edit Pasien
#endsection
#section('content')
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker1").datepicker({
//home service
dateFormat: 'yy-mm-dd',
altField: '.datepicker1',
altFormat: 'yy-mm-dd',
minDate: '+1d',
maxDate: '+14d'
});
});
</script>
<!-- Main -->
<section id="main" class="wrapper">
<div class="container">
<!-- Form -->
<section>
#foreach($pasien as $p)
<h3>Edit Pasien {{$p->nama_panggilan}}</h3>
<form method="post" action="{{URL::to('updatePasien')}}">
<input type="hidden" name="nama_panggilan" value="{{$p->nama_panggilan}}">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
Nama depan:
<input type="text" name="nama_depan" id="name" value="{{$p->nama_depan}}" placeholder="Nama Depan" />
</div>
<div class="6u$ 12u$(xsmall)">
Nama belakang:
<input type="text" name="nama_belakang" id="email" value="{{$p->nama_belakang}}" placeholder="Nama Belakang" />
</div>
<div class="12u$">
No. KTP:
<input type="text" name="ktp" value="{{$p->no_ktp}}" placeholder="Nomor KTP Anda">
</div>
<div class="12u$">
Alamat:
<input type="text" name="alamat" value="{{$p->alamat}}" placeholder="Tuliskan Alamat Anda">
</div>
<div class="12u$">
Tanggal lahir:
<input type="text" name="tanggal_lahir" value="{{$p->tanggal_lahir}}" placeholder="Tanggal Lahir" class="datepicker1">
</div>
<div class="12u$">
Agama: <br>
<select name="agama" id="category">
<option value="{{$p -> agama}}">{{$p -> agama}}</option>
<option value="Kristen Protestan">Kristen Protestan</option>
<option value="Kristen Katolik">Kristen Katolik</option>
<option value="Islam">Islam</option>
<option value="Konghucu">Konghucu</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
</select>
</div>
<div class="12u$">
Jenis Kelamin: <br>
#if($p->jenis_kelamin=='L')
<select name="jenis_kelamin" id="category">
<option value="L" selected>Laki-laki</option>
<option value="P">Perempuan</option>
</select>
#elseif($p->jenis_kelamin=='P')
<select name="jenis_kelamin" id="category">
<option value="L">Laki-laki</option>
<option value="P" selected>Perempuan</option>
</select>
#else
<select name="jenis_kelamin" id="category">
<option value="" selected>Jenis Kelamin Anda</option>
<option value="L">Laki-laki</option>
<option value="P" >Perempuan</option>
</select>
#endif
</div>
<div class="6u 12u$(xsmall)">
TB:
<input type="text" name="tb" id="name" value="{{$p->tb}}" placeholder="TB Anda" />
</div>
<div class="6u$ 12u$(xsmall)">
BB:
<input type="text" name="bb" id="email" value="{{$p->bb}}" placeholder="BB Anda" />
</div>
<div class="12u$">
Golongan Darah: <br>
<select name="goldar" id="category">
<option value="{{$p -> gol_darah}}">{{$p -> gol_darah}}</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="12u$">
Status Perkawinan: <br>
<select name="status_perkawinan" id="category">
<option value="{{$p -> status_perkawinan}}">{{$p -> status_perkawinan}}</option>
<option value="1">Kawin</option>
<option value="2">Belum Kawin</option>
</select>
</div>
<div class="12u$">
Apakah anda mempunyai Alergi?
<input type="text" name="alergi" value="{{$p->alergi}}" placeholder="Apakah anda mempunyai Alergi">
</div>
<div class="12u$">
<ul class="actions">
<li><input type="submit" value="Update" class="special" /></li>
</ul>
</div>
</div>
</form>
#endforeach
</section>
</div>
</section>
<script src="{{asset('jquery-ui/jquery-ui.min.js')}}"></script>
#endsection

You might want check your client side errors first on the browser. That will give you a clear picture of "what exactly is wrong?".

Prevent Google Chrome from Correcting Malformed HTML Script

I was testing a website's security and in an attempt to exploit its XSS, I used <script> tag. However, this website has a word limit on the input, so my ending script tag was not inserted in the database. Now when I open the webpage the submit button no longer appear because it was inside the truncated script tag. Due to Chrome's auto-correction, that specific script tag gets closed after submit button tag. Are anyone able to help me out?
After auto-correction, the HTML code of the page looks like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Update Student Information</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../login/css/style_reg.css" type="text/css" />
<link rel="stylesheet" href="../login/js/jquery-smoothness-ui.css">
<script src="../login/js/jquery-2.0.3.js"></script>
<script src="../login/js/jquery-ui.js"></script>
<script type="text/javascript">
window.onload=function()
{
var c=document.getElementById("same_info");
c.onchange=toggle_shipping_visibility;
}
function toggle_shipping_visibility()
{
var c=document.getElementById("same_info");
var t=document.getElementById("shipping_table");
t.style.display=(c.checked) ? 'none' : '';
}
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form class="form2" action="sem-reg.php" method="POST">
<div class="formtitle">Update Student Information</div>
<div class="note">
»» All Fields are Compulsory
<h3 style="margin-left:20px;color:green;">Welcome ADARSH I can still edit it</h3>
<h3 style="margin-left:20px;color:green;">1403097</h3>
</div>
<div class="input">
<div class="inputtext">University Roll:</div>
<div class="inputcontent">
<input type="text" name="univ" placeholder="University Roll No" value="1403097"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">College Roll:</div>
<div class="inputcontent">
<input type="text" name="coll" placeholder="College Roll No" value="1006/14"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Name:</div>
<div class="inputcontent">
<input type="text" name="name" placeholder="Name" value="ADARSH I can still edit it"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Father's Name:</div>
<div class="inputcontent">
<input type="text" name="father" placeholder="Father's Name" value="PAWAN KUMAR" readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Mother's Name:</div>
<div class="inputcontent">
<input type="text" name="mother" placeholder="Mother's Name" value="SH. MT. BABLI DEVI"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Batch</div>
<div class="inputcontent" readonly>
<select name="batch" >
<option disabled="disabled" value="2011">2011</option>
<option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Semester</div>
<div class="inputcontent">
<select name="sem" >
<option value="4">4</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Branch</div>
<div class="inputcontent" >
<select name="bra">
<option value="3">B.Tech - Computer Science Engineering</option>
<option value="1">B.Tech - Biotechnology Engineering</option><option value="2">B.Tech - Chemical Engineering</option><option value="3">B.Tech - Computer Science Engineering</option><option value="4">B.Tech - Electronics & Communications Engineering</option><option value="5">B.Tech - Information Technology</option><option value="6">B.Tech - Mechanical Engineering</option><option value="10">M.Tech Part Time Thermal Engineering</option><option value="11">M.Tech Part Time Computer Science Engineering</option><option value="12">M.Tech Part Time Electronics & Communications Engineering</option><option value="13">M.Tech Part Time Chemical Engineering</option><option value="14">M.Tech Part Time Production Engineering</option><option value="15">M.Sc Physics</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Practical Group</div>
<div class="inputcontent">
<select name="prac">
<option value="2">B1</option>
<option value="1">None</option><option value="2">B1</option><option value="3">B2</option><option value="4">B3</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">D.O.B</div>
<div class="inputcontent">
<input id="datepicker" type="text" name="dob" placeholder="D.O.B." value="24/04/1997"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Section</div>
<div class="inputcontent">
<select name="sec">
<option value="1">A</option>
<option value="0">None</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
<div class="input">
<div class="inputtext">Category</div>
<div class="inputcontent">
<select name="cat" readonly>
<option value="General">General</option>
<option value="General">General</option><option value="Scheduled Castes/ Scheduled Tribes">Scheduled Castes/ Scheduled Tribes</option><option value="Backward Classes">Backward Classes</option><option value="Border Areas">Border Areas</option><option value="Backward Areas">Backward Areas</option><option value="Sports Persons">Sports Persons</option><option value="Children/ Grand Children of Freedom Fighters/Political Sufferers">Children/ Grand Children of Freedom Fighters/Political Sufferers</option><option value="Disabled Persons">Disabled Persons</option><option value="Children/Widow Of Defence Personnel/ Ex-Servicemen etc">Children/Widow Of Defence Personnel/ Ex-Servicemen etc</option><option value="Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards">Children/ Widows Of Para-military forces/Punjab Police, PAP and Punjab Home Guards</option><option value="Riot Affected/ Terrorist affected families">Riot Affected/ Terrorist affected families</option><option value="Tsunami victims">Tsunami victims</option> </select>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Parents):</div>
<div class="inputcontent">
<input type="text" name="phone_parent" placeholder="Phone no(Parents)" value="+919459578556"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">Phone No(Self): </div>
<div class="inputcontent">
<input type="text" name="phone_self" placeholder="Phone No(Self)" value="+919814615325"readonly/>
</div>
</div>
<div class="add">Permanent Address:</div>
<div class="input" style="height:120px">
<div class="inputtext">Address: </div>
<div class="inputcontent">
<textarea class="textarea" name="address" placeholder="Address" ></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea>
</div>
</div>
<div class="input">
<div class="inputtext">City: </div>
<div class="inputcontent">
<input type="text" name="city" placeholder="City" value="Dhar"readonly/>
</div>
</div>
<div class="input">
<div class="inputtext">State: </div>
<div class="inputcontent">
<input type="text" name="state" placeholder="State" value="Himachal"readonly/>
</div>
</div>
<input type="checkbox" name="same_info" id="same_info" checked="checked">Correspondence Address is same as Permanent Address<br>
<table id="shipping_table" style="display:none">
<tr class="inputtext">
<td>Address</td>
</tr>
<tr>
<td><textarea class="textarea" name="c_address"placeholder="Address"></textarea><script>alert(hahahahahahahahhaha you gonna pay for this bu</textarea></td>
</tr>
<tr class="inputtext">
<td>City</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_city" placeholder="City" value="Dhar"></td>
</tr>
<tr class="inputtext">
<td>State</td>
</tr>
<tr>
<td class="inputcontent"><input type="text" name="c_state" placeholder="State" value="Himachal"></td>
</tr>
</table>
<div class="buttons">
«« Go Back To Home Page
<input class="orangebutton" type="submit" name="submit" value="Update" />
</div>
</form>
</div>
</body>
</html>

Using Chrome you can right-click on the last visible element, or somewhere else on the page, select Inspect and then edit the HTML that is loaded in the browser using the Chrome built in developer tools. E.g. remove/alter the <script> tag. And see if the page becomes usable again.
You can also try a recent version of Firefox or MSIE, they have features very similar to the above.