I'm trying to make a placeholder for my dropdown multiple options using Angular and Bootstrap. But looks like i'm doing it wrong. I made a option for a placeholder like please select and put it on top but it is not showing until i made a first submit.
<label>Question</label><br>
<select #question="ngModel" name="question" [(ngModel)]="AppService.selectedquestion.question" class="empty form-control">
<option value="" disabled selected hidden>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br>
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
I think it caused by my ngModel part.Can anyone help me figure this out, please?
If you remove the hidden attribute, you can see the "Please select" option even after 1st submit. Hope this meets your requirements
<label>Question</label><br>
<select #question="ngModel" name="question" [(ngModel)]="AppService.selectedquestion.question" class="empty form-control">
<option value="" disabled selected>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select><br>
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
Related
Good day!
I've got a simple problem, and it involves HTML.
I've googled everywhere, but found only similar results for, "How to disable autocomplete on input".
I'm trying to find a way to block custom input for a dropdown selection input, but I can't seem to find it.
I've found the attribute disabled, and setting disabled="true" on the input completely disables it, which is not my goal.
This is my code, I found it on w3schools.com.
I've attached 2 versions of it, un-disabled and disabled.
<!--NOT DISABLED STUFF-->
<form action="/action_page.php">
<input style="margin-bottom:15vw;" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<!--DISABLED STUFF-->
<form action="/action_page.php">
<input list="browsers" disabled="true">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Thank you for reading :)
I found a way to do it, thanks to #Eisenheim's comment.
Instead of using <datalist> stuff, it works when I use <select>.
<form action="default.php">
<select>
<option value=""></option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</select>
<input type="submit">
</form>
Given the following code:
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
The following UI is rendered:
What CSS can be added without changing the HTML and without using JavaScript to take away the auto-completed items so it behaves like a datalist-less input?
The following UI is desired:
It is not solved with css, but try use autocomplete="off" in your input
Is there a way to have a select drop menu showing multiple options at ago but the user can only click on a single Item... How to restrict them from highlighting all options at ago even though they can see all the options?
Example
<form action="">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<strong>They Should NOT Highlight or select more than one option at a go!!</strong>
I want the user to NEVER Highlight all options at ago because that will submit all options to the SERVER-SIDE Script and Err.
See it in action here:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
Go to that link and try to highlight all options and Submit the query... You'll see all options are submitted. How to prevent that multiple highlighting even when they click CTRL+option after option?
Dont use multiple set a size to it
<form action="">
<select name="cars" size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Demo on Fiddle
HTML:
<form action="">
<select name="cars" visible="volvo">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" />
</form>
From:
<select name="cars" multiple>
To:
<select name="cars">
<select class="form-control" id="service_select">
<option disabled="disabled"></option>
</select>
In chrome it is fine. Is there another way to make it disabled but not hidden ? Thanks.
The option isn't hidden - you just don't have any text in it:
<select class="form-control" id="service_select">
<option disabled="disabled">Place some text here</option>
</select>
If your first option is disabled (and therefore cannot be selected) Firefox will select the first non-disabled option.
<select class="form-control" id="service_select">
<option disabled="disabled">One</option>
<option disabled="disabled">Two</option>
<option>Three</option>
</select>
The first two options can be seen when you inspect the drop-down list, but cannot be selected - so "Three" would be selected in the above example.
If you want to prevent the user from selecting the first option, but want to display it - use the required attribute with an empty value...
<select required>
<option value="">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
I used the following HTML code to create a simple drop down menu. (Actully got it from this site by doing a search).
But the issue I'm having is the submit ("Go!") button works in every other browser but IE 8-9. Even works on IE 10 on a Windos Phone. CAn somebody PLEASE tell me what needs to be changed to get it working?
Thanks.
<html>
<body>
<form name="Game Results">
<select name="ddmenu_name" id="ddmenu_name" style="width: 40% !important;">
<option value="" selected>Select Game</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=60&Itemid=82">Week 1</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=61&Itemid=82">Week 2</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=62&Itemid=82">Week 3</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=63&Itemid=82">Week 4</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=64&Itemid=82">Week 5</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=65&Itemid=82">Week 6</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=66&Itemid=82">Week 7</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=67&Itemid=82">Week 8</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=68&Itemid=82">Week 9</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=69&Itemid=82">Week 10</option>
<option value="http://thealamedapirates.org/index.php?option=com_content&view=article&id=70&Itemid=82">Las Vegas</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>
Being able to refer to an id directly in script was an old IE hack that is not standard, you should use document.getElementById instead.
Change:
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
To:
<input type="button" name="Submit" value="Go!" onClick="window.open(document.getElementById('ddmenu_name').value,'newtab')">
Also, IE (at least IE8) doesn't support an equal sign in a window name (this will result in a script error), so you'll have to find something safer to use - such as the index of the selected value:
<input type="button" name="Submit" value="Go!" onClick="window.open(document.getElementById('ddmenu_name').value, 'NewTab_' + document.getElementById('ddmenu_name').selectedIndex)">
I'm not sure if this is an IE thing or a standard browser thing.
Working Fiddle