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>
Related
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>
I need to select both drop down based on the url parameter
Here is my code
<select id="parent-cat" name="parent-cat" onchange="getFilterUrl(this.value)">
<option value="www.site.co/?test=101">Test 1</option>
<option value="www.site.co/?test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat"
onchange="getFilterUrl(this.value)">
<option value="www.site.com/?sample=95">Sample 1</option>
<option value="www.site.co/?sample=96">Sample 2</option>
<option value="www.site.co/?sample=97">Sample 3</option>
<option value="www.site.co/?sample=98">Sample 4</option>
<option value="www.site.co" selected="">Sample 5</option>
</select>
<script>
function getFilterUrl(filterurl) {
var url = filterurl;
if (url) {
window.location = url; // redirect
}
return false;
}
</script>
Right now after selecting each drop down, that is refreshed to selected url,
I am looking for code, if we select first drop down, and next one,
I need to form url like below for second drop down first option.
Example: if Test 1 is selected, then, Sample 1 selected, the Url should be like beloww with both option as selected
site.co/?test=102&sample=95
How this can be done?
Please anyone help me to achieve this.
Thanks
As I said, your question is not clear
Here is a fixed version of your code.
document.getElementById("container").addEventListener("change",function(e) {
var parent = document.getElementById("parent-cat").value,
child = document.getElementById("child-cat").value;
if (parent && child) {
var url = "https://site.co?"+parent+"&"+child;
console.log(url)
// window.location=url;
}
});
<div id="container">
<select id="parent-cat" name="parent-cat">
<option value="">Please select</option>
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat" >
<option value="">Please select</option>
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
</select>
</DIV>
In PHP:
document.getElementById("container").addEventListener("change", function(e) {
var parent = document.getElementById("parent-cat").value,
child = document.getElementById("child-cat").value;
document.getElementById("message").innerHTML= parent && child ? "":"Please choose both";
if (parent && child) document.getElementById("myForm").submit();
});
<form action="redirect.php" id="myForm" method="post">
<div id="container">
<select id="parent-cat" name="parent-cat">
<option value="">Please select</option>
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat">
<option value="">Please select</option>
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
</select>
</div>
</form>
<span id="message"></span>
using
$parent = isset($_POST['parent-cat']) ? $_POST['parent-cat'] : null;
$child = isset($_POST['child-cat']) ? $_POST['child-cat'] : null;
if ($parent && $child) {
header("location: https:///www.site.co?".$parent."&".$child);
}
If you don't want to redirect immediately after choosing anyone just erase one of the onchange event.
HTML:
<select id="parent-cat" name="parent-cat" onchange="getFilterUrl()">
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat"
onchange="getFilterUrl()">
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
<option value="www.site.co" selected="">Sample 5</option>
</select>
Script:
function getFilterUrl(filterurl) {
var s1 = $('#parent-cat').val();
var s2 = $('#child-cat').val();
if (s2 == 'www.site.co') {
s2 = '';
}
window.location.replace("http://www.site.co/?"+s1+'&'+s2);
return false;
}
In case of 5th option from the second select I exclude the second param from the url. If you have any questions - ask them.
I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
I want to create a very simple (no plugins and basic layout) for a dropdown menu that has checkboxes for options. For example, if C and F are selected and the form is submitted, I want the url to show /index.php?category1=3&&category2=6
<form action="" method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="submit" value="go">
</form>
I am not even sure how to start the jquery to pass the values to the url. Any help is much appreciated!
EDIT:
I figured I can do this using instead and simulate a dropdown with jquery.
Here is the jsfiddle: http://jsfiddle.net/k6R7g/
how can I show "2 Selected" instead of "Select..." when selections are made?
See code below, construct the url yourself and it will work. In case the form contains more values you can better add the category to the value of the option.
<form method="get">
<select multiple="multiple" name="category">
<optgroup label="Category1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</optgroup>
<optgroup label="Category2">
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</optgroup>
</select>
<br><input type="button" value="go" onclick="clicked();">
</form>
<script type="text/javascript">
function clicked(){
var v = "";
$('select').find(":selected").each(
function(){
if (v != ""){
v += "&";
}
v += $(this).parent()[0].label + '=' + $(this).context.value;
}
);
window.location.href = "index.php?" + v;
}
</script>
I have a question. Let me explain this with an example.
I have this piece of code:
<form action="vehicles.php" method="get">
<span>Marca:
<select name="brand">
<option value="null" selected="selected"></option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="null" selected="selected"></option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Is any way to prevent the assignment of those variables if the option selected is the "null" one?
If, for example, I select brand="Renault" and model="null" the url is
http://mywebpage.com/vehicles.php?brand=Renault&model=null
but it should be
http://mywebpage.com/vehicles.php?brand=Renault
I know how to unset the variables with "null" value after the form submission with PHP. Is any way to do it before the submission and after the variables are setted to "null".
I would like a cleaner url, free of "variable=null" results.
P/D: I don't have a native english speaking so feel free to edit my question. I wish you understand me.
I am afraid that you might need javascript to achieve what you want.
Take a look at this code:
<form action="vehicles.php" id="carForm" method="GET">
<span>Marca:
<select name="brand" id="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model" id="model">
<option value="none" selected="selected">-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="button" value="Submit" onclick="submitFormFilter();" />
</form>
Javascript : code will be like this:
<script>
function submitFormFilter(){
var myForm = document.getElementById("carForm");
var carBrand = document.getElementById("brand");
var carModel = document.getElementById("model");
if(carBrand.value === "none" || null){
carBrand.parentNode.removeChild(carBrand);
}
if(carModel.value === "none" || null){
carModel.parentNode.removeChild(carModel);
}
myForm.submit();
}
</script>
http://jsfiddle.net/7xzKP/1/
you can it try here.
Include the value attribute of your option tags.
<option value="" selected="selected">-</option>
You should really do this for all of your options.
if you don't want to use $_GET superglobal because of the url extension that it comes with try using $_POST instead. It will not have a url extension and it can still store values that you can later retrieve. Just be sure to change your method to equal POST instead of GET.
So the code for the form tag would change to:
<form action="vehicles.php" method="POST">
And you can later access it by (for example):
echo $_POST['brand'];
or
echo $_POST['model'];
as well, you probably want to add a value param to the values that you have in your option tag.
EDIT-
I've added this new section since you don't want to use POST even though I think you should.
You can stay with the GET method by doing this line of code:
<form action="vehicles.php" method="GET">
<span>Marca:
<select name="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="none" selected>-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Let me know if that helps
You should set the value for the option tag of <select> :)
You's missing set value for option tag. you should set the value for option tag in select tag. With the blank value, you can assign it to a special value like zero(0)
<select name="model">
<option value="0" selected>-</option>
<option value="1">206</option>
<option value="2">Suran</option>
<option value="3">Passat</option>
<option value="4">Punto</option>
</select>
EDIT:
Ok. I got your point. You can import jquery to your page and make a check by javascript before you submit, if the value of select box is blank. you can remove it.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$("form").submit(function(){
if($("select[name='model']").val() == "0") $("select[name='model']").remove();
return true;
});
})
</script>