Combining input and select into one visible input field - javascript

I am new to styling html elements (e.g. input & select in this case), and I am looking to implement a visually combined input / select element. In essence the input and select would still be completely separate as form elements, but based on class and css I would like to inset the contents of the select menu into the right hand side of the input field. Sorry I am no photoshoper, so here is a representation of what it might look like:
------------------------------------------------
| Select text [v] |
------------------------------------------------
As you can see the left hand portion of the input is where you would type the string for the input element, and the select drop down is inset into the border of the input element (the [v] is supposed to be a down arrow button to drop the list). Any links to how to get stared styling something like this or suggestions are welcome.

The following example is very simple. It shows the main thing you would want to do: Since form elements are able to be styled with CSS just as everything else, it is pretty straightforward. This example still has some styling issues with non-firefox browsers, I will improve it a little.
<html>
<head>
<style>
select#selectoption {
border-left:none;
padding:none;
}
input#datahere {
position:relative;
border-right:none;
padding:none;
}
</style>
</head>
<body>
The form below is a simple example.
<form name ="explanation"action="test" method="post">
<input type="text" id="datahere" />
<select id="selectoption" /><option>test</option><option>test2</option></select>
</form>
</body>
</html>
EDIT: An online example of what you want can be seen here: http://jsfiddle.net/xFQMf/3/

The datalist element might help
(Safari doesn't support this, yet).

<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Blida">
<option value="OuledSlama">
</datalist>

use ng-select
with the [addTag] set to true.
Hope it helps someone :)

Related

Is there any way to change style properties of an input value in javascript? [duplicate]

I'd like to set text in a textarea or text input using different colors (one or the other is fine, I don't need both). Think of something like simple syntax highlighting. So, let's say I have some keywords defined. I'd like those words to be colored a different color as the user types into the textarea or text input
I understand this needs to be some combination of CSS, Javascript, and maybe some pixie dust. I wondering which direction I need to dig into to find out how this can be done.
Thank you
No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input. You'll need an editable element or document to achieve syntax highlighting. Example (works in all recent browsers; the last major browser not to support contenteditable was Firefox 2.0):
<code contenteditable="true">
<span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>
Are you finding this?
Use jQuery.colorfy
Code:
https://github.com/cheunghy/jquery.colorfy
Demo:
http://cheunghy.github.io/jquery.colorfy/
Screencast:
https://www.youtube.com/watch?v=b1Lu_qKrLZ0
This can actually be done by using styling inside of the tag, this is a reference from one of my websites where i have done this
<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
type="text"
required autofocus />

Why customized radio buttons are not getting disabled?

I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.
images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.
The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.

How do I make a drop down list selection update an image on a web page?

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.
I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?
Go easy on me guys; I've done a bit of website making before but never anything too spectacular.
The code on that site is all client-side, and is fairly simple.
You click the link, it invokes Javascript that shows the selection popup div.
When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:
The original div's label text for the amount field (i.e. the big €)
The text below that describes your currently selected currency type (the one that pops up the div)
The data in the hidden form field, with the selected currency type
...and closes the popup div.
Edit: Apparently you also need the jQuery library in order to use the code in my answer :) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.
Here is the code, ripped straight off "view source":
The amount box:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input type="text" name="Funds[goalamount]" value="" class="big-field"
tabindex="1" />
</div>
The link that opens the popup div:
<h4>Display: US Dollars</h4>
The popup div:
<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
<ul>
<li>$ USD Dollar</li>
<li>$ CAD Dollar</li>
<li>$ AUD Dollar</li>
<li>£ GBP Pound</li>
<li>€ EUR Euro</li>
</ul>
</div>
The hidden form field:
<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />
The Javascript (jQuery) code that binds it all together:
$('.currency-select').click(function() {
$('.currency-select-div').show();
return false;
});
$('.currency-item').click(function() {
$('.currency-select-div').hide();
$('.currency-display').text($(this).attr('title'));
$('.currency-select').text($(this).text());
$('#currencyfield').val($(this).attr('code'));
You're going to want to uniquely identify the text that you're trying to change with your drop-down list first.
<span id="currencySymbol">$</span>
Then you're going to want to create a drop-down list that has the values you want.
<select id="currencySelect">
<option value="$">Dollars</option>
<option value="£">Pounds</option>
<option value="€">Euros</option>
</select>
Then you need to use JavaScript to change the value of the text based on the value of the drop-down.
document.getElementById('currencySelect').onchange = function(){
document.getElementById('currencySymbol').innerHTML = this.value;
}

Change value of display:none input?

Is it possible to change the value of an <input type="text"> that has been hidden with a style of display:none? I have some JS that seems to work when the input is <input type="hidden"> but not when it's hidden with display:none. And AFAIK, you can't change an input's type with JS either.
Basically, I want to replace an <input> with a <select>, so I'm trying to hide it and append the <select> element.
Take a look at http://jsfiddle.net/5ZHbn/
Inspect the <select> element with firebug. Look at the hidden input beside it. Change the select's value. The hidden input doesn't change. Is Firebug lying to me?
If you uncomment the other lines of code, then it works.
Actually... I'm pretty sure it is a bug in Firebug now. Most other things correctly update, but firebug doesn't show the updated value when I inspect it.
I think it's a Firebug bug.
That's because if i query (via the console) the value of the input-text field it is in fact updated, it's simply that Firebug doesn't reflect the updated value in the html-tab.
In fact, using the dom-tab the new value is there, even if the actual node's value in the html-tab was not updated.
This seems to happen if you use a "normally visible" element (like an input type="text") or similar. If you, instead, use an "normally hidden" element (like an input type="hidden"), Firebug update its value normally.
I think it's a bug in Firebug, that seems to not update an element's value if it is normally visible but now hidden with css: i'm saying specifically this, because an input with type="hidden" and display:none is updated nonetheless, so it's not simply a problem of elements hidden via display:none .
Hope this helps, i'm about to issue this bug to the Firebug guys.
UPDATE: i'm using Firebug 1.8.4 on Firefox 8 on Win Srv 2K3.
Changing a field's value should work as expected, regardless of any CSS styling. The issue is likely elsewhere.
You can change it as usual:
document.getElementById( 'myinput' ).value = 'Hello';
I got this problem when customizing a magento custom option field, I made some rules from some custom select inputs and needed to save the final value to a hidden custom option text field. For some reason, it didn't work if the field was 'display:none' (maybe due some magento's js?), but it worked when I changed to "visibility: hidden;"
I know my answer is to especific, I tried to make a comment but don't have enough reputation. Hope it helps someone.
One option you have is putting the input box inside a div and then using javascript to change the contents of the div. For example:
<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>
To make changes visible, you can set the value by SetAttribute
var inputs = document.querySelectorAll('input');
var select = document.querySelector('select');
select.onchange = function () {
inputs[0].value = select.value;
inputs[1].setAttribute('value', select.value);
console.log('changed by input.value: ', inputs[0]);
console.log('changed by input.setAttribute: ', inputs[1]);
};
<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
<option>Select value</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>

Select multiple descendants with jQuery?

I have this form:
<form name="customize">
Only show results within
<select name="distance" id="slct_distance">
<option>25</option>
<option>50</option>
<option>100</option>
<option value="10000" selected="selected">Any</option>
</select> miles of zip code
<input type="text" class="text" name="zip_code" id="txt_zip_code" />
<span id="customize_validation_msg"></span>
</form>
How can I select the input and select with one jQuery selector?
I tried this but it selected all of the selects and inputs on the page:
$("form[name='customize'] select,input")
The comma in the selector string separates completely separate expressions, just like in CSS, so the selector you've given gets the select elements within the form named "customize" and all inputs on the form (as you've described). It sounds like you want something like this:
$("form[name='customize'] select, form[name='customize'] input")
or if you're not into repitition, this:
$("form[name='customize']").children("select, input")
A shorter syntax $(selector,parentselector) is also possible.
Example on this page :
// all spans
$("span").css("background-color","#ff0");
// spans below a post-text class
$("span", ".post-text").css("background-color","#f00");
Edit -- I forgot the particular case of several kind of children !
// spans and p's below a post-text class
$("span,p", ".post-text").css("background-color","#f00");
For me your suggestion worked. You could also use
form[name='customize'] select, form[name='customize'] input
Both selectors work as I see it. Maybe the the problem lies somewhere else?
I tried
$("form[name='customize'] select, input").css( 'font-size', '80px' );
on your example HTML. The font size for select and input changed.
--- edit ---
My suggestion above is the right one. It selects just the elements in the customize-form.

Categories