Dynamic Drop Down List Validation - php

How can I validate cloned drop downs wherein a drop down will be selected, the option will be disabled to other drop down lists?
Html Code
<form id="surveyForm" method="post" class="form-horizontal">
<div class="form-group" id="surveyTemplate">
<label class="col-xs-3 control-label">Options</label>
<div class="col-xs-5">
<select class="form-control user" name="employee[]">
<option></option>
<option value="1">Martin Luther</option>
<option value="2">Mark Glovo</option>
<option value="3">Michael Sei</option>
</select>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Jquery Code
$('#surveyForm').on('click', '.addButton', function() {
var template = $('#surveyTemplate'),
clone = template
.clone()
.removeAttr('id')
.insertBefore($template),
$employee = clone.find('[name="employee[]"]');
$('#surveyForm').formValidation('addField', employee);
});
$("#surveyForm").on('change', '.user', function() {
var value = $(this).val();
$(this).find("option[value =" + value + "]").attr('disabled', false);
$("select").not(this).find("option[value =" + value + "]").attr('disabled', true);
});
Note that when I click the add button, it adds a clone of this form.

Related

Laravel 9: Data does not appear before editing when the ID is changed then the form autofills using JQUERY AJAX

good afternoon everyone. I'm making a form to edit leave allocation data with jquery ajax. the form consists of (id_kategoricuti, id_karyawan,durasi, mode_alokasi, tgl_masuk, tgl_sekarang, aktif_dari, sampai).
Previously in from create, the conditions are:
when id_kategoricuti is selected, the form durasi, mode_alokasi will be filled in automatically using ajax.
For example, in the selected id_kategoricuti id form Cuti Tahunan, the tgl_masuk and tgl_sekarang forms will appear.
then, when selecting id_karyawan, the tanggal_masuk form will automatically be filled according to the entry date data in the employee table. so that only the aktif_dari and sampai forms are filled in.
condition from edit leave allocation:
data appears according to the id that has been selected.
the user makes changes to the desired data.
save.
however, I'm facing a problem on this edit form:
because when I click on one of the data to edit, what appears on the form is only id_kategoricuti and id_karyawan.
the form mode_alokasi, durasi, aktif_dari and sampai are empty.
The form was only filled in when id_karyawan/id_kagotericuti was edited.
the data in the box below the category form is the data that should appear on the form.
This is the appearance of the leave allocation edit form before editing:
this is the appearance of the leave allocation edit form after the leave id_categories are edited:
my Controller:
public function getTglmasuk(Request $request)
{
try {
$getTglmasuk = Karyawan::select('tglmasuk')
->where('id','=',$request->id_karyawan)->first();
// dd($request->id_karyawan,$getTglmasuk);
if(!$getTglmasuk) {
throw new \Exception('Data not found');
}
return response()->json($getTglmasuk,200);
} catch (\Exception $e){
return response()->json([
'message' =>$e->getMessage()
], 500);
}
}
public function getSettingalokasi(Request $request)
{
try {
$getSettingalokasi=Settingalokasi::select('id','id_jeniscuti','durasi','mode_alokasi')
->where('id_jeniscuti','=',$request->id_jeniscuti)->first();
if(!$getSettingalokasi) {
throw new \Exception('Data not found');
}
return response()->json($getSettingalokasi,200);
} catch (\Exception $e){
return response()->json([
'message' =>$e->getMessage()
], 500);
}
}
my Editalokasi.blade.php:
{{-- FORM SETTING ALOKASI--}}
<div class="modal fade" id="editalokasi{{$data->id}}" tabindex="-1" role="dialog" aria-
labelledby="editalokasi" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title" id="editalokasi">Edit Alokasi Cuti</h4>
</div>
<div class="modal-body">
<form class="input" action="/updatealokasi/{{$data->id}}" method="POST"
enctype="multipart/form-data">
#csrf
#method('POST')
<div class="panel-body">
<div class="col-md-6">
<div class="form-group col-sm">
<label for="id_jeniscuti" class="col-form-label">Kategori
Cuti</label>
<select name="id_jeniscuti" id="idjeniscuti" class="form-control">
<option value="{{$data->id_jeniscuti}}" selected>
{{$data->jeniscutis->jenis_cuti}}
</option>
#foreach ($jeniscuti as $jenis)
<option value="{{$jenis->id }}">{{ $jenis->jenis_cuti }}
</option>
#endforeach
</select>
</div>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idsettingalokasi" value="{{$data-
>id_settingalokasi}} --> id settingalokasi" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="{{$data->id_jeniscuti}}
--> id kategori" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="{{$data->id_karyawan}} -
->id karyawan" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="{{$data->durasi}} Hari
--> durasi" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="{{$data->mode_alokasi}}
-->mode alokasi" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="
{{\Carbon\carbon::parse($data->aktif_dari)->format('m/d/Y')}} --
>aktif dari" readonly>
<input type="text" class="form-control" name="durasi"
placeholder="durasi" id="idjeniscutis" value="
{{\Carbon\carbon::parse($data->sampai)->format('m/d/Y')}} -->sampai tanggal"readonly>
<div class="form-group col-sm" id="idkaryawan">
<label for="id_karyawan" class="col-form-label">Karyawan</label>
<select name="id_karyawan" id="id_karyawan" class="form-control">
<option value="{{$data->id_karyawan}}" selected>{{$data->karyawans->nama}}</option>
#foreach ($karyawan as $data)
<option value="{{ $data->id }}">{{ $data->nama }}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="durasi" class="col-form-label">Durasi (Hari)</label>
<input type="text" class="form-control" name="durasi" placeholder="durasi" id="duration" value="{{$data->durasi}}" readonly>
</div>
<div class="form-group">
<label for="mode_alokasi" class="col-form-label">Mode Alokasi</label>
<input type="text" class="form-control" name="mode_alokasi" placeholder="mode alokasi" value="{{$data->mode_alokasi}}" id="modealokasi" readonly>
</div>
</div>
<div class="col-md-6">
<div class="" id="tglmulai">
<div class="form-group">
<label for="tgl_masuk" class="form-label">Tanggal Masuk</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="tglmasuk" name="tgl_masuk" autocomplete="off" readonly>
<span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
</div>
</div>
</div>
<div class="" id="tglnow">
<div class="form-group">
<label for="tgl_sekarang" class="form-label">Tanggal Sekarang</label>
<div class="input-group">
<input type="text" class="form-control" id="tglsekarang" name="tgl_sekarang" autocomplete="off" readonly>
<span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
</div>
</div>
</div>
<div class="" id="tanggalmulai">
<div class="form-group">
<label for="tgl_mulai" class="form-label">Aktif Dari</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclosea3" name="aktif_dari" value="{{\Carbon\carbon::parse($data->aktif_dari)->format('m/d/Y')}}" autocomplete="off">
<span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
</div>
</div>
</div>
<div class="" id="tanggalselesai">
<div class="form-group">
<label for="sampai" class="form-label">Sampai</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclosea4" name="sampai" value="{{\Carbon\carbon::parse($data->sampai)->format('m/d/Y')}}" autocomplete="off">
<span class="input-group-addon bg-custom b-0"><i class="mdi mdi-calendar text-white"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-info" name="submit" value="save">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/pages/form-advanced.js"></script>
my Javascript:
<!-- script to fetch data settingalokasi from table settingalokasi -->
<script>
$('#idjeniscuti').on('change',function(e){
var id_jeniscuti = e.target.value;
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
.attr('content')
}
});
$.ajax({
type:"POST",
url: '{{route('get.Setting.alokasi')}}',
data: {'id_jeniscuti':id_jeniscuti},
success:function(data){
// console.log(data);
$('#idsettingalokasi').val(data.id);
$('#duration').val(data.durasi);
$('#modealokasi').val(data.mode_alokasi);
}
});
});
</script>
<!-- script to fetch data tanggal_masuk from table karyawan-->
<script>
$('#id_karyawan').on('change',function(e){
var id_karyawan = e.target.value;
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
.attr('content')
}
});
$.ajax({
type:"POST",
url: '{{route('get.Tanggalmasuk')}}',
data: {'id_karyawan':id_karyawan},
success:function(data){
// console.log(data);
$('#tgl_masuk').val(data.tglmasuk);
// console.log(data?.tglmasuk)
}
});
});
</script>
<script type="text/javascript">
$(function()
{
$('#tglmulai').prop("hidden", true);
$('#tglnow').prop("hidden", true);
$('#jenicuti').on('change', function(a)
{
if(a.target.value == 1)
{
$('#tglmulai').prop("hidden", false);
$('#tglnow').prop("hidden", false);
} else
{
$('#tglmulai').prop("hidden", true);
$('#tglnow').prop("hidden", true);
}
});
});
</script>
this is my first time using JQUERY AJAX for AUTOFILL. can anyone help me to solve this problem?

The ajax is not getting the value?

I have the issue when clicking on the register button ,
is not getting the value,
I have made to many researchs i but cant find the answer,
Also i have all the libraries on the menu and
footer pages ,including jquery.
PHP CODE:
<?php
include 'Auth.php';
include 'partials/menu.php';
$usersObj = new Auth();
?>
<h2 class="mt-5 text-center mb-5">View Records
<button data-target="#Registration" data-toggle="modal" class="btn btn-primary" style="float:right;">Add New User</button>
</h2>
<!--Registration Modal-->
<div class="modal" id="Registration">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="text-dark">Add User Form</h3>
</div>
<div class="modal-body">
<p id="message" class="text-dark"></p>
<form>
<input type="text" class="user form-control my-2" placeholder="User Name" id="us">
<input type="text" class="form-control my-2" placeholder="User Email" id="fn">
<input type="password" class="form-control my-2" placeholder="User Password" id="pw">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btn_register">Register Now</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="btn_close">Close</button>
</div>
</div>
</div>
</div>
AJAX CODE:
<?php include 'partials/footer.php'; ?>
<script>
var username = $('#us').val();
var full_name = $('#fn').val();
var password =$('#pw').val();
$(document).on('click','#btn_register',function() {
console.log(username + full_name + password);
})
</script>
You are getting the values before the user enters them, you have to get them when the button is clicked, put your logic in the event handler.
<script>
$(document).on('click','#btn_register',function() {
var username = $('#us').val();
var full_name = $('#fn').val();
var password = $('#pw').val();
console.log(username + full_name + password);
})
</script>

codeigniter get value after submit form

i have modal using form selection ajax with submit button
modal code
<div class="modal-body">
<div class="row" id="modal-body">
<div class="col-md-12">
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="project-loa" class="col-sm-4 control-label">Select Project</label>
<div class="col-sm-8">
<select id="project-load-modal" class="form-control" name="proj_name" style="width: 100%">
</select>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Download</button>
</div>
my value selection option is fine
controller
public function generate(){
$proj_name = $this->input->get('proj_name');
echo $proj_name;
}
i want get value from my selection form using controller.
when the submit is click, i get nothing in my console. what i do wrong?
//give id to submit button button_id
$("#button_id").on('click', function () {
var proj_name = $("#project-load-modal").val();
$.post(base_url + 'generator_url'+proj_name, function (response) {
if (response.code == '1') {
//message if you want to show
} else {
//message if you want to show
}
});
}
//make route
$route['generator_url/(:any)']='ControllerName/generate/$1';
Add action and method attribute to form element
<form class="form-horizontal" action="<?php echo base_url().'C_MRCR_A/generate'; ?>" method="get">
Take submit button inside the form element.
<button type="submit" class="btn btn-primary">Download</button>
</form>

how to save previous page clikable url in database using php?

i have following div in project. after clicking on "request for demo" button , it will redirect to next window to registration form (link is mentioned in javascript function). i want to save relevant div id in database after clicking on button and save register.
following is my html and javascript
<div class="row">
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Supermarkets, Fruits & Vegetables</b></span>
<hr>
<p>Uninterrupted fast billing, inventory control, CRM & Loyalty programs makes your shoppers happier</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<!--<button type="button" onclick="openWin()" class="btn btn-default" id="demo-btn" data-toggle="modal" data-target="#demoModal">Request for Demo</button>-->
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Grocery & Departmental Stores</b></span>
<hr>
<p>POS for grocery, departmental store, hypermarket and convenience store with GSmartPOS</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Grocery and Departmental Stores" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Pharmacy, Medical Shop POS</b></span>
<hr>
<p>Prefilled drug index, update stock position and bill from Day One. Manage batches and expiry with ease</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Pharmacy Medical Shop POS" >Request for Demo</button>
</div>
<br>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Apparel & Footwear</b></span>
<hr>
<p>POS Features like matrix-inventory, non-moving stock analysis, can help keep inventory latest and fashionable</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Apparel and Footwear" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Electrical & Electronics POS</b></span>
<hr>
<p>Perfect solution to manage serialized inventory for mobile, computer electrical and electronics shops</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Electrical and Electronics POS" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Fashion Jewellery Shop</b></span>
<hr>
<p>An integrated, modular & scalable POS for furniture, glass & crockeries, opticals, music, toys & baby shop retail</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Fashion Jewellery Shop" >Request for Demo</button>
</div>
</div>
following function is called on each div button,
<script>
function openWin() {
window.open("register.php");
}
</script>
after clicking on each div button following form will be open in new window,
<div class="register">
<div class="container">
<div class="row main">
<div class="main-register main-center">
<form class="" method="post" id="contact-form">
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-phone fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="contact_no" placeholder="Enter your contact number"/>
</div>
</div>
</div>
<input type="hidden" id="requestType">
<div class="form-group ">
<button class="btn btn-primary btn-lg btn-block register-button submit">Register</a>
</div>
</form>
<span class="success" style="display:none">Thank You for Register with us.</span>
</div>
</div>
</div>
</div>
form will be save using ajax and php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".modalBtn").click(function(){
var formName = $(this).attr("id");
$('#requestType').val(formName);
$('.success').hide();
$('.error').hide();
$('#contact-form').show();
$("#demoModal").modal();
});
$(".submit").click(function() {
var name = $("#name").val();
var requestType = $('#requestType').val();
var contact_no = $("#contact_no").val();
var email = $("#email").val();
//alert(requestType);
var dataString = 'name='+ name + '&contact_no=' + contact_no + '&email=' + email+ '&requestType=' + requestType;
if(name=='' || contact_no=='' || email=='')
{
$('.success').fadeOut(200).hide();
$('.error').show();
}
else
{
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$('#contact-form').hide();
}
});
}
return false;
});
});
</script>
Php code to insert data is,
<?php
require('connection.php');
if($_POST) {
$id = $_POST['regid'];
$name = $_POST['name'];
$contact_no = $_POST['contact_no'];
$email = $_POST['email'];
$requestType = $_POST['requestType'];
if ($id == '') {
$sql = "INSERT INTO registration(name,contact_no,email,requestType) VALUES ".
"('".$name."', '".$contact_no."', '".$email."','".$requestType."')";
}
$query_result = mysql_query( $sql );
if(!$query_result ) {
echo 'Could not enter data: ' . mysql_error();
} else {
//header("Location: lead-view.php?s=Y");
$successMsg = 'Record instered successfully';
}
}
?>
i want save those div id as in url after submitting form of relevant dive click button. url will be save in "requestType" field in database. please help.
You can make use of sessionStorage for passing the requestType value.
https://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/
While calling openWin() pass the div value to it. For example:
<button type="button" onclick="openWin('abc')" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
Then save this value in sessionStorage as follows:
function openWin(div_value) {
sessionStorage.setItem("registerType", div_value);
window.open("register.php");
}
You can retrieve this variable in register.php:
var registerType = sessionStorage.getItem("registerType");
Add this value to the hidden input control in register form and save it to database.
<input type="hidden" id="requestType">

PHP Controller function instantiated before it's called

I'm having a problem with a CRUD application form being displayed on a bootstrap modal.
The issue happens when the form's edit button send the "editId" post var, the modal shows up but the values for the options of the select tag are displayed outside the form.
My controller looks like this:
public function editarUsuarioController(){
if (isset($_GET["editId"])) {
$dataController = $_GET["editId"];
$data = Datos::editUserModel($dataController, "users");
echo'<div id="editModal">
<form method="post" role="form">
<div class="form-group">
<label for="roleEdit">Rol<span></span></label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<select name="roleTypes" class="form-control">
<option selected>
'.$data["rols"].'
</option>
'.$editOptions = MainController::viewRolesController().'
</select>
</div>
</div>
<div class="form-actions">
<input type="submit" class="btn blue" value="Update">
<button type="button" data-dismiss="modal" class="btn default">Cancel</button>
</div>
</form>
</div>';
} }
As you can see, I'm instantiating another controller from another file which lists the available roles which looks like:
public function viewRolesController(){
$response= Datos::vistaRolesModel("roles");
foreach($response as $row => $item){
echo'<option value="'.$item["id"].'">'.$item["role"].'</option>';
}
}
Any suggestions?
I fixed it by splitting up the echo and using a variable inside the original controller to store the values brought by the vistaRolesModel() model function so this is the new editarUsuarioController() controller function:
public function editarUsuarioController(){
if (isset($_GET["editId"])) {
$dataController = $_GET["editId"];
$data = Datos::editUserModel($dataController, "users");
$roles = Datos::vistaRolesModel("roles");
echo'
<div id="editModal">
<form method="post" role="form">
<div class="form-group">
<label for="roleEdit">Rol<span></span></label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<select name="roleTypes" class="form-control">
<option selected>
'.$data["rols"].'
</option>
';
foreach($roles as $row => $item){
echo'<option value="'.$item["id"].'">'.$item["role"].'</option>';
}
echo'
</select>
</div>
</div>
<div class="form-actions">
<input type="submit" class="btn blue" value="Update">
<button type="button" data-dismiss="modal" class="btn default">Cancel</button>
</div>
</form>
</div>
';
}
}

Categories