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.

Safari not reading required field

I created an option field and with it I set it to a required field and it works perfect on Chrome/internet explorer/Android's internet. However, when going to my site with Apple's safari on mobile, the required field does not stop the customer when trying to proceed and saying that is a required field.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST'>"?>
<select class="productsize" name='size' required>
<option value=''>Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select>
Is there something else I have to add other than the html5 'required' field for this to make it work on Safari or why isn't this working?
If Safari does not support it, what is another way I can implement this field to be required?
UPDATE:
After figuring out it isn't supported, I tried doing some JS with it, but my message OR alert won't display. However, it doesn't allow the customer to move forward unless a size is picked, but I need the message to display so they know why.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST' id='formID'>"?>
<select class="productsize" name='size' required><span id="sizeoptionMSG" style="margin-left:6px;color:darkred;"></span>
<option value='' id="sizeoption">Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select><br><br>
<select class="productquantity" name='quantity'>
<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>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
</div><br><br>
<div class="productdetailaddbutton">
<?php
echo "<input type='hidden' name='product_id' value='$product_id' />
<input type='submit' class='addtocart' name='add_to_cart' value='Add to cart' />";
?>
<script>
var form = document.getElementById('formID'); // form has to have ID:
<form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message
document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border
if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field
alert('Please, select a size.'); // error message
}
}, false);
</script>

At this time, Safari does not support the "required" input attribute.
See here: http://www.w3schools.com/html/html_form_attributes.asp

Select box automatically redirects when clicked

I made,options in select box clickable. However for the very first option I din't put any link. But just when I click on the select box it redirects to somewhere and says page not found.
But if you click on the arrow and hold for a while then the dropdown appears.Now when u click any of the option it works. But I wonder why at first it doesn't shows the dropdown and just redirect.
here's the js fiddle: http://jsfiddle.net/58cqc812/
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php #Core::getHook('block-branches'); ?></option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
JS
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onclick = function(d){
window.location = this.value;
};
</script>
You can refer to the live site. You need to resize the browser to the smallest, then only this menu appears.It's meant for mobile version.
http://ymm.valse.com.my/

change on click event to change event .... it will fire when click the select box .
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
i don't exactly know how on change work with JavaScript bcz i prefer jQuery

Using jQuery
$("#myselect").change(function(){
if($(this).val()!==""){
window.location = $(this).val();
}
});

Enable field when selecting from drop-down box

My contact form page, for user edit details, has two drop-down fields, ‘country’ and ‘city’.
I would like when a user is edit his details that the ‘city’ field will be disabled until something is selected in the ‘country’ drop-down menu.
<form name="item" action="<?php echo base_url(true) ?>" method="post">
<label><?php _e('Country', 'my_theme'); ?></label>
<?php ItemForm::country_select(get_countries(),user()) ; ?>
<label><?php _e('City', 'my_theme'); ?></label>
<?php ItemForm::cities_select(get_cities(),user()) ; ?>
<button class="itemFormButton" type="submit"></button>
</form>
I’ve tried ‘onchange’ in javascript, probably with wrong syntax…
How can I create this?
Thx.

This might help you http://jsfiddle.net/GZ269/. This uses jquery.
Country:<br />
<select id="drop1">
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
<br />
City:<br />
<select id="drop2" disabled >
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
Javascript function:
$("#drop1").change(function(){
var country = $(this).val();
if(!country){
$("#drop2").attr("disabled", true);
return false;
}
$("#drop2").attr("disabled", false);
});​

You should do this with Javascript's onchange event, and when this event is fired, you have two options:
Query the cities for the country selected with ajax.
This is good if you support (almost) all the countries in the world.
Here you must develop a PHP script to be queried when this event is fired.
Have a great array with the cities for all the countries supported.
Too bulky if need you to cover many countries.
Less flexible, if you need to add more cities for any country.

Send form based on html select error

I have a select form that sends the value when you change the select. Unfortunately, everytime it sends it goes back to the option "10". How can I have it (for example) so you can click on the 20 option and send form and stay on 20?
Here is the code:
<form method='get' name='FormVote'>
<select name="vote" onChange="document.forms['FormVote'].submit()">
<option selected="selected" value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
</select>
</form>
Any help will be greatly appreciated! Thanks!

it's staying on 10 because of the
selected="selected"
attribute in the option for 10
To have it remember where the user put it you'll need to fetch its value from the database and then do something like this in PHP:
foreach ($optionsArray as $option) {
echo '<option ';
if ($theOptionValue == $savedUserOptionValue)
echo 'selected="selected"';
echo 'value="', $theOptionValue, '>', $theOptionValue, '</option>';
}
Or you could use AJAX to send the form to the server in which case the page won't refresh and the option box will stay where it is.

Use Ajax or,
<form method='get' name='FormVote' target='hidden'>
<select name="vote" onChange="document.forms['FormVote'].submit()">
<option selected="selected" value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
</select>
</form>
<iframe name='hidden' id='hidden' style='display:none' width='0' height='0' border='0'></iframe>