I have the following code in a .twig WordPress template:
<select id="filter-assessment-year">
<option disabled selected hidden>ASSESSMENT YEAR</option>
<optgroup label="Assessment Year">
<option value="2022">2022 Assessment</option>
<option value="2021">2021 Assessment</option>
<option value="2020">2020 Assessment</option>
<option value="2019">2019 Assessment</option>
</optgroup>
</select>
I then need to output different code depending on which year the user selects. I want to basically say if user selects 2022 then output this code, else if user selects 2021 then output this code.
How can I use the above option selection to control the code output in my twig template?
Thank you
You would need to use javascript for this. Try a library like Alpine JS if you're not already using jQuery.
const selectForm = document.getElementById('assesment');
selectForm.addEventListener("change", function(){
if(selectForm.value === '2022'){
alert('2022 Code will run');
}
if(selectForm.value === '2021'){
alert('2021 Code will run');
}
if(selectForm.value === '2020'){
alert('2020 Code will run');
}
if(selectForm.value === '2019'){
alert('2019 Code will run');
}
});
<form>
<select id="assesment" class="target">
<option value="0">ASSESSMENT YEAR</option>
<option value="2022">2022 Assessment</option>
<option value="2021">2021 Assessment</option>
<option value="2020">2020 Assessment</option>
<option value="2019">2019 Assessment</option>
</select>
</form>
Related
I would like to add an option in my drop down menu that unset or destroys the session $_SESSION['selected_opt].
Practice code:
<form class="search-form">
<select name="thema" class="selectpicker">
<option value="t1" class="special">Select something</option>
<optgroup label="Select...">
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 1</option>
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 2</option>
<option value="s1" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 3</option>
<option value="s4" data-icon="glyphicon-sort-by-alphabet" class="special">Selection 1</option>
</optgroup>
</select>
</form>
I've seen some code's like this around:
<option value="black" <?php if(isset($_SESSION['kategorie']) == "black") { echo ' selected';} ?>>Black and white</option>
So I've put something like that in the code:
<option value="t1" <?php if($_SESSION['selected_opt']) { unset($_SESSION['selected_opt']);} ?> class="class_opt">Select something</option>
But of course this didn't work. Is this at all possible or should I use something like jQuery? I could find a suitable answer anywhere... I hope someone can help...
You can do something like:
<select name="thema" class="selectpicker" change='selectChanged(this);'>
and create the function:
<script>
function selectChanged(obj){
if($(obj).val() == "LogOut"){
//redirect to your session clearing / log out page
window.location.href = 'http://example.com/LogOut.php''
};
});
</script>
and your option will be:
<option value="LogOut">Log Out</option>
Im using jquery.validationEngine.js everything is setup and working fine, however I need to make a change.
I have two dropdown boxes.
Is The Vehicle Imported? [yes, no]
What Is The Country Of Origin? [France, Germany, Japan, USA, UK] etc
What I require is that if the car is imported then to show the country of origin, else display nothing.
At the moment I have both fields working on a live form,
<label>Is The Vehicle Imported?</label>
<select class="validate[required] target" name="strLeadData39" id="strLeadData39">
<option selected="selected" value="">Please Select</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<label>What Is The Country Of Origin?</label>
<select class="validate[required] target" name="strLeadData40" id="strLeadData40" >
<option selected="selected" value="">Please Select</option>
<option value="Not Imported">Not Imported</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Japan">Japan</option>
<option value="Canada">Canada</option>
<option value="USA">USA</option>
<option value="EU-Other">EU-Other</option>
<option value="Other">Other</option>
</select>
How do Ш complete this?
Thanks
So you want to show/hide the country select depending on the value of the imported select?
$('#strLeadData39').change(function(){
if ( $(this).val() == "Yes" ){
$('#strLeadData40').show();
} else {
$('#strLeadData40').hide();
}
});
Here is a fiddle with a basic example
The above code has nothing to do with jQuery validationEngine,just hiding/displaying the element. To make the form validate you will probably have to dynamically remove/add the validate[required] class using jQuery removeClass/addClass, something inside the if/else like:
$('#strLeadData40').removeClass("validate[required]");
This question already has answers here:
Using Ajax, jQuery and PHP in two dropdown lists
(2 answers)
Closed 8 years ago.
I was making a dropdown switch. I mean when I choose an option of the first drop down the second will show specified message preset's in stead of the first.
**Dropdown one**
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option value="Sexual harassment">Sexual harassment</option>
</select>
How can I make that when I select an option from the first dropdown that the option values of the second will switch?
Thank you for help
It's called hierselect, chained or related selects.
I like this jquery plugin: http://www.appelsiini.net/projects/chained
So you have predefined values for each dropdown value from first list
<select id="first">
<option value='ban' data-show="#optionsOne">Ban Ban</option>
<option value='banAll' data-show="#optionsTwo">Ban All</option>
</select>
And you have other (hidden) dropdown for each of your options:
<select id="optionsOne" class='drop'>...</select>
<select id="optionsTwo" class='drop'>...</select>
When #first changes values, show relative dropdown:
$('#first').change(function(){
$('.drop').hide(); // hide all dropdowns
id = $('option:selected', this).data('show'); // take relevant id
$(id).show(); // show that dropdown with above id
});
Call javascript function event onchange,
<select name="bantype" onchange="getoptions(this.value);">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select><br/><br/>
<select name="reason" id="reason"></select>
In your function, use following
getoptions(val) {
if(val == 'user') {
var your_options = '<option value="abc">Abc</option>';
jQuery('#reason').html(your_options);
jQuery('#reason').show(); // if second dropdown is hidden
}
}
If you have a fixed option on page load, then here is one way to achieve what you want.
Give a relation between first select and the second one, like this:
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option class="user" value="a">a</option>
<option class="user" value="d">d</option>
<option class="ip" value="b">b</option>
<option class="system" value="c">c</option>
</select>
Use jQuery to show and hide the option, like this
$("select[name='reason'] option").each(function(){
$(this).hide();
});
$("select[name='bantype']").on("change", function(){
var selected = $(this).val();
$("select[name='reason'] option").each(function(){
if($(this).prop("class") != selected){
$(this).hide();
}else{
$(this).show();
}
});
});
Check out this DEMO..
Wow...all similar questions have serious downvotes. Guess I will be taking some as well, but been on this for a couple days and still stuck. So here it goes...
All of the following code is in index.php:
<form action="index.php" method="get">
<select name="month" id="month">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
</form>
<?php
$month = $_GET["month"];
echo "MONTH: $month";
$month in the php is NULL (Nothing prints out for $month). I want to be able to use it in the <?php ?> to make adjustments to it, then use it again in my HTML. How can I get the value from the HTML code for use in the PHP code?
I want to take 'value' and assign it to '$month'
Changes on the html page cannot change things within a php script as it has already executed on the server side. You need to setup some method to add the proper variable to the url (as you are using $_GET which is an array of the url variables in the query string, name value pairs after the ? in a url).
HTML
<select name="month" id="mySelect">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
JS
window.onload = function(){
var select = document.getElementById("mySelect");
select.onclick = function(){
var selectval = this.value;
window.location.href = "/somepage.php?month="+selectval;
};
};
Or using form submit, forms with the method GET will put all the input/select/textarea elements values into the url when submitted
<form action="somepage" method="GET">
<select name="month" id="mySelect">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
PHP is a server side language. You cannot use php on client side. If you want to do something on client side, use JavaScript.
If you want to use php with your html either you have to refresh the page(see answer of Patrik Evans), or use Ajax.
If you are planning to use ajax as it is fast and simple, move your php to a different file like index-form.php and call it by ajax get method.
Basically when you load the page via browser, browser first lookup for your site IP from DNS. Then your server will compile the whole page (ignoring html, js and other client side script) and compile the server side scripts like PHP, Perl, Python etc depending upon the type of server. Then your server will send the compiled page to your browser and browser will read it, compile the client side scripts and render it in your viewport.
<div>
<select name="mySelect" id="mySelect" class="select" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
<option value="english.php">English</option>
<option value="french.php">French</option>
<option value="spanish.php">Spanish</option>
</select>
</div>
i want to change language it work fine when i change the language but in dropdown it always shows english
Add a selected attribute to the option you want to be selected when the page loads.
You need to add another tag that is blank.
Working example:
http://jsfiddle.net/XYSXA/
<select name="mySelect" id="mySelect" class="select" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
<option value=""></option>
<option value="english.php">English</option>
<option value="french.php">French</option>
<option value="spanish.php">Spanish</option>
</select>
This way none of the options will be selected by default.
Alternatively, you may use the set the attribute selected inside one of the opening <option> tags to specify which language should be selected by default. Example selecting French by default:
<select name="mySelect" id="mySelect" class="select" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
<option value=""></option>
<option value="english.php">English</option>
<option value="french.php" selected>French</option>
<option value="spanish.php">Spanish</option>
</select>
Working example: http://jsfiddle.net/XYSXA/1/
<?
$file=basename($_SERVER['PHP_SELF'],".php");
$file=ucwords($file);
?>
<option value="french.php" <?=($file=="French")?" selected='selected'":""?>>French</option>
I m assuming that you're using the pattern like French for french.php, Spanish For spanish.php,etc