JavaScript - Auto Select Current Day/month In A Dropdown

Hi all,

I am newbie to JS. I have the below task. Please advise.

I have a result set of a query being displayed on a page. (5000+ rows).

I have to provide a search capability, a search box which will enable to enter a position ID number and the entered position ID by the user should be selected from the results in a different color.

Can you please help me with the above. Thanks in advance

Let say I typed the word "Red", on input type text, is it possible with Ajax or Javascript to auto focus (highlight) the word "Red" on the select drop down list.
I am looking at the net, but I can't find a code that does that.



<input type="text" />

<select name="">
<option> Blue </option>
<option> Red </option>
<option> Green </option>
</select>

When first loading the page, I want the default select box value to be showing, and change when they select a different value.

It works perfect when I select any value, but it's blank on load. I've attached screenshots showing. How can I get it default selected to show "Please Select a Character Class to view more information."

Code:

<script type = "text/javascript">
function showDetails(which) {
var d = document.getElementById("classDescription");
var s = which.value;
if (s == "Enchantress") {d.innerHTML = "<b>Enchantress</b><br />This character is a magic user. You are weak with attacks, but powerful with magic."}
if (s == "Knight") {d.innerHTML = "<b>Knight</b><br />This character is a physical user. You are powerful with attacks, but weak against magic."}
if (s == "Archer") {d.innerHTML = "<b>Archer</b><br />This character is a unique user. You can attack twice, but can't equip shields."}
if (s == "Thief") {d.innerHTML = "<b>Thief</b><br />This character lurks in the shadows. He is crafty, weak attacks, decent magic."}
if (s == "") {d.innerHTML = "Please Select a Character Class to view more information."}
}

</script>

Code:

<select name="Character_Class" id="CharClass" onchange="showDetails(this)">
                                                       <option value="" selected="selected">Choose a Class</option>
                                                       <option value="Enchantress">Enchantress</option>
                                                         <option value="Knight">Knight</option>
                                                           <option value="Archer">Archer</option>
                                                             <option value="Thief">Thief</option>
                                                       </select>

Code:

<li><div id="classDescription"></div></li>

I hope someone can help me. I am having a problem with a dropdown selection box. I think Javascript is the way to solve it, but I am unfamiliar with the language, any help would be much appreciated.

My drop down box selection box is created dynamically with data from a mysql database.

It is a list of artists/musicians. I have 1 column in the db table called artist_name and another called artist_id. The sql query selects both of these columns and displays artist names in the select box.

What I need is for the artist_id to be sent along with whichever artist is selected in the select box to the next page upon submitting the form.

I put in a input field, which I will make hidden eventually. But I want the input field to change to whatever the correct id is when the select box is changed.

I am thinking that the way to do this would be with a javascript onchange event. Will this work ?

If so I need help with the code. I have searched for examples online and while somewhat helpful, I am such a newbie with Javascript that I could not figure out how to modify the examples to what I need.

Here is the php/mysql code I have so far:

PHP Code:
$query4 = "SELECT artist_id,artist_name FROM artists ORDER BY artist_name";      
$result4 = mysql_query($query4) or die(mysql_error());

echo "<select name='artist'>
     <option value=''>Select Artist</option>";
     while($row=mysql_fetch_array($result4))
       {
        $artist_id=$row['artist_id'];
            echo "<option value='". $row['artist_name'] ."'>". $row['artist_name'] ."</option>";
        }
echo "</select>
     <input type='text' name='artist_id' id='artist_id' size='5' class='textfield' value='$artist_id'>"; 

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!

I have a function that creates a Select dropdown on the fly:


function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}
function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}




I would guess that I have to add something like: theOption.setAttribute("value","1");


I want to be able to call the following function and execute a code base on the selection of the Select Dropdown:


<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>
<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>



I don't know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute("value","1");

I call the TitleOnChange function myselect.onchange=TitleOnChange;

And Finally I indicate that if the value is equal to 1 do...

view plaincopy to clipboardprint?
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}



Does anyone knows why this doesn't work and how could I fix it?

Any helpt would be highly appreciate.

Thanks

Ok so let's say I have this dropdown with a list of these items:

PALCO
TRIBUNA
ORO

And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how?

Thanks for any help in the subject.

I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using.

Code:

function cboSourceChange(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub1Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub2Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub3Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.

hey guys
The first dropdown has some options as :
abc(a)
bcd(a)
cde(b)
def(b)
efg(c)
fgh(c)
The second dropdown has :
a
b
c
On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance.

How can I change the day when the user select a month?
When they select Feb ->29 days, select May -> 31 days.

Like what facebook does.

Hello, and thanks for a great forum

I have downloaded a script called Display time of last visit.

Since I live in Norway, so the date is on the wrong line. It's November 18, but I want the date to be before the month if ya know what I mean. Is there anyone out there who can be so kind and help me change the script so that it is correct? I've tried, but .....

this is what it says now:

Thursday, November 18, 2010 09:59:28 AM I want it to be (is it is possibe to remove AM ?)
Thursday, 18, November 2010 09:59:28 AM



Sincerely, from Norway

Jon
isprinsessa.com

I want to be able to pass in any given date and return the week of month that it lies within. Weeks will start on Monday. Also if Day 1 and 2 are saturday and Sunday, those should be labeled as week 1. Any Ideas?

I made a javascript clock with a 12 hour clock, am, pm, month, day, and year.

The month is represented by a number. It's march 31st at the time I post this. Instead of giving me a 3 for march, I'm getting a 2.

here my .js I don't know if it's relevant but I'm using an external file.

function startTime()
{
var now = new Date();
var h=now.getHours();
var min=now.getMinutes();
var s=now.getSeconds();
var ampm=(now.getHours()>11)?"PM":"AM";
if (h>12) h-=12;
if (h==0) h=12

var y=now.getFullYear()
var mon=now.getMonth()
var dm=now.getDate()
if (dm<10) dm="0"+dm

document.getElementById("txt").innerHTML=h+":"+min+":"+s+""+ampm+" "+mon+" "+dm+" "+y;

t=setTimeout('startTime()',1000);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;