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

$_POST not working with required used in input tag

I have a form that works flawlessly until I add the required attribute to the input tag. Then the form doesn't post. I'm not sure where in the form the required attribute is breaking the $_POST function but once broken all required attributes have to be removed. Has anyone experienced this behavior?
The ONLY thing that comes to mind is I have about 17 <div> with display:none set. Using Javascript, when a selection is made from a drop-down <select> tag the JavaScript changes the display to display:block as each <div> has unique set of <input> and <select> tags based on the building type selected. All of this is inside the <form> </form> tags.
There's nothing special about the <input> tags. Only when I add the required attribute to the <input> tags inside a <div> does it have a problem.
A typical <input> tag looks like this:
<input name="total_meters" type="number" id="total_meters" tabindex="20" size="40" min="1" max="99999999999" value="2" />
The required attribute is going between <input and name.
I'm asking here before I code my own validation routines.

Use jQuery function to add attribute "required" to the require input tag or
Make multiple form tag and multiple summit button for each div tag and adding attribute "required" into input tag.

Options added to [disabled multi] Select field dynamically are not posted?

I have dynamically created option elements with javascript. I double click an option from one select field to transfer it to a second, disabled, multiple select field. This works fine. The problem appears when I go to submit the form with the new information. The second select field is not passed to PHP. I'm assuming it thinks its empty, but each of the options I added are selected by default and I visually see them all there. I've been looking around for a solution to this, but am having little luck. Everything I can find says that the most likely cuprit is a browser incompatibility or that the elements are not being added to the form. If it is a browser incompatibility issue, I've tried it on all the major browsers all with the same results, so I would like to know which one I'm missing (FF, Chrome, IE). As for not being added to the form, I don't see how that could be possible. The select element already exists in the form and I am merely appending new options in it. Am I missing something, or is this just not possible?
<script type="text/javascript" language="JavaScript">
function addModule(value, title) {
modules = document.getElementById('modules');
modules.options[modules.options.length] = new Option(title, value, true);
}
</script>
<form name="addModules" method="POST" action="submit.php">
<select name="moduleList" size="20" ondblclick="addModule(this.options[this.selectedIndex].text, this.value);">
<?php //dynamically created options from PHP ?>
</select>
<select id="modules" name="modules[]" multiple="multiple" size="20" DISABLED></select>
<input type="submit" value="Add Modules" />
</form>

Disabled fields are not submitted. The easiest solution is to change it to readonly. If you're determined to have it as disabled, you could make a hidden field that is updated with values from it, but I strongly suggest just using readonly and then trying to style it as desired.

It's because the second select is disabled, it's data doesn't get sent when the form is submitted.
You could try making it readonly instead of disabled.

This is the standard browser behavior. While adding the values to the disabled select list, you can also add it to a hidden input field, and then access this in the posted request.

input type disabled and readonly behave differently with a href

I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.

If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.

Disabled does not submit values, but read-only does submit values.

HTML Select and Text Input

We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.
Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?

You could use datalist. Example:
<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
<option value="Chocolate Chip"/>
<option value="Peanut Butter"/>
<option value="Raisin Oatmeal"/>
</datalist>
Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/
This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.
My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.

An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.

That's a fairly common way to design a form both on paper and on the web.
I'm not quite sure exactly what you mean with a better way to do so...
If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:
<select><!-- implemented something like rahul showed -->
<noscript>
<label for="ifOtherInput">If other please specify</label>
<input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
<!-- Here we know the user selected other so we can just have this label: -->
<label for="ifOtherInputJs">Please specify</label>
<input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>
The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.