Hy I have t his script:
<script>
function get(obj) {
return document.getElementById(obj);
}
function getCrer(sel) {
var value = get(sel).options[get(sel).selectedIndex].value;
get('cbt').value=value;
}
</script>
<select id="combo1" onchange="getCrer(this)">
<option value="">Select</option>
<option value=0>Text1</option>
<option value=5>Text2</option>
<option value=9>Text3</option>
</select>
<input name="cbt" type="text" id="cbt"/>
I like to work in facebook so when I select from the list the calue shoul go to the input text cbt...but not working in fb. why?
When your onchange event fires, it's passing in the Select Object to getCrer, not the Object's ID, so your get method will return null. Try this instead:
function getCrer(sel) {
var value = sel.options[sel.selectedIndex].value;
get('cbt').value=value;
}
Related
I have a drop down list
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
On clicking an option i want to display the details of the particular option in the same page.
How can this be implemented using jquery?
function showval(value)
{
var text = $("#column_select option:selected").text();
var string = "Value is: "+value+" and Text is: "+text;
$("#showvalue").html(string);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showvalue">
</div>
<select name="column_select" id="column_select" onchange="showval(this.value);">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
It should help you.
use this jquery
jquery
$('select.column_select').on('change', function(){
var selectVal = $(this).val();
if(selectVal==col1){
// do something
};
if(selectVal==col2){
// do something
};
if(selectVal==col3){
// do something
};
});
You can subscribe to the change event for the select and perform the details display based on the current value in the select:
$("#column_select").on("change", function () {
var value = $(this).val();
// logic based on selected value
});
try this...
$(document).on('change','#column_select',function() {
// Code to write it anywhere on page.
// If you want it to write on `span#spnDisplay` then use this
var selText = $('#column_select option:selected').text();
$('#spnDisplay').text(selText)
});
So, this is what I am trying to do.. I want a dropdown in HTML with a submit button that changes based on the value of the dropdown.
So, when I have this:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
...
</select>
What I need is a button that checks what the value is. If value = 20x30 then use URL www.example.com/20x30
If value is 30x30 then use URL www.example.com/30x30
I am far from a PHP expert, so anyone that is able to set me off in the right direction would be a life saver :)
some simple Javascript would suffice:
<form id="FORM_ID" action="DEFAULT_ACTION">
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
</form>
<script type="text/javascript">
document.getElementById('select13').onchange = function(){
document.getElementById('FORM_ID').action = '/'+this.value;
}
</script>
You might try this:
Javascript:
function goto() {
window.location = "http://www.example.com/"+document.getElementById('select13').value;
}
HTML:
<select name="sizes" id="select13">
<option value="All">All</option>
<option value="20x30">20x30</option>
<option value="30x30">30x30</option>
</select>
<button onclick='goto()'>Go</button>
When you click on the 'GO' button it redirects to example.com/(the selected value).
Here's a JSFiddle with an exmaple.
EDIT to fit your comment:
function goto() {
var selection = document.getElementById('select13').value;
if (selection != 'All') {
//window.location = "http://www.example.com/"+selection;
alert("http://www.example.com/" + selection);
} else {
alert("Error: You must pick something");
}
}
Also, if you want to submit a form and then do the redirection. The PHP code would be as follows:
<?php
//Process your form without echoing anything before the header function.
if($_REQUEST['sizes'] != 'All'){
header('location:http://example.com/'.$_REQUEST['sizes']);
}
else{
header('location:http://example.com/form.php');
}
You'll need an onchange event for your dropdown:
document.getElementById("select13").onchange = function() {
var currentVal = this.value;
if (currentVal == "20x30") {
//do stuff
}
}
I'm not sure why this isn't working. Anyone care to take a stab?
I have a form with the below. When the user selects the "disabled" option in #frmcomments, I'd like #frmstatus to change to the option value of private.
<label for="type">Comments:</label>
<select class="sort-select" id="frmcomments" name="frmcomments">
<option value="enabled">Allow Comments</option>
<option value="disabled">No Comments</option>
</select>
<label for="type">Status:</label>
<select class="sort-select" id="frmstatus" name="frmstatus">
<option value="public">Anyone can see</option>
<option value="private">Only I can see</option>
</select>
I'm using the following jquery, but it's failing?
$('#frmcomments').change(function() {
var thistype = $(this).find(":selected").val();
if(thistype=="disabled") {
$("#frmstatus").val("private");
}
return false;
});
Check your thistype value. You should be able to call val() on the select and you shouldn't have to call .find(":selected") to get the selected list item.
$('#frmcomments').change(function() {
var thistype = $(this).val();
if(thistype=="disabled") {
$("#frmstatus").val("private").change();
}
return false;
});
var thistype = $(this).find(":selected").val();
try this
var thistype = $(this).val();
I have a form in html that contains a drop down menu like so
<form name= "gadget_selector">
<select name= "gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
And I want to access the value of the selected option in a javascript function like so
function someFunction(){
//var option = value of selected menu option
}
How would I do this?
var option = document.getElementById('gadget').value;
Set gadget as the id for the select as well, like this:
<select id="gadget" name="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
assign id to select box "gadget":
<select name= "gadget" id="gadget">
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
Now get selected value in javascript like below :
function GetSelectedItem() {
var option = document.getElementById('gadget').value;
}
Include an id attribute to select element and do as below, i am sure i will work,
var obj = document.getElementById("gadget");
alert(obj.value); // returns selected option value (1st method)
var selectedOption = obj.options[obj.selectedIndex]; // returns selected option element
alert(selectedOption.value); // return selected option value (2nd method)
example : http://jsfiddle.net/zUBpz/
First, assign an id to your <select> tag.
<select id='gadget' name= "gadget">
Then, get its value
if (document.getElementById('gadget')) {
var val = document.getElementById('gadget').value;
alert(val);
}
You can access by id, like this:=
<form name= "gadget_selector" >
<select name= "gadget" id='sel'>
<option value = 0> Something </option>
<option value = 1> Something else </option>
//etc..
</select>
</form>
function getvalue(){
if(document.getElementById('sel'))
{
alert(document.getElementById('sel').value);
var option = document.getElementById('sel').value;
}
}
here forms[0] is the form number starting from 0 from top to bottom of page
function someFunction(){
var option = window.document.forms[0].gadget.value;
}
Old question, but maybe other people get here like me so I'll add my solution:
The cleanest approach would be to have a reference to the select field, have the select backed by a model and add a watcher like this:
<script>
export default {
name: 'MyComponent',
data() {
return {
myValueName: 123
};
},
watch: {
myValueName() {
//
// Will log "Value: 123" and "Value: 456" instead of
// "123" and "456".
//
console.log(this.$refs['mySelectRef'].selectedOptions[0].text);
}
}
}
</script>
<template>
<select ref="mySelectRef" v-model="myValueName">
<option :value="123">Value: 123</option>
<option :value="456">Value: 456</option>
</select>
</template>
<style>
</style>
I want to add this functionality to my form. when a option from a dropdown menu is selected i want it to input the text field above with the corresponding info. For example:
<form name="form1" action="formhandler">
<input type="text" name="typecar">
<select name="BMWCars">
<option value="Sedan">Sedan</option> // when this option is chosen put string "5-series" in textfield above
<option value="Convertible">Convertible</option> // when this option is chosen put string "6-series" in textfield above
<option value="Truck">Truck</option> // when this option is chosen put string "X5" in textfield above
<option value="Coupe">Coupe</option> // when this option is chosen put string "3-series" in textfield above
<option value="Hatchback">Hatchback</option> // when this option is chosen put string "5-series GT" in textfield above
</select>
</form>
How can this be done with and without having to connect to the to get strings?
The code is tidier if you make your HTML conform to what you need.
http://jsfiddle.net/TgM2W/3/
<form name="form1" id="form1" action="formhandler">
<input type="text" name="typecar" id="typecar">
<select name="BMWCars" id="BMWCars">
<option value="">Select one...</option>
<option value="5-series">Sedan</option>
<option value="6-series">Convertibles</option>
<option value="X5">Truck</option>
<option value="3-series">Coupe</option>
<option value="5-series GT">Hatchback</option>
</select>
</form>
JavaScript (without jQuery):
window.onload = function() {
document.forms['form1'].elements['BMWCars'].onchange = function() {
var opts = this.options;
document.forms['form1'].elements['typecar'].value = opts[opts.selectedIndex].value;
};
};
or using jQuery:
$(document).ready(function() {
$('#BMWCars').change(function() {
var opts = $(this)[0].options;
$('#typecar').val(opts[opts.selectedIndex].value);
});
});
However, if you can't change the HTML, just use an object to store the values and reference that:
objBMW = {
"Sedan":"5-series",
"Convertible":"6-series",
"Truck":"X5",
"Coupe":"3-series",
"Hatchback":"5-series GT"
};
window.onload = function() {
document.forms['form1'].elements['BMWCars'].onchange = changer;
};
function changer() {
var opts = this.options;
document.forms['form1'].elements['typecar'].value =objBMW[opts[opts.selectedIndex].value];
};
Jan. This is what you have to do:
Add identifier to all your referenced items in the HTML.
Write an small Javascript code to detect changes in the dropdown and update the textfield accordly.
<form name="form1" action="formhandler">
<input type="text" name="typecar" id="typecar" />
<select name="BMWCars" id="dropdown">
<option value="5-series">Sedan</option>
<option value="6-series">Convertible</option>
<option value="X5">Truck</option>
<option value="3-series">Coupe</option>
<option value="5-series GT">Hatchback</option>
</select>
</form>
<script type="text/javascript">
var dropdown = document.getElementById( 'dropdown' );
dropdown.onchange = function() {
document.getElementById( 'typecar' ).value = dropdown.value;
};
</script>
You're going to want to do it in jQuery (or javascript).
$("option").change(function() {
var value;
//Do some logic to get the value you want to put in the textbox
$("input[name='typecar']").val(value);
});
Depending on the complexity of your site, there's a couple different ways you can grab the value to put in your textbox. If it will only ever be those 5 options, I would suggest a switch...case. Like this:
$("option".change(function() {
var value;
switch($(this).val()) {
case "Sedan":
value = "5-series";
break;
case "Convertible":
value = "6-series";
break;
case "Truck":
value = "X5";
break;
case "Coupe":
value = "3-series";
break;
case "Hatchback":
value = "5-series GT";
break;
}
$("input[name='typecar']").val(value);
});
$('select').change(function() {
var value = $(this).val();
$("#typecar").val(value);
});
Should do it. Add an ID of typecar to your input field first however.