I am home unemployed due to COVID-19 and with a lot of spare time so I decided to see how hard could it be to modify some MyBB code and I was doing okay until now.
I am sure the answer to my question is out there but I am so lost that I don't even know how to search to fix my problem, I been searching and trying to figure it out for the past 4 hours and at this point, I just don't know what else to try.
Here is the code I want to modify.
<td class="trow2">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
That piece of code is from a MyBB template called "newthread".
The purpose of the code is to type a subject in a textbox in order to post a new thread.
But what I want to do is give the user a drop-down list to choose from instead of typing a text.
Here is the other piece of code I am trying to use without any success.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
If I copy-paste everything that I've tried so far, I will finish this post tomorrow and will make a lot of good HTML developers cringe like never before.
Any help is appreciated. Thanks.
PS: Adding the code to this post was another challenge on its own. XD
Well in my learning journey I came back here. The solution was very simple and here it is.
I replaced this part of the code:
<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
For this code:
<td class="trow2">{$prefixselect}
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Related
I am working on a form in which user needs to select the country. User can select his/her country by searching on the input field or by selecting from the dropdown.
All of the countries are shown in dropdown so I've removed them for the purpose to post minimized code.
<div class="form-group">
<label for="country">Country </label>
<input list="country" name="country">
<datalist class="form-control" id="country">
<option value="Virgin Islands (Brit)">
<option value="Virgin Islands (USA)">
<option value="Wake Island">
<option value="Wallis & Futana Is">
<option value="Yemen">
<option value="Zaire">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
</div>
An screenshot of the current state is here:
The form shouldn't have that extra input field below the Country label. The field isn't accessible.
Your code is correct.
This is using your code
Maybe there is another code that you don't know.
You can inspect element your code by press f12 button
I hope my answer can help you
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
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 HTML5 tag which is working fine but I want extra functionality in it.
<input class="form-field-short" type="number" min="1" max="5" value="0" name="someName" />
I get an input field with choices between 1 and 12.
Now I want it to allow strings along with the current choices.
For example.. 1, 2, 3, 4, 5, ABC, DEF, GHI, XYZ
Elsewhere, in my code, I have also used <select><option></option></select> but that is not what I want. I am looking for <input type="number" ....> tag with the capability of showing numbers as well as words in the choices.
One option is a numeric text input that also lists some non-numeric options (usually shown in a pulldown menu by the browser):
<input type="text" list="list" inputmode="numeric"/>
<datalist id="list">
<option value="ABC"/>
<option value="DEF"/>
<option value="GHI"/>
</datalist>
However, if the overall set of options, including numbers, is limited, then a <select> might be more appropriate, and is more widely supported:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
<option value="GHI">GHI</option>
</select>
See this fiddle.
If you're looking to provide choices for visitors, you should probably use a drop down menu like this:
<select>
<option value="1">1</option>
<option value="AABB">AABB</option>
<option value="9">9</option>
<option value="XRZ">XRZ</option>
</select>
Heres another problem...
What I want to do is target a frame to display with a dropdownbox
<p align="center"><b>Select a Site </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option></select>
<input type="button" value="Go"
onclick="window.open(setit.options[setit.selectedIndex].value)">
</p></form>
But when I try this it apperently doesnt work.
Hope somone can find a solution because its kinda enoying me right now.
EDIT:
I know that it is 'window open'
Can somone please correct it, thats why im asking the question.
please give code :D
or example
Cheers, -Geekz
Here's a jsfiddle that does what you want: http://jsfiddle.net/r5RBr/. The key is changing the src of the iframe. Below is the code from the fiddle.
<iframe height="300px" width="500px" id="iframe_a"></iframe>
<form>
<p align="center"><b>Select a Site </b>
<select onchange="document.getElementById('iframe_a').src=this.value">
<option value="">Select one</option>
<option value="http://www.altavista.com" target="iframe_a">1</option>
<option value="http://www.yahoo.com" target="iframe_a">2</option>
<option value="http://www.google.com" target="iframe_a">3</option>
</select>
<input type="button" value="Go" />
</p>
</form>