here is my code:
function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>
<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>
<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">
</form>
<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
<option id = "selectedMonth" selected="selected" value=""></option>
</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>
I used simple javascript to automatically fill the form inputs "entryDate, selectedYear, selectedMonth" by actual date and some other dates used by the further scripts.
My problem is, that when the site is loaded, only first input is automatically filled - the input with id = entryDate.
The next 2 inputs are empty. But, when I press F5 and the site is reloaded again, the 2 inputs are filled correctly.
Could you please help me fix it to have all 3 forms filled when the site is loaded for the first time...
Thank you
You are not using <select> and <option> correctly. <select> represents a dropdown, which can contain multiple <option> elements.
An <option> element represents an option in the dropdown. You close an <option> with </option>. Whatever is BETWEEN the tags will appear in the dropdown:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
On the other hand, an <option>'s value attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the <option>: the user won't see it, but it's the one that matters. Whatever is between <option> and </option> is visible by the user, but doesn't actually DO anything.
Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a selected attribute set to selected (selected="selected"). When a user chooses an option, this attribute gets set automatically (and the selected attribute on the other options gets cleared).
So first of all, let's get your selectedYear dropdown looking right. You'll need to manually provide some years as options:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
Note that you need to specify the year both between the tags AND in each <option>'s value attribute, as explained above. Also note that I moved the id to the <select>. There's rarely a reason to select an individual <option> of a <select>; typically to modify a dropdown's options, you should select the <select> tag itself.
So, let's try that. I'll re-create the dropdown above, but I'll add its options using JavaScript:
<select id="selectedYear" name="year"></select>
<script type="text/javascript">
var dropdown = document.getElementById('selectedYear');
var start_year = 2011;
var end_year = 2013;
for (var i = start_year; i <= end_year; i++) {
dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
</script>
The innerHTML function lets you set the HTML content between an element's opening tag (in this case <select id="selectedYear" name="year"> and closing tag (</select>).
Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the selected attribute of the <option> to "selected". Here's a portion of your setActualDate function, showing how to set the default year for just the selectedYear dropdown:
<script type="text/javascript>
function setActualDate() {
var d1 = new Date();
var year = d1.getFullYear();
var dropdown = document.getElementById('selectedYear');
//loop through the dropdown's options
for (var i = 0; i < dropdown.options.length; i++) {
var option = dropdown.options[i];
//check if this is the option we want to set
if (option.value == year) {
option.selected = true;
} else {
//ensure all other options are NOT selected
option.selected = false;
}
//NOTE: you can simplify the above if-else to just:
//option.selected = (option.value == year);
}
}
</script>
That should be enough to get you started. I hope it all makes sense.
Use the following HTML for month -
<!-- HTML for month -->
<select id = "selectedMonth" name="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<!-- HTML for year -->
<select id="selectedYear" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
and script
//script for setting month
var monthEl = document.getElementById('selectedMonth');
monthEl.options[m2].selected = "selected"
//for year
var yearEl = document.getElementById('selectedYear');
yearEl.options[y].selected = "selected"
You are getting the elements by their ID so the first time the script runs only fills out the first elements it finds (probably the ones in the first form).
Since you have several elements to fill out automatically, you should be setting classes to on them and use these classes to select the ones you are interested in. For example:
<form id="form1">
<input class="entryDate" type="text"> <!-- note the class=..." -->
</form>
<form id="form2">
<input class="entryDate" type="text">
<select name="mode" class="selectedMonth"> <!-- note the class=..." -->
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
</form>
Now your code should be something like this:
window.onload = function setActualDate() {
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
var entryDates = document.getElementsByClassName('entryDate');
var years = document.getElementsByClassName('selectedYear');
var months = document.getElementsByClassName('selectedMonth');
var i, j;
for (i in entryDates)
entryDates[i].value = (y + "-" + m1 + "-" + d);
for (i in months) {
for (j in months[i].options)
if (months[i].options[j].value == m1) {
months[i].options[j].selected = true;
break;
}
}
//similarly for years...
};
Here's a fiddle demonstrating it: http://jsfiddle.net/QDdAp/2/
Related
I found a custom select dropdown with button redirect code. It works with one dropdown, but I want to make two dropdown menus.
I tried adding var's for select-id2, but script stopped working and nothing happened.
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
First one (select-id1) should have domain example.com, and the second one (select-id2) should add /page on the first one. So the redirection link should be example.com/page.
Is there any way to do with this code?
You are searching for the element with id="select-id". When only select-id1 and select-id2 exists.
Try this:
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
console.log("Redirect to: "+redirect);
}
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
You are not getting a reference to the second <select> element. You just added it to your HTML, your script is unaware of it.
var selectbox2 = document.getElementById("select-id2");
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
This will make it redirect to whatever is the value of select-id2 option element
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById('select-id2');
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
You want to join split URLs together, for that, you have to concatenate the two parts and you can do it simply parsing the values on JS (as JavaScript already stores data into variables as strings, so you shouldn't have a problem with that)
The logic is pretty much like this :
var link1 = document.getElementById("select-id1").value;
var link2 = document.getElementById("select-id2").value;
var joined = link1 + link2
function siteRedirect() {
window.location.href = joined;
}
See if that helps you
Thats it! Thank you all, but especially to k3llydev!
So. The final code is :
<html>
<head>
</head>
<body>
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
/*console.log("Redirect to: "+redirect);*/
window.location.href = redirect;
}
</script>
</body>
</html>
Solved!
Currently I have a function I created that removes some options from a select menu based on a value passed from another select. I want to revert back to normal each time the function is called (add all the original options back)
HTML
<select id="Current-Tier" onchange="removetier();" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500">Diamond</option>
</select>
JS
function removetier(){
var currentTierValue = document.getElementById("Current-Tier");
var current = currentTierValue.options[currentTierValue.selectedIndex].value;
var desiredDivisionValue = document.getElementById("Desired-Tier");
for(var i=0;i<desiredDivisionValue.length;i++){
if(desiredDivisionValue[i].value < current){
desiredDivisionValue.remove(desiredDivisionValue[i]);
}
}
Update_Desired_Rank_image();
}
Have you considered adding the hidden attribute rather than deleting them?
Then the next time you receive a request, you can go through the list programmatically and remove the hidden attribute from each option.
An example of the hidden label, BTW, is
<select id="Desired-Tier" class="form-control boosting-select">
<option value="100">Bronze</option>
<option value="200">Silver</option>
<option value="300">Gold</option>
<option value="400">Platinum</option>
<option value="500" hidden>Diamond</option>
</select>
If you run it you will see that Diamond is hidden. This way you always have access to all your options.
You can easily iterate over the select input and either store the removed items in an array or leverage the hidden attribute on the option tag:
Fiddle: https://jsfiddle.net/gLwwmh82/2/
HTML
<select id="mySelect">
<option value="">Select...</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
<option value="test5">Test5</option>
<option value="test6">Test6</option>
</select>
<button id="btnRemove" onclick="remove()">Remove Half of Entries</button>
<button id="btnReset" onclick="reset()">Reset</button>
JS
function reset() {
var select = document.getElementById('mySelect');
var options = select.querySelectorAll('option');
for (var i = 0; i < options.length; i++) {
options[i].removeAttribute('hidden');
}
}
function remove() {
var select = document.getElementById('mySelect');
select.value = "";
var entries = select.querySelectorAll('option');
for (var i = 1; i < 5; i++) {
// Wrap the below line in your logic to know what to delete/not to delete
entries[i].setAttribute('hidden', true);
}
}
I have a select box and add more button. when I click add more button it's creating another select using clone.In first select box I select one option value from select box means that value should be removed from next created select box.At the same time which selected value in select box that current value shown on current select box. Select box value is being loaded dynamically.
Eg:
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
Is it what you're looking for ?
I would recommend you to play and manipulate with index(), that won't bother your dynamic values.
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
$('button').click(function(){
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value="">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Clone</button>
You can try like this.
$("#yourId").val(" ")//if your value has white spec else use like below line
$("#YourId").val("")//What ever you want to be selected, place your value in .val()
I hope this will help you, if you need anything please ask!
$("button").on("click", function() {
$("#section_1")
.clone()
.attr("id", "section_2")
.on("change", function() {
var sec2Val = $(this).val();
var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach();
optionHolder.push(delOption);
})
.insertAfter($("#section_1"));
$(this).attr("disabled", "disabled");
});
var optionHolder = [];
$("#section_1").on("change", function() {
var sec1Val = $(this).val();
if ($("#section_2")) {
var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach();
optionHolder.push(delOption);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Add more</button>
I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue();">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
function SetValue(){
var value=document.getElementById('leaveCode').value;
var name=document.getElementById('leaveCode').name;
document.getElementById('leaveCode1').value=value;
document.getElementById('leaveCode1').name=name;
}
Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.
You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file
jQuery('#leaveCode').change(function(){
//get selected text from #leaveCode list
text = jQuery("#leaveCode option:selected").text();
//get selected value for selected text
value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");
});
You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/
The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist
$("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});
I believe this is the answer you need:
$("#leaveCode").change(function(){
var selectedOptionValue = $(this).find(":selected").val();
var selectedOptionText = $(this).find(":selected").text();
var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
$("#leaveCode1 option").last().after(newOption);
});
JSFIDDLE
function SetValue(obj) {
var $this = $(obj);
var val = $this.val();
var txt = $('option:selected', $this).text();
$('#leaveCode1').append($('<option></option>').val(val).html(txt));
$('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
<select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</option>
<option value="14">Long Service</option>
<option value="17">Leave Without Pay</option>
</select>
</p>
<p>
<select id="leaveCode1" name="leaveCode">
<option value="">select value</option>
<option value="21">xyz</option>
<option value="21">abc</option>
</select>
</p>
onchange not beselected or nochange give value how to?
look my example
<select id="leave" onchange="leaveChange()">
<option value="500">Worldwide</option>
<option value="150">EMS</option>
<option value="350">DHL</option>
<option value="200">UPS</option>
<option value="75">Postal</option>
</select>
<input type="button" name="button" id="button" value="+Add" />
<script>
function leaveChange() {
var leaveValue = document.getElementById("leave").value;
var shippingItems = document.getElementById("item_ship");
if (leaveValue != ' ') // ??
shippingItems.innerHTML = leaveValue;
else
shippingItems.innerHTML = this.value;
}
</script>
<div id="item_ship"></div>
i think my question is clear. If opening the page given value is <option value="500">Worldwide</option> value is 500 how do get at div id
If you want Worldwide to be selected as an automatic option, just add this to your HTML :
<option value="500" selected>Worldwide</option>
To have the value of item_ship set to the selected value of Worldwide on page load, you could try this :
HTML
<select id="leave" onchange="leaveChange()">
<option value="500" selected>Worldwide</option>
<option value="150">EMS</option>
<option value="350">DHL</option>
<option value="200">UPS</option>
<option value="75">Postal</option>
</select>
Javascript
<script>
function setItemShip() {
var leaveValue = document.getElementById("leave");
var itemShip = document.getElementById("item_ship");
// sets the value of #item_ship to selected value
itemShip.innerHTML = leaveValue.options[leaveValue.selectedIndex].value;
}
window.onload = setItemShip;
</script>
Here's a live code example - EXAMPLE