We Keep Coding

Change select tag to input type text

I have the following
<select id="quantity_select{$item.id}"
onchange="update_quantity({$item.id}, {$item.quantity});" name="item_quantity_select">
<option name="quantity_1">1</option>
<option name="quantity_2">2</option>
<option name="quantity_3">3</option>
.
.
.
<option name="quantity_more">10+</option>
</select>
My desired behaviour is that when the user selects the option "quantity_more", the select tag disapears and instead a <input type="text" value="{$item.quantity}" /> appears. I believe this must be done with javascript,is there an easy way to do it?

You can't change a select dropdown into an input of type text. I suggest to add an additional input field and set it's visibility to hidden / display to non and on selection of the "more" option toggle the display attribute.

Define the onchange handler for your select and based on the value input by the user, you can create an input element and append it to the required place in the DOM.
function update_quantity(id, quantity) {
var selectedOption = document.getElementById("quantity_select" + id);
if (selectedOption.value === "10+") {
selectedOption.style.display = "none";
var input = document.createElement("input");
input.value = quantity;
document.querySelector('body').appendChild(input); // If you want to append at the end of the body
}
}

Input box + select list + links

Why is this list not working?
I need to combine three things: input box + select list + links.
This is my attempt:
<input type="text" name="example" list="lemmas">
<datalist onChange="window.location.href=this.value" id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Please help me to get a combo of this three things. After using the input box to select an option of the list and pressing ENTER the list has to open the link.
Thanks.
The following select works. I only need to add an input box to it:
<select onChange="window.location.href=this.value">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</select>

This is my first time reading about <datalist/> tag. It doesn't seem to have good browser support.
Anyways... you can attach an oninput event handler to your <input/> field. I don't like using event attributes, so I am attaching the event in the JavaScript.
example.oninput = function () {
window.location.href = this.value;
}
<input type="text" name="example" id="example" list="lemmas">
<datalist id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Side-remark - you should probably add logic to verify that the value is a URL though...

The code below should work accurately. Check the jsFiddle. I added an id="autocomplete" to the input field, jQuery checks when ENTER key is pressed in the field and based on that it redirects the page.
Revised answer with ENTER key press event:
$(function(){
// check for key press event
$('#autocomplete').keypress(function (e) {
var key = e.which;
var url = $(this).val();
// the enter key code
if(key == 13) {
if (url) { window.location = url; }
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="autocomplete" name="example" list="lemmas">
<datalist id="lemmas">
<option value="http://pastebin.com/embed_iframe/37CVfR9Z">A</option>
<option value="http://pastebin.com/embed_iframe/1kJWwbnz">a day</option>
</datalist>
Alternately you could also use on input change (without ENTER key press):
$('#autocomplete').on('input', function(e) {
var url = $(this).val();
if (url) { window.location = url; }
return false;
});

jQuery merging select field and text input values in real time to another text field

I have a three field form. I'd like the third field (text box) to display a combination of the first two fields ... one being a select field and the other being a text field; these values separated with a space. I have tried the following with little success.
<form>
<select name="val1" id="val1">
<option value="">Select a value</option>
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input name="val2" id="val2" />
<input name="val3" id="val3" />
</form>
<script>
$('#val1, #val2').keyup(function(){ $('#val3').val($('#val1').val()+' '+$('#val2').val()); });
<script>
What I'm expecting is when a user selects an option from the select field, is value would appear in the third form field and when a user types something in the second field, its value would also appear in the third field separated with a space. This would all happen in real time. Oddly enough, the jQuery code does nothing in all browsers.
Maybe something to do with the keyup() function as a select field is using the mouse only. But even if I ignore the select field and type something in the second field, it should appear in the third field alone, but it doesn't.

Your #val1 is a select element, the keyup event can't be called with that.
Instead, you neeed to use change event.
$('#val1').change(function () {
changeThird();
});
$('#val2').keyup(function () {
changeThird();
});
function changeThird() {
$('#val3').val($('#val1').val() + ' ' + $('#val2').val());
}
JsFiddle: http://jsfiddle.net/ghorg12110/e7ru9jao/
For asp:TextBox, you need to use .attr() if you want to get the data generated:
$('#val1').change(function () {
changeThird();
});
$('#val2').keyup(function () {
changeThird();
});
function changeThird() {
$('#val3').attr("value", $('#val1').val() + ' ' + $('#val2').val());
}

Select Drop down Form Validation (Display text)

I am trying to validate a form.
What I am trying to do is validate the form by validating the Option display text not the option value, since the option values are int
Example:
<option value="selectcard">Please select</option>
If user clicks submit the form should validate if the option display says Please Select
regardless of what the option value is.
Code which is not working
function fun(){
$('#cardtype').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Please select") {
$('.showotherpDescription').show();
} else {
}
});
}
Not working: http://jsfiddle.net/f5hxpo7g/2/
Also including the regular working example for validating the form based on option value
Validates Based on option value http://jsfiddle.net/f5hxpo7g/1/
Please let me know what i am doing wrong.
Thanks in advance.

Your function should be like this:
function fun()
{
var ddl = document.getElementById("cardtype");
var valor = ddl.options[ddl.selectedIndex].text;
if (valor == "--- Please select ---")
{
alert("Please select a card type");
}
}
Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

I fixed it, you should use this JS:
$(function () {
$('#subbutton').click(function () {
if ($('#cardtype option:selected').text() === "Please select")
{
alert("PLEASE SELECT");
}
});
});
And remove onclick="..." from the button, you don't need it. Also add id="subbutton.
Here's the working JSFiddle.

I checked out the jsfiddle you referenced and modified it slightly to make it work, you can see it here.
The issue with the code you provided is, IMO:
An issue with the purpose of your function (validation) and the event you're subscribing the code to (the combo selection changed event)
The way you're obtaining the text from the currently selected option, you should create the selector based on the element that contains the options, otherwise, if you have more than 1 combo in your page, you will get lots of values (one for each selected option).
Check out the code in the jsfiddle i provided and let me know if you need more information.
For reference, here is the code i used:
HTML:
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<input type="button" onclick="fun()" value="click here">
JS:
function fun(){
var cmb = document.getElementById('cardtype');
var sel = cmb.options[cmb.selectedIndex].text;
if (sel == "--- Please select ---") {
alert('Please select a different option');
//$('.showotherpDescription').show();
} else {
}
}
}

Check in javascript in the select

How can i check the select items in javascript / jQuery.
I want check in javascript. When you clicked on value limburg and brabant. But how can i select in javascript this options?
I have this code:
<form action="/" method="post" class="clearfix">
<fieldset class="clearfix">
<div class="field">
<select>
<option value="" selected="selected">Kies een regio?</option>
<option value="Limburg">Limburg</option>
<option value="Brabant">Brabant</option>
</select>
</div><!-- /field -->
</fieldset>
</form>

You'll want to bind the change event to the select box and put your filtering in there, it would be best to assign an id or class to the select element so it can be specifically selected but the following code should alert to the screen when either of these options are selected.
$(".field select").change(function() {
if($(this).val() === "Brabant") {
//Brabant was selected
alert("Brabant");
}
if($(this).val() === "Limburg") {
//Limburg was selected
alert("Limburg");
}
});
If you just want to know what the current value of the selected element to you can do
var selecteditem = $("select").val();
if(selecteditem === "Limburg" || selecteditem === "Brabant") {
alert("'Limburg' or 'Brabant'");
}
However this will not automatically trigger anything when the value is changed, to do that, this could be for validation purposes that you would do this to check that it is one of the two.

Assuming I've understood you correctly, you want to check the value of the selected option. You can do that by simply checking the value of the select element. With jQuery, that's as simple as:
$("select").val();
You probably want to bind an event handler to the change event so you can check the value when it changes:
$("select").change(function() {
if(this.value === "Limburg") {
//Limburg was selected
}
});
Here's a working example of that.

Not sure if i understood your question, but to change the selected value, you can do something like
$('select').val('Limburg'); // to select limburg