As far as I know, ios Chrome is the only browser where my datalist is doing this. Any other browser or device combination seems to work. I know there used to be support issues for datalists but not seeing anything recent that explains the issue I am having. The datalist only does this when the input box receives focus.
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option>S</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>Aggron</option>
<option>E</option>
<option>F</option>
</datalist>
</div>
IOS requires the value property
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option value="S">S</option>
...
</datalist>
</div>
Related
When focus is in input text, how to make tab key to move focus to options drop-down?
In the example below, type "f", you have two options then press tab, it jumps to button after. How to make this that the focus jumps into options drop-down.
I know up / down keys do that.
I added tabindex, as I got suggestion but without success.
<form>
<input type="text" list="browsers" autocomplete="on" placeholder="Search ...">
<datalist id="browsers">
<option value="Firefox" tabindex="1">
Firefox
</option>
<option value="Internet" tabindex="2">
Internet
</option>
<option value="Chrome" tabindex="3">
Chrome
</option>
<option value="Safari" tabindex="4">
Safari
</option>
</datalist>
<button type="submit">Push me</button>
</form>
I copied a code where it works good in mozilla but, when i go to chrome it doesn't work correctly. I have this in mozilla, where it works like it is an input type where when you type the start letter, the select box will show something like it suggest.
Here is the code :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" id="labelcheck-up" for="fname">Diagnosis:</label>
<div class="col-sm-2">
<select name="tdiagnosis[]" id="tdiagnosis" class="form-control select2" multiple="multiple" data-placeholder="Please input diagnosis here">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Goat">Goat</option>
</select>
</div>
</div>
</form>
Here is jsfiddle link:
https://jsfiddle.net/DTcHh/40338/
Any suggestions how to make this work in google chrome? Thanks.
I'm trying to implement a datalist element with a built-in fallback for older browsers, as demonstrated on the w3 datalist element spec:
<form action="http://example.com/" method="GET">
<label>
Sex:
<input name="sex" list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select name="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="submit" />
</form>
However, the combination of an <input type="text"> and the datalist both with the same name (required for the fallback) cause the "sex" parameter to appear twice in the query string.
Form submit didn't work in SO code snippet, so see this fiddle instead. When submitting "Male" the network tabs shows a request on submit that says http://www.example.com/?sex=male&sex=.
This causes some wonky behavior in the backend code (that I can't modify right now unfortunately). How can I prevent the double parameter while keeping a fallback?
I ended up solving it by setting a single <input type="hidden"> with the "sex" value instead of using the select and input type="text" as a source for the value. On change of either of the latter, I copy the value to the hidden input.
I happened to have jQuery already included so here's the solution I used:
$('#myForm input, #myForm select').change(function() {
$('#sex').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.example.com/" method="GET" id="myForm">
<label>
Sex:
<input list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select>
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="hidden" name="sex" id="sex" />
<input type="submit" />
</form>
I'm still open to better solutions.
I don't know if you're still looking for a solution or if my answer even supports older browser, but it was exactly what I was looking for.
I used selectize.
$('#sex').selectize({create: true});
<select id="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
I have a very simple HTML5 page:
<form>
<fieldset>
<label for="cmb_unit">Unit:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
<label for="text_description">Click here and enter 1:</label>
<br>
<textarea id="text_description" name="text_description"></textarea>
</fieldset>
</form>
(or it can be tested online here: http://jsfiddle.net/4qaxR/3/)
The problem is when I select an item from the first control ("Firefox", for example) and enter a number "1" in the next control then this textarea control displays data from "browsers" datalist. Even more, if I click on something from the list then the browser page crashes immediately (it's Chrome "35.0.1916.153 m").
Is it something wrong here?
Yes it seems to be the issue with the browser, It is a chrome browser bug. They have fixed it in their beta release version 36, you will need to download from here https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula this will update your browser and the site will work smoothly...!!!
This issue had cost me 4 months of research on this issue...
Cheers..
I have the following HTML form in my HTML page. The problem is that the submit button is not responding (I cannot click on it.) I discovered that this problem happens only if the dropdown is present inside the form. If I comment out the dropdown (#jobtype) it works fine. Can any one please tell what is wrong here?
<form action="register.php" name="form1" method="post" onSubmit="validate()" >
<select id="jobtype">
<option value="" disabled selected>--Select-- </option>
<option value="11" >All</option>
<option value="1" >Contract</option>
<option value="2" >Full Time</option>
<option value="3" >PartTime </option>
<option value="0" >Other</option>
</select>
<input type="text" id="others" placeholder="Please specify"/>
<input type="text" name="email" placeholder="e-mail address">
<input type="submit" name="submit" title="GO" value="GO" >
</form>
I have verified your code in IE8 and it works fine for me...
the submit button functions though the drop down exists...
please check once again...