I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/
Related
I would like to hide text if the select option is changed and the text contains 12/31/2017
document.getElementById('search-state').onchange = function() {
jQuery("h5:contains('12/31/2018')").css('display', 'none');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
<option value="chooseState">Please choose a State</option>
<option value="AK">AK - Alaska</option>
<option value="AL">AL - Alabama</option>
<option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>
Here's an answer that fixes all your typos. You were also looking for content that didn't exist in any of your heading elements (your HTML has <h5>12/31/2017</h5> but you were looking for 12/31/2018).
$('#search-state').change(function() {
$("h5:contains('12/31/2017')").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
<option value="chooseState">Please choose a State</option>
<option value="AK">AK - Alaska</option>
<option value="AL">AL - Alabama</option>
<option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>
Use $("h5").first() and replace document.getElementById with $.
Remember that you are using jQuery. $("h5").first()first() will grab the first element of the tag h5. You can also use $("h5:contains('12/31/2017')").
$('#search-state').on("change",function() {
$( "h5" ).first().css( "display", "none" );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
<option value="chooseState">Please choose a State</option>
<option value="AK">AK - Alaska</option>
<option value="AL">AL - Alabama</option>
<option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>
I do not know jQuery very well. I see you are searching for 12/31/2018 instead of 12/31/2017. This may cause your code to not work.
Here you have a pure javascript solutiuon at least. Sorry, but my jQuery-knowledge is poor.
document.getElementById("search-state").onchange = function() {
var h5Array = document.getElementsByTagName("h5");
for (var i = 0; i < h5Array.length(); i++) {
if (h5Array[i].innerHTML == "12/31/2017") {
h5Array[i].style.display = "none";
}
}
}
NOTE: You do not want to use contains when you're looking for specific text because it's considered inefficient for exact searches. Also you didn't indicate what content you want to show or hide. But toggle is a great function for merely controlling the visibility of content on your page. As you can see below, you can place a condition within your toggle function.
You could try the toggle command in jQuery:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#search-state").change(function(){
$("#answer").toggle($("h5").text()==="12/31/2017");
// if you're just trying to hide first h5
// $("h5").first().toggle($(this).text()==="12/31/2017");
});
});
</script>
<select id="search-state" name="search-state">
<option value="chooseState">Please choose a State</option>
<option value="AK">AK - Alaska</option>
<option value="AL">AL - Alabama</option>
<option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>
<p id="answer">Hide or show this text</p>
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);
});
Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.
Example:
.load('day.html #empId')
the "day" and "empid" part of .load can be changed on the user end.
[Link] [ID] submit
then it runs the rest of the script.
The part of the script I'm trying to make adjustable:
$('a').click(function() {
$('#metrics').load('day.html #empId', function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
})
});
I'm not sure if I explained it clear enough(new to jquery)
Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function.
$('a').click(function() {
var ds = $('#datasources option:selected').text();
var empId = $('#empIds option:selected').text();
$('#metrics').load(ds + '.html #' + empId, function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
});
And the HTML affected:
<div id="main">
<h1 id="metrics">Metrics</h1>
</div>
JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)
FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears
I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar
I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
$('<div id"metrics" />').load(
pD
+ wD
+ dD
+ eD, function(){
$(this).hide()
.appendTo('#main')
.slideDown(1000);
});
});
});
</script>
I then removed then .html # from the function and just added it in as a value to #empId options
<form>
<select class="dates" id="period">
<option value="p00"class="emp">Period</option>
<option value="p01">1</option>
<option value="p02">2</option>
<option value="p03">3</option>
<option value="p04">4</option>
<option value="p05">5</option>
<option value="p06">6</option>
<option value="p07">7</option>
<option value="p08">8</option>
<option value="p09">9</option>
<option value="p10">10</option>
<option value="p11">11</option>
<option value="p12">12</option>
<option value="p13">13</option>
<option value="p14">14</option>
</select>
<select class="dates" id="week">
<option Value="w00"class="emp">Week</option>
<option value="w01">1</option>
<option value="w02">2</option>
<option value="w03">3</option>
<option value="w04">4</option>
<option value="w05">5</option>
<option value="w06">6</option>
</select>
<select class="dates" id="day">
<option value="d00"class="emp">Select Day or Leave Blank for Week</option>
<option value="d01">1</option>
<option value="d02">2</option>
<option value="d03">3</option>
<option value="d04">4</option>
<option value="d05">5</option>
<option value="d06">6</option>
<option value="d07">7</option>
</select>
<select id="empId">
<option class="emp">Employee ID</option>
<option value=".html #JXS0001">John Smith</option>
</select>
Load Metrics
</form>
</div>
<div id="main">
<h1>Metrics</h1>
</div>
I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out #bloodyKnuckles
I have a select element of the form:
<select id="test" name="test">
<option value="blah">Test1</option>
<option value="blah">Test2</option>
.
<option value="blah">Testn</option>
</select>
I want to display the text "Select a test" as default.
I know the way of doing this is to set a new option
<option selected="selected">Select a test</option>
at the top. But I'm looking for some other way where I don't have to use the tag.
Is it possible through javascript (jQuery will also do)?
I've done this with a dummy entry in the past...
HTML
<select id="test" name="test">
<option value="0">Select an option...</option>
<option value="blah">Test1</option>
<option value="blah">Test2</option>
<option value="blah">Test3</option>
<option value="blah">Test4</option>
<option value="blah">Test5</option>
</select>
Javascript
$("#test").on("change", function() {
if ($(this).val() != "0") {
$("option[value=0]", this).remove();
}
});
Here's a working example on jsFiddle...
http://jsfiddle.net/97Bqr/
The "Select an option" option is removed as soon as you select something else.
Here's a plain js solution:
var selecttest = document.querySelector('#test');
selecttest.insertBefore(new Option('select a test'),selecttest.firstChild);
selecttest.selectedIndex = 0;
Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.
Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!
You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/