<select asp-for="ProductFilter.BrandId"
asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option>Chose one</option>
</select>
<button type="button" onclick="clearRadioButtons()" class="btn btn-outline-info mt-3">Clear</button>
I have some list items and 1 default item which is "Chose One" and what i want is when i click Clear button just make select list choosen value "Chose One" how can i do this with javascript? Thanks For helping!
For example i got A,B,C,D in options and of course default Chose one and when someone chose C and after click "Clear" button i want to make it "Chose One" back.
Add empty value to the default option and add an id to the select element:
<select id="brand-select" asp-for="ProductFilter.BrandId" asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option value="">Chose one</option>
</select>
Then select default option like this:
function clearRadioButtons() {
var selectElement = document.getElementById("brand-select");
selectElement.value = "";
}
To fulfill your requirements I'll propose two solutions that should (or at least one of them) work for you.
Option 1: Default Form Behavior (let the browser do the trick for you)
For this situation I'd rather use the reset button type of the form element. The button[type="reset"] resets all* the form fields to their original values when the browser loaded the page.
Here's an example, you may choose an option from the list and then click on "Reset" to revert the list to its original state.
<form>
<select>
<option value="" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="reset">Reset</button>
</form>
all:* keep in mind, the button[type="reset"] will try to reset all the form fields to their original values and not only your select element.
Note: in the above example, i intentianally set the option with the text "Choose" as selected using the selected attribute in order for that option to be selected no matter what its position in the select element.
Option 1: JavaScript Workaround
In case the first solution cannot be used, here's a solution that relies on JavaScript to do the trick.
The idea here is to set a default option by specifying an ID for it (so we can easily retrieve it by JavaScript) and an Event Listener on the button that resets the list.
const list = document.getElementById('list'),
defaultOption = document.getElementById('default-option'),
resetBtn = document.getElementById('reset-list');
// listen for "click" events on the "Reset" button
resetBtn.addEventListener('click', e => {
/**
* the below line is required only when you use a link (for example) instead of a button or the button type is different from "[type=button]".
/* The role of that line is to prevent the default behavior of the clicked element. In case of a link, the line prevents the unwanted jump on the page as the browser tries to follow the link and it scrolls the page all the way to the top (or simply follows the link if an "href" attribute is set on the "a" tag).
*/
e.preventDefault();
// reset the list
defaultOption.selected = !0;
});
<select id="list">
<option value="" id="default-option" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="button" id="reset-list">Reset</button>
I recommend using the selected attribute on the option you want to be reselected once the "Reset" button is clicked.
Simple JS fiddle containing my code in working state
I have a jQuery UI Autocomplete field, with a Dropdown button attached. It works floorlessly, however - its kinda annoying you have to manually delete the words inside the field for a search.
I am unsure if jQuery UI has a feature for it, unless i'd love to know.
I've tried to use onClick functions with JS, however since my field is not exactly an "form field" I've got kinda lost here.
My goal is to: reset the text field when a user presses it.It has prewritten text in it "Please select (Or Type)"
my cshtml file looks as following
cshtml
And it looks like this on the browser browser
Code for Image 1:
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
As you can see it has the text in, which i have to CTRL + A, DELETE before i can search in my field.
A function to clear this text when a user presses it will easen the pressure.
I might just be stupid to see the simple solution, i just feel like I've tried some of the things that I'd believe would work. (As the onclick="ResetText()" with a JS code attached to it)
When I click on drop down this is what showing.
Best Regards,
You don't want to wire an onclick listener on your option element, you want an onchange event listener on your select element. onclick is not supported on option elements.
use onchange instead of using onclick and this action should be on the select tag. not on the options. Try this example.
$('select').on('change', function() {
if (this.value === 'disabled') {
this.value = '';
}
console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
<option selected="selected" type="text" value="disabled">Please select (Or Type)</option>
<option type="text" value="One">One</option>
<option type="text" value="two">two</option>
</select>
<span asp-validation-for="Dinosaur" class="text-dark" />
I'm in a wordpress environment, I have created some filtered post views using the plugin facet WP and I have placed two checkboxes and a dropdown filter.
So I have these 2 checkboxes:
<div class="facetwp-facet facetwp-facet-isola facetwp-type-checkboxes"
data-name="isola" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="cefalonia">Cefalonia <span
class="facetwp-counter">(11)</span>
</div>
<div class="facetwp-checkbox" data-value="corfu">Corfù <span
class="facetwp-counter">(28)</span>
</div>
</div>
And then I have this dropdown already populated by the plugin:
<div class="facetwp-facet facetwp-facet-localita_di_corfu facetwp-type-
dropdown" data-name="localita_di_corfu" data-type="dropdown">
<select class="facetwp-dropdown">
<option value="ipsos">Ipsos</option>
<option value="acharavi">Acharavi</option>
<option value="dassia">Dassia</option>
<option value="gouvia">Gouvia</option>
</select>
</div>
What I want is:
if I select the first checkbox Cefalonia, then show only
options "ipsos" and "acharavi" in the dropdown.
if I select the second checkbox Corfù then show only options "Dassia" and
"Gouvia" in the dropdown.
if both are selected show all the related options.
just need a starting point.. I have found how to do this with 2 dropdowns but not with checkboxes.. I'm not so good with javascript many thanks
Understanding:
If I am not misunderstanding your scenario, you are asking for some front end development (HTML, CSS, JavaScript) to be carried out so that drop down options alter based on the users checkbox selection
Modifications Explained
From what I can see in your HTML, your using a set of CSS classes intended to style a DIV element as a checkbox and then set values using the data-attribute as a way of reading its value. Personally I feel it is a bit long-winded and you would of been better off making them checkboxes and just style the checkbox using CSS to how ever you feel works best, if your checkboxes are sliders switches then you can include a checkbox that is hidden and that the value of the checkbox is updated from the interactions the user is making.
I have therefore made my code shier basic for you to follow, I will admit this is not the most efficient way of coding it, but its a working example for you to modify to your hearts content.
Note this does not HIDE the options but disables the user from selecting them
If you want to hide the option, you will need to next each option in a DIV and set that the CSS display attribute to false. I didnt code it this way as I would have to research how that would fit in with it being HTML compliant.
Code:
function checkState(x){
var Checkboxes = document.getElementsByName("checkbox");
var Options = document.getElementsByName("options");
for (i = 0; i < Options.length; i++){
Options[i].disabled = true;
}
if (Checkboxes[0].checked && Checkboxes[1].checked){
for (i = 0; i < Options.length; i++){
Options[i].disabled = false;
}
}
if (Checkboxes[0].checked && (Checkboxes[1].checked == false)){
Options[0].disabled = false;
Options[1].disabled = false;
}
if (Checkboxes[1].checked && (Checkboxes[0].checked == false)){
Options[2].disabled = false;
Options[3].disabled = false;
}
}
<form>
Cefalonia: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="cefalonia" onclick="checkState(this)"><br>
Corfù: <input name="checkbox" type="checkbox" class="facetwp-checkbox" value="corfù" onclick="checkState(this)">
</form>
<div class="facetwp-facet facetwp-facet-localita_di_corfu facetwp-type-
dropdown" data-name="localita_di_corfu" data-type="dropdown">
<select class="facetwp-dropdown">
<option name="options" value="ipsos" disabled>Ipsos</option>
<option name="options" value="acharavi" disabled>Acharavi</option>
<option name="options" value="dassia" disabled>Dassia</option>
<option name="options" value="gouvia" disabled>Gouvia</option>
</select>
</div>
Understanding what is happening
First off we have no ID or Names allocated to the options, this is important because you have no way of selecting the element in JavaScript without it (unless using a JS library with a function pre-coded such as jQuery, that checks every option on the page, which can slow down website performance, specially if you have multiple forms elsewhere on your website).
Given that IDs are to be unique, I have given the elements a name, this way we can select all of them and compile it into an array, which we can then loop thru and disable all or enable all based on both checkboxes being selected or not.
As I am assuming these are the only two options available, I have done various if statements, otherwise it would need a switch statement which would be more efficient if there are more than just kefelonia and corfu as the options to choose from, this is because you didnt specify this in your description to your question.
We then loop thru each value and enable or disable the option based on the checkbox chosen.
Disable them all first, that way if no boxes are chosen there all disabled
If we select all options we enable all
If we dont, then only display what is relevant
You can try setting the disabled attribute on the option depending on the checked value of the drop down:
$(".facetwp-dropdown option").each(function(){
$(this).attr('disabled','disabled');
});
$(".facetwp-dropdown").val("");
$('[data-value="cefalonia"]').change(function(){
$(".facetwp-dropdown").val("");
if($(this)[0].checked){
$(".facetwp-dropdown option[value='ipsos'],.facetwp-dropdown option[value='acharavi']").removeAttr('disabled');
}
else{
$(".facetwp-dropdown option[value='ipsos'],.facetwp-dropdown option[value='acharavi']").attr('disabled','disabled');
}
});
$('[data-value="corfu"]').change(function(){
$(".facetwp-dropdown").val("");
if($(this)[0].checked){
$(".facetwp-dropdown option[value='dassia'],.facetwp-dropdown option[value='gouvia']").removeAttr('disabled');
}
else{
$(".facetwp-dropdown option[value='dassia'],.facetwp-dropdown option[value='gouvia']").attr('disabled','disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="facetwp-facet facetwp-facet-isola facetwp-type-checkboxes"
data-name="isola" data-type="checkboxes">
<input type="checkbox" data-value="cefalonia">Cefalonia
<input type="checkbox" data-value="corfu">Corfù
</div>
<div class="facetwp-facet facetwp-facet-localita_di_corfu facetwp-type-
dropdown" data-name="localita_di_corfu" data-type="dropdown">
<select class="facetwp-dropdown">
<option value="ipsos">Ipsos</option>
<option value="acharavi">Acharavi</option>
<option value="dassia">Dassia</option>
<option value="gouvia">Gouvia</option>
</select>
</div>
My form contains a select field that contains two options: show and hide option:
I want when I select the show option, a text field should be appear in the form and if I select hide option, the text field should be disappear (hidden).
I ask which method should be used, any one has an example how doing this?
You certainly need Javascript to achieve this. Very simple working example using jQuery :
$(function() {
$('#type').change(function() {
if ($('#type').val() == 'show') {
$('#hidden_text').show();
} else {
$('#hidden_text').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option name="Show" value="show">Show</option>
<option name="Hide" value="hide">Hide</option>
</select>
<div class="row" id="hidden_text">
Hidden text
</div>
You may want to adapt this example to the ids used in your view so that the onChange event is triggered on your select field.
I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.
The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?
Two possibilities I'm considering include:
Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.
Disable the fields and then enable them before the form is submitted:
jQuery code:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});
<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name is the name that you would normally give the <select>.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.
I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.
I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using
$('#toSelect').find(':not(:selected)').prop('disabled',true);
it dows not work with the :input selector for select fields, use this:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});
Same solution suggested by Tres without using jQuery
<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">
<select id="mysel" disabled="disabled">....</select>
<input name="submit" id="submit" type="submit" value="SEND FORM">
</form>
This might help someone understand more, but obviously is less flexible than the jQuery one.
The easiest way i found was to create a tiny javascript function tied to your form :
function enablePath() {
document.getElementById('select_name').disabled= "";
}
and you call it in your form here :
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
Or you can call it in the function you use to check your form :)
I use next code for disable options in selections
<select class="sel big" id="form_code" name="code" readonly="readonly">
<option value="user_played_game" selected="true">1 Game</option>
<option value="coins" disabled="">2 Object</option>
<option value="event" disabled="">3 Object</option>
<option value="level" disabled="">4 Object</option>
<option value="game" disabled="">5 Object</option>
</select>
// Disable selection for options
$('select option:not(:selected)').each(function(){
$(this).attr('disabled', 'disabled');
});
Just add a line before submit.
$("#XYZ").removeAttr("disabled");
Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.
I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled.
This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)
Shameless plug: https://github.com/Jezternz/jq-disabled-inputs
Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".
function changeSelectUserManipulation(obj, disable){
var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
disable = disable? !!disable : !$obj.is(':disabled');
if(disable){
$obj.prop('disabled', true)
.after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
}else{
$obj.prop('disabled', false)
.next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
}
}
changeSelectUserManipulation("select_id");
I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well.
Using jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});
<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}
Another option is to use the readonly attribute.
<select readonly="readonly">
....
</select>
With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.
Edit:
Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful.
When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls