I am building an advanced searching operator for my app. I am trying to get the parameters of the search to persist through the search. My problem is that I have <select> tags so I can't just pass the value through.
<select name="sort" value="{{inputs.sort}}">
<option value="None" >None</option>
<option value="NAME">Alphabetical</option>
<option value="RATING">Rating</option>
<option value="RELEVANCE">Relevance</option>
</select>
the value attr doesn't work with the select tag. The only way I've found to do this is by putting the selected attr inside of the option tags <option selected="selected">...<option>, but there is no simple way to do this with handlebars.
helpers don't work because I am only using backend handlebars which doesn't allow ternaries. Apart from completely generating the HTML from the backend I can't find a way to do this but I feel like there has to be a "clean" or "dry" solution.
Related
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
I have a long list (of an undetermined length, that can keep on growing) of values. For example:
<select>
<option value="1">1, some test</option>
<option value="2">2, some text</option>
<option value="3">3, some text</option>
<option value="4">4, some text</option>
<option ...... add 100 more options> ..
</select>
What would be the best practice/user friendly way to support such a long list? I imagine that a user might find it frustrating to scroll through a super long list.
I am trying to minimize the user's scroll time, by presenting the most recent values at the top of the drop down, but if she/he would like to go to the first element in the drop down it would require a lot of scrolling.
Thanks
Instead of using <select>, how about changing it to HTML5 <datalist>, which is like this:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
By the way, you can type the first letter using the <select>, so my suggestion will be sort your data according to the first letter. Because it will help the user to go to the sub-option directly.
Maybe add a searchfield to the dropdown?
Something like this: http://jsearchdropdown.sourceforge.net/
What kind of data would you like to display ? Maybe there is another way than select to display them ? In fact, for dozens of items, select is not the best choice, unless you use by example a JQuery plugin like jsearchdropdown and in this case the user must know what he's looking for.
I'm trying to build a custom multi select form input () so that I can send an array of items through a form. The format of the data needs to be native to rails, like:
item[tags][]=1,5,7
Normally I would do this by coding:
<select multiple="multiple" name="item[tags][]">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
But as I mentioned earlier, this information needs to be hidden because I am customizing the look of the control. Any ideas how I could pass data in this way using angular?
(please let me know if my explanation is clear enough)
I'm trying to create auto responder message templates with respect the the subject the visitor chooses. I checked formmail and I found how it's done as in setting up templates to be picked up from fmtemplate directory.
http://www.tectite.com/fmhowto/autorespond.php
However, before the auto-responder sends anything, I'd need to check the "Subject" selection and send the appropriate auto-responder template.
The way I think it should be done is as follows. Have the values of the select tag set like the following.
<select name="subject" id="subject" class="subject_category"">
<option value="first_option">First Option</option>
<option value="second_option">Second Option</option>
<option value="third_option">Third Option</option>
<option value="fourth_option">Fourth Option</option>
</select>
And some how have the following hidden tag instructed by formmail
to replace the file name of the autorespond HTML into the option chosen by the user.
Is there a way to embed javascript in place of arhtml.html file so it reads off the select option and constructs a html name accordingly?
I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>