We Keep Coding

How to use Trigger Function to control div being shown or hide

i want to know how to use trigger function in this code
function showHusbandFun(){
var mStatus = document.getElementById('marital_status').value;
if(mStatus == 'Married'){
$("#spousehide").show();
$("#spousehideOther").show();
}else{
$("#spouse_name").val("");
$("#spouse_nationality").val("");
$("#spouse_place_of_birth").val("");
$("#spouse_country_of_birth").val("");
$("#spousehide").hide();
$("#spousehideOther").hide();
}
}
This is my Select Element Which Control Hidden Divs
<select class="form-control-input" name="marital_status" id="marital_status" onclick="removeError(this.id);" onchange="removeError(this.id); showHusbandFun();">
<option selected="selected" value="">Select Marital Status</option>
<option value="Single" <?php if($marital == 'Single'){ echo "selected";}?>> Single</option>
<option value="Married" <?php if($marital == 'Married'){ echo "selected";}?>> Married</option>
<option value="Divorced" <?php if($marital == 'Divorced'){ echo "selected";}?>> Divorced</option>
<option value="Widow" <?php if($marital == 'Widow'){ echo "selected";}?>> Widow</option>
<option value="Deceased" <?php if($marital == 'Deceased'){ echo "selected";}?>> Deceased</option>
<option value="Unspecific" <?php if($marital == 'Unspecific'){ echo "selected";}?>> Unspecific</option>
<option value="Child" <?php if($marital == 'Child'){ echo "selected";}?>> Child</option>
</select>
i want to use trigger function in this to control the show/hide elements.
But Issue is When page Loads, I want to Show Hidden Divs When Marrital Status is Married.

The problem is that you are not calling the function on page load and you are expecting it to work on page load. Currently the function showHusbandFun() is triggered when there is a change done on the SELECT. You can do it like:
$(function() {
// This is document ready function
// This will trigger as soon as the document ready event fires
showHusbandFun();
});
This way a one time change at the time of page load will be applied and then will work as expected on change of your SELECT as well.
Let me know in case of any confusion.

jQuery provides a callback to which notifies when the page loads.
All you have to do is invoke the function in the 'document.ready' callback.
The below snippet should handle your case:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function removeError(id){
//console.log(id);
}
function showHusbandFun(){
var mStatus = document.getElementById('marital_status').value;
if(mStatus == 'Married'){
$("#spousehide").show();
$("#spousehideOther").show();
}else{
$("#spouse_name").val("");
$("#spouse_nationality").val("");
$("#spouse_place_of_birth").val("");
$("#spouse_country_of_birth").val("");
$("#spousehide").hide();
$("#spousehideOther").hide();
}
}
$(document).ready(function(){
showHusbandFun();
});
</script>
<select class="form-control-input" name="marital_status" id="marital_status" onclick="removeError(this.id);" onchange="removeError(this.id); showHusbandFun();">
<optio selected value="">Select Marital Status</option>
<option value="Single"> Single </option>
<option value="Married"> Married </option>
<option value="Divorced"> Divorced </option>
<option value="Widow"> Widow </option>
<option value="Deceased"> Deceased </option>
<option value="Unspecific"> Unspecific</option>
<option value="Child"> Child </option>
</select>
<div id="spousehide">Spouse</div>
<div id="spousehideOther">Spouse other</div>
<div id="spouse_name">Spouse Name</div>
<div id="spouse_place_of_birth">Spouse Nationality</div>
<div id="spouse_country_of_birth">Spouse Country of Birth</div>

Call showHusbandFun() outside of your onchange() inside of your script. Then it will be called on page load and you should get the results you expect.

HTML get value of select popoulated by PHP array

I have a view that that I have written in HTML and PHP that is like the following:
<select name="category" id="_category" class="_cateogry" onchange="submitTheForm() >
option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
Now, I want to get <?php echo $contents->name;?> when the onChange function is called.
I tried to resolve it unsuccessfully in JS, and here is the JS code that I attempted:
function submitTheForm () {
var selectElement = document.getElementById('_category');
var selected = selectedElem.options[selectedElem.selectedIndex];
console.log(selected.text);
}
I want to console.log the selected <?php echo $contents->name;?> when the onchange function is called.

There is a missing " after the javascript function and your code could be modified a little like this - to use event rather than rely upon names or ids
<select name="category" id="_category" class="_cateogry" onchange="submitTheForm(event)" >
<option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
function submitTheForm( event ) {
var value=event.target.value;
var text=event.target.options[event.target.options.selectedIndex].text;
console.log('%s -> %s',value,text);
}

<select name="category" id="_category" class="_cateogry" onChange="submitTheForm(this);" >
<option value="">Please select</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<script>
function submitTheForm(sel)
{
console.log(sel.options[sel.selectedIndex].text);
}
</script>
You can do as per below
// select box code whch one you have alredy
<select name="category" id="_category" class="_cateogry" onChange="submitTheForm(this);" >
<option value="">Please select</option>
<?php foreach ($categories as $contents ) {?>
<option value="<?php echo $contents->id;?>" selected="selected"><?php echo $contents->name;?></option>
<?php }?>
</select>
//Javascript code to get selected options text value
<script>
function submitTheForm(sel)
{
console.log(sel.options[sel.selectedIndex].text);
}
</script>

Use the function addEventListener to bind the event change.
This is an alternative.
You can get the value and text using the context this.
document.getElementById('_category').addEventListener('change', function() {
console.log(this.value);
console.log(this.options[this.selectedIndex].text);
});
<select name="category" id="_category" class="_cateogry">
<option value="">Please select</option>
<option value="1595">Ele</option>
</select>

You can use jquery easily rather than javascript:
function submitTheForm () {
var optionName = jQuery('#_category option:selected').text();
alert(optionName);
}

Dependent Dropdown is not loading on selection of first dropdown

I have two dropdown. I am using Jquery to load second dropdown. without jqyery My php code is working fine. but when I use with jquery second dropdown becomes empty on selection of first drop down.
First Dropdown ( Education )
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
Second Drop Down ( Degree)
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>
</select>
Second dropdown is using juery to load on selection of first dropdown Education.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#education').on('change',function(){
var educationID = $(this).val();
if(educationID){
$.ajax({
type:'POST',
url:'education-career.php',
data:'education_id='+educationID,
success:function(html){
$('#degree').html(html);
}
});
}else{
$('#degree').html('<option value="">Select Education first</option>');
}
});});</script>

Try change below line
data:'education_id='+educationID,
to
data:{education_id : educationID},

Try this.(second select tag have to place in first page in order to use $('#degree').html(...))
First Dropdown
$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);
<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
</option>
<?php }?>
</select>
<select name="degree" id="degree" >
<option value="-1">Please Select</option>
</select>
Second Dropdown
<option value="-1">Please Select</option>
<?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){
$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
$resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
{ ?>
<option value="<?php echo $rowdegree['degree_id']?>">
<?php echo $rowdegree['degree_name']?>
</option>
<?php } }?>

Here in ajax, you are using the
data:'education_id='+educationID,
Which is used to post the data. and the variable name will be here education_id.
And in your second page you are trying to get:
isset($_POST["education"])
this only. So on second page you have to replace education with education_id.

change:
$('#education').on('change',function(){
To:
$('select#education').change(function(){

check one of the select box is selected

i have 4 selectbox ,first one is vehicle selectbox and other three are sub of that vehicle select box ,if i select vehicle select box and click button i want to show a error message ,because one of the sub select is also i want to selected .... any one help ..i am just beginner in jquery/javascript
in simplest words :p ..check one of the sub select box(cars , caravans,buses select box) is selected if i selected main vehicle selectbox...
my code :
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['vehicle'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-vehicle-list" <?php if($_POST['reservation']['vehicle'] == 0) { echo 'style="display: none;"'; } ?> >
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['cars'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['caravans'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<?php for($i=1;$i<5;$i++) { ?>
<option <?php if($_POST['reservation']['buses'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?> </option>
<?php } ?>
</select>
</div>

Take a look at this SO question: How to check if an option is selected?
Using what is suggested in that link, add an alert with whatever message you want if no option has been selected.

There are new lines of code but have certain changes for better understanding for you and test.
HTML code
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-vehicle-list">
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
jQuery Code
$(function(){
$('.members-wrap-vehicle select').change(function(){
var cars = $('.members-wrap-adult select option:selected').val();
var caravans = $('.members-wrap-child select option:selected').val();
var buses = $('.members-wrap-infant select option:selected').val();
if ( cars == 0 || caravans == 0 || buses == 0 ){
alert('please select any of cars or caravans or buses');
}
});
});
Hope this works for you. THank YOu

This should work but there are some caveats. You have to change your <select> element names to ids (id = 'xxx'). Also, this function assumes that the number of vehicles in the sub menus totals the number in the vehicles menu. Please let me know if you need anything further! Cheers
$('#BUTTON_ID').on('click', function() {
var vehicle = $('#reservation[vehicle]').val();
var cars = $('#reservation[cars]').val();
var caravans = $('#reservation[caravans]').val();
var buses = $('#reservation[buses]').val();
if (vehicle == (cars + caravans + buses)) {
//do something
} else {
//error message
alert('Error has occurred.');
};
});

Selecting value of a dropdown select in html using javascript

I am using session variables to pass values from one page to another in php. I have passed a value from one page to another, now I want the passed value to be selected in dropdown menu.
Suppose dropdown select has 1,2,3,4,5 and when I pass 2 to the page containing dropdown, 2 should automatically get selected. How to do this?

Something like this will loop $x to 5 and check on each one if Session value is equal to it's value and then select it for you.
<select name="numbers" id="numbers" >
<?php for ($x=1; $x < 5; $x++): ?>
<option <?php if($_SESSION['value'] ==$x){echo "selected";} ?> value="<?php echo $x; ?>"><?php echo $x;></option>
<?php end for ?>
</select>

Roughly something like this should work, but for future reference please show more effort in your question i.e posting your code or some research attempts.
<label for ="Numbers"><span>Numbers</span>
<select name="numbers" id="numbers" >
<option value="" <?php if($_SESSION['value'] ==""){echo "selected";} ?>>Please Select</option>
<option value="1" <?php if($_SESSION['value'] =="1"){echo "selected";} ?>>1</option>
<option value="2" <?php if($_SESSION['value'] =="2"){echo "selected";} ?>>2</option>
</select>
</label>

<select>
<option <?php echo ($_SESSION['your-session'] == 1) ? "selected" : "" ?> value='1'>1</option>
<option <?php echo ($_SESSION['your-session'] == 2) ? "selected" : "" ?> value='2'>2</option>
<option <?php echo ($_SESSION['your-session'] == 3) ? "selected" : "" ?> value='3'>3</option>
</select>
printing "selected" on the option tag will solve your problem, you must check first if the value of the option is the value you stored in your session.