Develop Reference

Reset text field on Mouse press / Input - jQuery UI Autocomplete

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" />

Multiple Select bug in Firefox

I have a specific problem with multiple select values.
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
JS:
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#0_1").attr("selected","selected");
$("#0_3").attr("selected","selected");
});
I've crated a JSfiddle which shows the problem:
When you click on Set Values button, it clears all options selected attribute, then sets it to selected for first and third options.
PROBLEM: In Firefox after second click on Set Values button, it clears the selection values.
In other browsers it works well.
Any ideas?

Instant solution!!!!
$("#0_1").prop("selected", true);
$("#0_3").prop("selected", true);
Some explanation ?!!?
So, what's the difference between .attr() and .prop()!!!
Basically, properties are of DOM elements whereas attributes are for HTML elements which are later parsed into DOM tree using browsers parser.
Because of some inconsistent behaviour amongst different browsers it's preferred to use .prop() instead of .attr().
Quoted from jQuery API Documentation :
"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."
There are lot's of reasons you want to switch to .prop(). Here's a great thread that helped me to dive into more of .attr() and .prop() ;)
.prop() vs .attr()

Two things:
To set the selected state, use prop, not attr.
In CSS selectors, and id cannot start with a digit, so #0_1 and #0_3 are invalid selectors. (They happen to work because of an optimization in jQuery where something that's obviously an id selector on its own ends up going to getElementById instead of a CSS selector parser like querySelectorAll or Sizzle's own parser, but it's not something you should rely on. For instance, if you had an element with id="123" and an element inside it with class foo, $("#123 foo") would throw an error.)
Fixes:
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="x0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="x0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#x0_1").prop("selected",true);
$("#x0_3").prop("selected",true);
});
Updated fiddle

Changing the placeholder text based on the users choice

jQuery is permitted, but an HTML-only solution is preferred.
I have a select box with a couple of options. When the user selects 'Name', I want the placeholder text 'Enter your name' to appear in the adjacent text-box.
Likewise for 'ID' -> 'Enter your ID'.
See http://jsfiddle.net/Uy9Y3/
<select>
<option value="-1">Select One</option>
<option value="0">Name</option>
<option value="1">ID</option>
</select>
<input type="text">
This is a requirement by a client that I haven't been able to figure out.
If it helps, the website is using the Spring framework.

Since you need to update the placeholder when the select updates, you'll need to use javascript to do it.
You could set the placeholder you would like to display as an attribute on each option element using the HTML5 data- style attributes. Then use jQuery to attach a change event listener which will update the placeholder attribute of the input box.
Note that the placeholder attribute doesn't have any effect in older versions of IE, so if you need to support old IE you'll need to polyfill that functionality with another library.
Working Demo
HTML
<select id="mySelect">
<option data-placeholder="" value="-1">Select One</option>
<option data-placeholder="Enter your name" value="0">Name</option>
<option data-placeholder="Enter your ID" value="1">ID</option>
</select>
<input id="myInput" type="text">
jQuery
$('#mySelect').on('change', function() {
var placeholder = $(this).find(':selected').data('placeholder');
$('#myInput').attr('placeholder', placeholder);
});

It requires JavaScript. You can do it inline -- if that's what you mean by HTML-only.
<select onchange="document.querySelector('input').setAttribute('placeholder', 'Enter your ' + this.options[this.selectedIndex].text);"></select>

See the following jsfiddle for an example of how to do this:
http://jsfiddle.net/sW6QP/
Note that this is using jQuery ONLY because jsfiddle seems to be unable to find the function placed into the onChange event.
If you want to do it without jQuery, change the select line to this:
<select id="selectionType" onChange="setPlaceholder();">
And instead of $("#selectionType").on("change",function() {, do this instead:
function setPlaceholder() {
(make sure to change the }); to } as well)

Add onclick event to disabled field

I am using a form a custom generator. The form is specified in a file, this file gets parsed and HTML elements will be generated by JSF 2.x programmatically, for example HtmlInputText by Apache MyFaces.
In our application we have a readonly user role. For those users we try to make all input options disabled. On input fields we are setting the html readonly attribute, for other elements, which have no readonly attribute like select fields, we are setting disabled attribute.
Unfortunately setting disabled=disabled will inactivate all javascript events too. Now, I need to trigger a javascript-function on click at a disabled option-field. How can I do this?

Wrap the disabled element in another element that supports the onclick attribute. A good example of this is the <h:panelGrid/>
<h:panelGrid style="width=20px" onclick="foo.myBar()">
<h:someComponent disabled="true"/>
</h:panelGrid>

I don't think, there is much you can do about it.
though there is one, ugly solution to this.
place position:absolute non-disabled container over your disabled elements i.e.
<select disabled="disabled" >
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<div onclick="alert('s')"
style="width:56px;position:absolute; top:1.7%; left:1.6%;height:18px;" >
</div>
where value of top and left for the container depends on the position of the select
see this fiddle

how to fire an event when a toggle flip changes?

I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".
Here is the HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch">
</label>
<select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">
<option value="off">gps</option>
<option value="on">manual</option>
</select>
</fieldset>
</div>
and here is my JavaScript:
$('#toggleswitch').change(function(){
console.log("toggle");
});
At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.
EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.

Your id on the select element is toggleswitch3, but in the JavaScript code you use toggleswitch. The names need to match in HTML and JavaScript, otherwise it can't work.

Did you put the code in the dom ready callback?
$(function() {
$('#toggleswitch').change(function(){ console.log("toggle"); });
});
PS: If you use id selector, no need to specify the element type.
Edit:
Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.