I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}
You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/
Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});
Related
does anyone know if there is a way to make a dropdown menu that when an option is chosen it then turns that option into a button using html or is that only possible in php or is it not possible at all
You will have to learn javascript to be able to do that, there is an event fired called onselect, when you bind to that event with javascript using addEventListener you will be able to read the .value of the <select> field and then create a button using the createElement method.
Try this with jQuery
<script>
$(document).ready(function(){
var sel_html = $('#element_place').html();
$('#select_button').change(function(){
var sel_option = $('#select_button').val();
$('#select_button').remove();
new_ele = $('<input>').attr('type','button').attr('value',sel_option);
$('#element_place').append(new_ele);
});
});
</script>
<div id="element_place">
<select id="select_button">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can use this its working
Html
<input type="button" id="conv_but" value="" style="display:none">
<select name="data_select" id="data_select" onchange="converttobutton(this.value);">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
Javascript
<script type="text/javascript">
function converttobutton(selected)
{
document.getElementById('conv_but').value = selected;
document.getElementById('data_select').style.display = 'none';
document.getElementById('conv_but').style.display = '';
}
</script>
I think you need change() event handler . Create a function inside the change() event for creating the button
$("ID of the dropdownbox").change (function () {
//code for creating button(this.value) give the selected option
var $something= $('<input/>').attr({ type: 'button',
name:'btn1', value:this.value});
//append this variable inside a div having ID `button_div`
$("#button_div").append($something);
});
I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.
HTML:
<form action='quickLook.py' method = 'post'>
First DropDown Menu
Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option id='Top' value = 'Top' >Top
<option id='Bottom' value = 'Bottom' >Bottom
</select>
Second DropDown Menu
<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option id='Interferogram' value = 'Interferogram'>Interferogram
<option id='SNR' value = 'SNR'>SNR
<option id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>
<input type='submit' value= 'Query Images'>
</form>
I'd like to do something like this is JQuery:
$("#Dual").click(function() {
$("#target").append("#Diff_Band");
$("#target").remove("#Interferogram");
$("#target").remove("#SNR");
});
$("#Top").click(function() {
$("#target").append("#Interferogram");
$("#target").append("#SNR");
$("#Diff_Band").remove();
});
I want to append or remove the already written html.
What is the best way to do this?
Thank you for your time!
This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/
If I have this code:
<select onchange="alert('?');" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
</select>
How can I get the value '-1' from the custom attribute isred ?
I don't want to use the value property.
And I dont want to target the option tag by a name or id.
I want something like onchange="alert(this.getselectedoptionID.getAttribute('isred'));"
Can anyone help?
Also I don't want to use jquery.
You need to figure out what the selectedIndex is, then getAttribute from that options[] Array.
<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
<option isred="-5" value="hi">click</option>
</select>
jsFiddle DEMO
As a side note:
Don't use inline javascript in your HTML. You want to separate your business logic from your UI. Create a javascript event handlers instead to handle this. (jQuery / Angular / etc)
in jquery, you can just write:
$("#myname").find(':selected').attr('isred');
Use something like this:
document.getElementById("x").onchange = function () {
console.log(this.options[this.selectedIndex].getAttribute("isred"));
};
//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.
// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {
//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :)
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}
<select id="name_your_id" name="myname" class="myclass">
<option isred="423423" value="hi">One</option>
<option isred="-1" value="hi">Two</option>
</select>
Assuming we have a HTML markup as below:
<form id="frm_">
<select name="Veh">
<option value='-1' selected='selected'>Select</option>
<option value='0' ren='x'>xxx</option>
<option value='1' ren='y'>yyy</option>
</select>
</form>
The attr "ren" can be accessed like this:
function getRep() {
var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
.elements['Veh'].selectedIndex].getAttribute('ren');
console.log("Val of ren " + ren); //x or y
}
Demo
You use: .getAttribute('isred')
You want:
<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
<option isred="-1" value="hi">click</option>
<option isred="-1" value="ho">click</option>
</select>
you can
$(".myclass").val(function(){alert($("option",this).attr("isred"));})
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
Hi i need to pass the selected value immediately on inside of this select tag so pls some one help me
Not that I agree with how you're doing things here (in side the tag), technically it is possible to do what you ask by the following:
<form>
<SELECT NAME="sel" onChange="split(this.value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
You cannot pass the value directly to the handler but you can get the values in it, I'd recommend to do this in code and not use inline event handlers:
var select = document.forms[0].sel;
select.onchange = function(){
var value = select.options[select.selectedIndex].value; // to get Value
var text = select.options[select.selectedIndex].text; // to get Text
}
Here's a working example:
http://jsfiddle.net/c2SrV/
<html>
<head>
<script>
function split(value)
{
alert(value);
}
</script>
</head>
<body>
<form>
<SELECT NAME="sel" onChange="split(value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<body>
</html>
use "value". hope this was helpful
this.options[this.selectedIndex].value
*assuming you want to put it inline inside the onchange attribute
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.