auto numbering based on year and value in Laravel 5.6 - php

This for my dropdownlist and format for auto numbering
and if someone choose NK/W will get No.Reg :
001/NK/W/2018, 002/NK/W/2018, 003/NK/W/2018
And if someone choose NK/S will get No. Reg 001/NK/S/2018.
If years change, the auto numbering will reset to 001 again

The solution here has more to do with javascript than Laravel or PHP for instance.
Check this out
https://jsfiddle.net/j6znavy9/
<p>
Reg No: Auto/
<select id="mySelect">
<option selected disabled>Select an Option</option>
<option value="NK/W">NK/W</option>
<option value="NK/S">NK/S</option>
<option value="MM/A">MM/A</option>
</select>
Year: *
<select id="yearSelect">
<option selected disabled>Select a Year</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</p>
<script>
$(document).ready(function() {
function pad(number, size) {
var s = String(number);
while (s.length < (size || 2)) {s = "0" + s;}
return s;
}
var year, mySelect, auto = 1;
$('#yearSelect').on('change', function(){
year = $(this).val();
auto = 1;
});
$('#mySelect').on('change', function(){
if( year === null || year === undefined ) {
alert('year is not defined!');
} else {
alert('Reg No: ' + pad(auto, 3) + '/' + $(this).val() + '/' + year);
auto++;
}
})
});
</script>

Related

How to fix bootstrap multiselect search data using ajax

I am Using bootstrap multi select. I have two drop downs and both have datas with search feature.
what i am doing .. on change function on first drop down i want to change second drop down value using ajax.I have used rebuild too. But search feature value is not changing
<select class="selectpicker form-control multiselect" multiple="multiple" role="multiselect" data-live-search="true" id="sel1">
<option selected disabled> Class</option>
<option value="one">one</option>
<option value="two">two</option>
<option value=" three">three</option>
</select>
<select class="selectpicker form-control multiselect" multiple="multiple" role="multiselect" data-live-search="true" id="sel2">
<option selected disabled>Molecule</option>
<option value="100 student">100 student</option>
<option value="200 student">200 student</option>
<option value="300 student">300 student</option>
</select>
My ajax function
$("#sel1").change(function () {
$.ajax({
type: "POST",
url: "http://test.com/selectdropdown",
cache: false,
data: {
classval: val1
},
}).done(function (msg) {
var data = $.parseJSON(msg);
var options = '';
var tmp = [];
for (var i = 0; i < data.classdata.length; i++) {
var id = data['classdata'][i]['class_id'];
var name = data['classdata'][i]['noofstudent'];
options += '<option value=' + id + '>' + name + '</option>';
element = { "label": name, "value": id }
tmp.push(element);
}
$("#sel2").multiselect('dataprovider', tmp);
$('#sel2').multiselect('rebuild');
})
});
but drop down two data is not chaning.. if i use inspect element i can see the data
After lot of rnd . I have got solution. i have to refresh select picker too. hope this help to others
$('.selectpicker').selectpicker('refresh');

passing 2 values from dropdown in php using ajax

I have been creating a system as a project on school. I have encountered a problem in getting values using ajax. I wanted to get values from the qselCampus dropdown and the qselCollege dropdown, then pass its values to a php file and use it on a query that will populate the third dropdown. The problem is, I cannot get the right values on the third dropdown. I am just a beginner in PHP and AJAX.
Here is my AJAX code:
$(document).ready(function() {
$("#qselBranch").change(function() {
var branchid = $(this).val();
if(branchid != "") {
$.ajax({
url:"getprof.php",
data:{txtbid:branchid},
type:'POST',
success:function(response) {
var resp = $.trim(response);
//console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
$(document).ready(function() {
$("#qselCollege").change(function() {
var collegeid = $(this).val();
if(collegeid != "") {
$.ajax({
url:"getprof.php",
data:{txtcid:collegeid},
type:'POST',
success:function(response) {
var resp = $.trim(response);
console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
Here is my PHP Code:
<?php
if(isset($_POST['txtbid'])){
$strGetValue = mysqli_real_escape_string($objConn, $_POST['txtbid']);
$strGetValue2 = mysqli_real_escape_string($objConn, $_POST['txtcid']);
echo $strGetValue;
$strStmtGetProf = "SELECT
strTeacherInfoID
, strFirstName
, strMiddleName
, strLastName
, strCampus
FROM tblteachers
WHERE strCampus = '$strGetValue' AND strCollege = '$strGetValue2'";
$objResult = mysqli_query($objConn, $strStmtGetProf) or trigger_error("Query Failed! SQL: Error: ".mysqli_error($objConn), E_USER_ERROR);
echo "<option value=''>------- Select --------</option>";
//echo $strGetValue2;
while($objFetch = mysqli_fetch_array($objResult)){
$strTID = $objFetch['strTeacherInfoID'];
$strFirstName = $objFetch['strFirstName'];
$strLastName = $objFetch['strLastName'];
$strCampus = $objFetch['strCampus'];
//echo $strGetValue;
echo '<option value="' . $strTID . '">' .$strLastName. ", " .$strFirstName. " | Branch: " .$strCampus. '</option>';
}
}
?>
And here is the HTML part:
<div class="form-row col-md-8">
<label>Campus Branch
<select name="qselBranch" id="qselBranch" required class="form-control">
<option value="">------- Select --------</option>
<option value="Bansud">Bansud</option>
<option value="Bataan">Bataan</option>
<option value="Biñan">Biñan</option>
<option value="Cabiao">Cabiao</option>
<option value="Lopez">Lopez</option>
<option value="Mabini">Mabini</option>
<option value="Maragondon">Maragondon</option>
<option value="Mulanay">Mulanay</option>
<option value="Parañaque">Parañaque</option>
<option value="Pulilan">Pulilan</option>
<option value="Quezon">Quezon</option>
<option value="Ragay">Ragay</option>
<!--<option value="Sablayan">Sablayan</option>-->
<option value="San Juan">San Juan</option>
<option value="San Pedro">San Pedro</option>
<option value="Sta. Maria">Sta. Maria</option>
<option value="Sta. Rosa">Sta. Rosa</option>
<option value="Sto. Tomas">Sto. Tomas</option>
<option value="Taguig">Taguig</option>
<option value="Unisan">Unisan</option>
</select>
</label>
</div>
<div class="form-row">
<label>
College/Faculty:
<select name="qselCollege" required class="form-control">
<option value="">------- Select --------</option>
<option value="CAF">College of Accountancy and Finance (CAF)</option>
<option value="CAFA">College of Architecture and Fine Arts (CAFA)</option>
<option value="CAL">College of Arts and Letters (CAL)</option>
<option value="CBA">College of Business Administration (CBA)</option>
<option value="COC">College of Communication (COC)</option>
<option value="CCIS">College of Computer and Information Sciences (CCIS)</option>
<option value="COED">College of Education (COED)</option>
<option value="CE">College of Engineering (CE)</option>
<option value="CHK">College of Human Kinetics (CHK)</option>
<option value="CL">College of Law (CL)</option>
<option value="CPSPA">College of Political Science and Public Administration (CPSPA)</option>
<option value="CSSD">College of Social Sciences and Development (CSSD)</option>
<option value="CS">College of Science (CS)</option>
<option value="CTHTM">College of Tourism, Hospitality and Transportation Management (CTHTM)</option>
</select>
</label>
</div>
Right now, you have 2 different Ajax call and you use both data in your php...even if you send them one by one. First, try to make ONE ajax call when you change a value in your form and if you have two value different than " ". It should look like this :
JS :
$(document).ready(function() {
$("#qselBranch, #qselCollege").change(function() { // On change for each form
var branchid = $("#selBranch").val();
var collegeid = $("#qselCollege").val();
if(branchid != "" && collegeid != "") { // check if both value are not empty
$.ajax({
url:"getprof.php",
data:{txtbid:branchid,txtcid:collegeid}, // send both value in one time
type:'POST',
success:function(response) {
var resp = $.trim(response);
//console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
PHP :
<?php
// I change nothing, juste add a double $_POST condition
if(isset($_POST['txtbid']) && isset($_POST['txtcid'])){
$strGetValue = mysqli_real_escape_string($objConn, $_POST['txtbid']);
$strGetValue2 = mysqli_real_escape_string($objConn, $_POST['txtcid']);
echo $strGetValue;
$strStmtGetProf = "SELECT
strTeacherInfoID
, strFirstName
, strMiddleName
, strLastName
, strCampus
FROM tblteachers
WHERE strCampus = '$strGetValue' AND strCollege =
'$strGetValue2'";
$objResult = mysqli_query($objConn, $strStmtGetProf) or trigger_error("Query Failed! SQL: Error: ".mysqli_error($objConn), E_USER_ERROR);
echo "<option value=''>------- Select --------</option>";
//echo $strGetValue2;
while($objFetch = mysqli_fetch_array($objResult)){
$strTID = $objFetch['strTeacherInfoID'];
$strFirstName = $objFetch['strFirstName'];
$strLastName = $objFetch['strLastName'];
$strCampus = $objFetch['strCampus'];
//echo $strGetValue;
echo '<option value="' . $strTID . '">' .$strLastName. ", " .$strFirstName. " | Branch: " .$strCampus. '</option>';
}
}
?>
Is it what you are looking for? Tell me if it works please :)

get value from multiple dropdown and add value to url

I have tried this code, that can display selected value and refresh the page .
This is the HTML
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
And this is the JQuery:
<script>
$(function(){
$("[name=selectperiode]").change(function(){
var val = $(this).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
}
else {
stat = '';
}
window.location.href = './corpreport.php?per='+stat;
return true;
});
});
</script>
It works fine. So I added one more dropdown and added some code with the code below:
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
And this is the jquery
<script>
$(function(){
$("[name=selecttype]").change(function(){
var val = $(this).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
}
else {
stat = '';
}
window.location.href = './corpreport.php?per=<?php echo $_GET['per']; ?>&type='+stat;
return true;
});
});
</script>
It will produce localhost/folder1/file.php?per=1&type=Pie if you choose Yearly and Pie.
But when I change the periode to Quarterly, then the link change to localhost/folder1/file.php?per=4.
What should I do to make the link localhost/folder1/file.php?per=4&type=Pie ??
You can use the following jQuery:
$(function () {
$("[name=selectperiode]").change(function () {
window.location.href = period(this) + type($("[name=selecttype]"));
return true;
});
$("[name=selecttype]").change(function () {
window.location.href = period($("[name=selectperiode]")) + type(this);
return true;
});
function period(element) {
var val = $(element).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
} else {
stat = '';
}
return './corpreport.php?per=' + stat;
}
function type(element) {
var val = $(element).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
} else {
stat = '';
}
return '&type=' + stat;
}
});
With this PHP/HTML:
<?php
$per = (!empty($_GET["per"])) ? $_GET["per"] : '';
$type = (!empty($_GET["type"])) ? $_GET["type"] : '';
?>
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1" <?php if($per == "1"){echo "selected";} ?>>Yearly</option>
<option value="4" <?php if($per == "4"){echo "selected";} ?>>Quarterly</option>
</select>
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie" <?php if($type == "Pie"){echo "selected";} ?>>Pie</option>
<option value="Line" <?php if($type == "Line"){echo "selected";} ?>>Line</option>
<option value="Bar" <?php if($type == "Bar"){echo "selected";} ?>>Bar</option>
<option value="Column" <?php if($type == "Column"){echo "selected";} ?>>Column</option>
</select>
Assign ids to both select for instance period, type. Get values of both selects on change event to make the url.
Html
<select id="period" name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
<select id="type" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
Javascript
$("[name=selecttype]").change(function(){
var period = document.getElementById('period').value;
var type = document.getElementById('type').value;
window.location.href = './corpreport.php?per=' + period + '&type='+type;
return true;
});
<select id="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
<select id="selecttype" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
Jquery
$(document).ready(function () {
$("#selecttype").change(function () {
var period = $("#selectperiode").val();
var type = $("#selecttype").val();
window.location.href = './corpreport.php?per=' + period + '&type=' + type;
return true;
});
});

Control multiple-select box using a single select box using javascript

`<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select> </p>`
<p>Select A Country
<select name="country" id="country">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select> </p>
I have two select boxes 1)state[] 2) country . What is want is that "If the selected country is not USA, disable the multi-select box which consists all the USA states". Any help is appreciated
Add this Javascript to your code:
<script type="text/javascript">
<!--
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
//-->
</script>
You could do the following if you have jQuery:
$('#country').change(function () {
if($('#country').val() != "USA") {
$('#state').attr('disabled', 'disabled');
}
else {
$('#state').removeAttr('disabled');
}
});
Or if you are using plain JavaScript:
var elem = document.getElementById("country");
elem.onchange = function () {
if(elem.options[e.selectedIndex].value != "USA") {
document.getElementById('state').disabled = "disabled";
}
else {
document.getElementById('state').removeAttribute("disabled");
}
}
This will disable the state combo box when the country combo box contains a value that is not "USA". When the selected country is "USA", it will remove the disabled attribute and make it usable again.
Hope this helps.

Getting value of a dynamically created select

Apologies if my question is a little badly worded but I am not quite sure how to ask it correctly.
I am using PHP to dynamically generate some selects and I was just wondering if it is possible to do this?
Or would I need to add something like {onChange="some_function();"} to each of the selects, passing some variable(s) to id it ?
<script type="text/javascript">
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $('Selects ID or class').val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
</script>
<p>Q1</p>
<select name="Q1select" id="Q1select" class="Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update1" class="Q1"></div>
<p>Q2</p>
<select name="Q2select" id="Q2select" class="Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update2" class="Q2"></div>
<p>Q3</p>
<select name="Q3select" id="Q3select" class="Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update3" class="Q3"></div>
Updated working script :
<script type="text/javascript">
$(document).ready(function () {
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$this.val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
});
</script>
Updated html :
<select name="select_Q1" id="select_Q1" class="question" data-div="update_Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question" data-div="update_Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question" data-div="update_Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>
You can assign an event handler to all the select elements using the following:
$('select').change(function(event) {
....
});
​
In the event handler, you can get the value of the select using:
$(this).val()
To get the ID of the select in the event handler, you can use;
$(this).attr('id')
Yes that would work ... but you could simplify a touch :
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
changed the selector within the function to $(this) instead of a class or id that way it will work when you use on multiple elements
To link the select to a div you could either name the div similar to the select ie select id = select_1 and div = div_1 or use the data property
<select name="Q2select" id="Q2select" data-div="divid" class="Q2">
then within your AJAX callback you can do :
$('#' + $(this).data('div')).html(data);
this will set the HTML content of the div with the id = divid ... just an idea
Update
there are a couple of things to try and debug this, first :
function (data) {
$('#update_Q3').html(data);
}
this puts the content in a div - this checks the content returned from the post is working and that you can insert HTML at this point
and try this :
function (data) {
alert($(this).data('div'));
}
this will confirm your selecting the correct div by getting the data
Update 2
My screw up !!!!! $(this) is not working in the callback, try this :
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$(this).val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
we save $(this) into a variable $this for later use
Here's how I would do it, using a class of question on each <select> and using the id as the unique identifier. The benefit of using a class to grab the selects is if you ever add any other select to the page, they won't be affected.
<script type="text/javascript">
$('.question').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
// lets find the div that matches this question and update it
var questionNum = $(this).attr('id').replace('select_Q', '');
var divId = 'update_Q' + questionNum;
$('#' + divId).html(data);
}
);
});
</script>
<p>Q1</p>
<select name="select_Q1" id="select_Q1" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>
Yes you could do
//For every select whose id ends with select
$('select[id$=select]').change(function(event) {
//getthe id so that you can post it
var id = this.id;
//save the variable this to another one to use in the callback
var that = this;
//post the selected value and thew id of the select
$.post('formupdate.php', { selected: $(this).val(), id : id },
function(data) {
update the next element after the select
$(that).next().html(data);
}
);
});

Categories