|
JavaScript - Need Help Writing Javascript Functions That Compates Name Of A Input With Its Value??
Hi, I haven't really done any JavaScript programming and need help writing a couple of functions for a very basic sudoku game I am trying to build. Basically I want it to highlight which in green the correct answers and red the wrong ones. The names of the input fields of the table cells are the correct answer so I need a function that will compare the name of and input with the value, if the match then change the cell green, if not turn it red. Bellow is the code i have written with unessecary parts taken out
Code: <?php
$level = array
(
"Easy" => array
("9","4","6","2","8","7","3","5","1","5","8","3","6","1","9","7","4","2","2","1","7","5","4","3","6","9","8","8","6","5","4","3","2","1","7","9","7","2","1","9","6","5","4","8","3","4","3","9","1","7","8","5","2","6","6","7","8","3","2","4","9","1","5","3","9","4","8","5","1","2","6","7","1","5","2","7","9","6","8","3","4"),
"Medium" => array
("6","5","9","8","2","4","3","1","7","4","3","1","5","9","7","8","2","6","8","7","2","1","3","6","9","5","4","2","6","5","9","4","8","7","3","1","1","9","7","6","5","3","4","8","2","3","4","8","7","1","2","6","9","5","9","2","6","4","8","5","1","7","3","7","1","3","2","6","9","5","4","8","5","8","4","3","7","1","2","6","9"),
"Hard" => array
("9","8","3","7","2","1","6","5","4","7","6","5","8","4","9","3","2","1","1","2","4","3","6","5","7","9","8","8","1","7","9","5","6","2","4","3","3","4","6","2","1","8","5","7","9","5","9","2","4","7","3","1","8","6","6","7","8","5","3","4","9","1","2","4","5","1","6","9","2","8","3","7","2","3","9","1","8","7","4","6","5")
);
$mask = array
(
"Easy" => array
("0","4","6","2","8","0","0","0","0","5","0","0","6","0","0","7","4","0","2","0","0","0","0","0","0","0","0","0","0","5","0","3","2","0","7","0","0","2","1","0","0","0","4","8","0","0","3","0","1","7","0","5","0","0","0","0","0","0","0","0","0","0","5","0","9","4","0","0","1","0","0","7","0","0","0","0","9","6","8","3","0"),
"Medium" => array
("0","0","0","8","0","0","0","1","7","4","3","0","0","0","0","0","0","0","0","0","2","0","0","0","9","0","0","2","0","0","0","0","8","0","0","0","0","9","7","6","0","3","4","8","0","0","0","0","7","0","0","0","0","5","0","0","6","0","0","0","1","0","0","0","0","0","0","0","0","0","4","8","5","8","0","0","0","1","0","0","0"),
"Hard" => array
("9","0","0","0","0","1","0","5","0","7","6","5","0","0","0","0","0","0","1","0","0","3","0","0","0","0","8","0","0","0","0","0","6","0","4","0","0","0","0","2","1","8","0","0","0","0","9","0","4","0","0","0","0","0","6","0","0","0","0","4","0","0","2","0","0","0","0","0","0","8","3","7","0","3","0","1","0","0","0","0","5")
);
$difficulty = $_GET["difficulty"];
$style = $_GET["style"];
?>
<!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>
<script src="sudoku.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
</div>
<div id="nav">
<div class="option-item">
<form action="index.php" method="get">
<input type="submit" name="difficulty" value="Easy" />
<input type="submit" name="difficulty" value="Medium" />
<input type="submit" name="difficulty" value="Hard" />
</form>
</div><input type="button" class="control-button" onclick="checkStatus()" value="How am I Doing?" />
</div>
<div id="main">
<form name="f">
<?php
$box = $mask[$difficulty];
?>
<table class="root-table">
<tr>
<td>
<table class="box box-one">
<tr>
<td><input type="text" size="1" name="<?php echo $level[$difficulty][0]; ?>" value="<?php if ($mask[$difficulty][0] > 0) echo $mask[$difficulty][0]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][1] > 0) echo $mask[$difficulty][1]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][2] > 0) echo $mask[$difficulty][2]; ?>" /></td>
</tr>
<tr>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][9] > 0) echo $mask[$difficulty][9]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][10] > 0) echo $mask[$difficulty][10]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][11] > 0) echo $mask[$difficulty][11]; ?>" /></td>
</tr>
<tr>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][18] > 0) echo $mask[$difficulty][18]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][19] > 0) echo $mask[$difficulty][19]; ?>" /></td>
<td><input type="text" size="1" value="<?php if ($mask[$difficulty][20] > 0) echo $mask[$difficulty][20]; ?>" /></td>
</tr>
</table>
Similar TutorialsQ1. write a function called countAS that will take a string as input (using a prompt dialog box,prompt the user or the string).the string must contain only a's,b's and c's e.g. "abccbbaa" or "aaabbbccc" if any other letters are present apart from the letters a b c, output an alert dialog box with an error message and prompt the user again to input a valid string.count the number of a's the numbers of b's and the numbers of c's entered and display the count for each as well as a total count of all the characters within the string . for example if the string was abbcc output should be as follows: the total count is 5 characters The Number of a's is 1 The Number of b's is 2 The Number of c's is 2 Q2. write a code that uses an event handler to display an alert dialog box with the message 'hello to you all' when a user clicks a link in a html page which links to the school of computing website. Javascript (inside a function that everything works except this bit): Code: var uploadedfile = "upload" + ups; document.getElementById(uploadedfile).value= file; The input element its not changing: Code: <input type="text" name="upload[]" id="upload1"/> There are four additional input elements, one for each possible fileupload, they will be set to hidden but in order to see if it was submitting the name I set it to text. Here is the live page so you can see it: http://www.sandcrawler.net/forum/sandnet.php?page=test2 What this is for is an upload script, I have all the upload bit working, but now I need to find a way to pass the filename to my php script, that will then sort the files out into two types, screenshot and compressed. Then insert them into a mysql database. I've gotten this same type of thing to work on a w3school TryIt demo, with the variables set the same way. So I can't figure out where there is an error. Opera isn't giving me one. I can post more code if needed. Thanks I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document. Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation) On HTML form: >drop down list (name courseName, value of selections 1,2,3,4) > radio button (name returnStudent, value of selections 1,2) > radio button (name bookNeeded, value of selections 1,2) Table (name totalprice) at the bottom of the form: price1: price of courseName plus returnStudent (td with name tuitionprice) price2: price of bookNeeded (td with name bookprice) Total of the above (td with name totalprice) This is what I am trying to make work... Code: var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
if (selectedCourse == "1" && selectedStudent =="1")
{
document.write("12345");
}
if (selectedCourse == "1" && selectedStudent =="2")
{
document.write("54321");
}
}
Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script> I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful! Hello, I am a novice and am hoping I can get some help here. I am self taught at basic HTML and am now trying to add some "v v vroom!" to a site that I am developing. The problem I am faced with is I have a Javascript that I am using as an experiment to see how Javascript works (in the hope that I can use other more exiting Javascripts on my sight I am buliding). I have copied it onto NotePad from a self teaching book which when opened up in a browser does not work. The script in question is; <html> <head> <title>My First Javascript page</title> <script type="text/javascript"></script> <style type="text/css"> body {document.bgcolor="pink"} </style> <body> This is my first Javascript page !! So **** off! <form> <input type="button" onclick="document.bgcolor='blue'" name="change" value="blue"> <input type="button" onclick="document.bgcolor='red'" name="change" value="red"> <input type="button" onclick="document.bgcolor='yellow'" name="change" value="yellow"> <input type="button" onclick="document.bgcolor='white'" name="change" value="white"> <input type="button" onclick="document.bgcolor='fuchsia'" name="change" value="fuchsia"> </form> </body> </html> Can anyone shed any light on what I might be doing wrong, or what I can do to make it work? Thank you all in advance. David Hood. I want to write an xml stream to the browser using javascript. What I am currently getting is the visual data and the page source is the xml stream. What I would like to get is a visual representation of the xml as well as the underlying page source. Further information. The visual presentation wanted is: <?xml version="1.0" encoding="UTF-8" ?> - <FSResult> <FoodStampAllotment>526</FoodStampAllotment> <GrossEligible>TRUE</GrossEligible> <NetEligible>TRUE</NetEligible> <AssetEligible>TRUE</AssetEligible> </FSResult> The page source for that is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>526</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The page url includes: FSCalcServlet.do The other visual presentation that we want to look like the above: 150TRUETRUETRUE The other page source is: <?xml version="1.0" encoding="UTF-8" ?><FSResult><FoodStampAllotment>150</FoodStampAllotment><GrossEligible>TRUE</GrossEligible><NetEligible>TRUE</NetEligible><AssetEligible>TRUE</AssetEligible></FSResult> The other page url includes: FSCalc.html This version is written from Flex via javascript and the original is a java servlet. I've looked on several websites and several threads here regarding writing and reading cookies with javascript, and I just can't seem to get it to work. All I want is a simple text box with 2 buttons: Save and Recall. Text entered into box is saved to a cookie when "Save" is pressed, and at a later date when "Recall" is pressed the saved text will show up in the box. Can you help please? i have borrowed a java script to produce a weather forecast using data from my weather station. Quote: //code to get your variables goes here //I've assumed they a // $sager_wind = wind direction // $sager_rumbo = wind change // $sager_hpa = Baro value // $sager_trend = Baro trend // $sager_nubes = Sky condition //now we can prepare them for the Sager script //the sager script wants uppercase, so just to be sure... $sager_wind = strtoupper($sager_wind); //has to be uppercase $sager_rumbo = strtoupper($sager_rumbo); //allow for either of mB or Hg input if ($sager_hpa > 50) { $sager_hpa = $sager_hpa * 0.0295300;} //enumerate the Baro switch ($sager_hpa) { case ($sager_hpa > 30.4): $sager_hpa = 1; break; case ($sager_hpa > 30.1): $sager_hpa = 2; break; case ($sager_hpa > 29.9): $sager_hpa = 3; break; case ($sager_hpa > 29.7): $sager_hpa = 4; break; case ($sager_hpa > 29.5): $sager_hpa = 5; break; case (sager_hpa > 29.2): $sager_hpa = 6; break; case (sager_hpa > 28.: $sager_hpa = 7; break; case (sager_hpa > 28.0): $sager_hpa = 8; break; } //enumerate the Baro trend if (strcasecmp($sager_trend, 'Rising Rapidly') == 0) { $sager_trend = 1; } if (strcasecmp($sager_trend, 'Rising Slowly') == 0) { $sager_trend = 2; } if (strcasecmp($sager_trend, 'Steady') == 0) { $sager_trend = 3; } if (strcasecmp($sager_trend, 'Falling Slowly') == 0) { $sager_trend = 4; } if (strcasecmp($sager_trend, 'Falling Rapidly') == 0) { $sager_trend = 5; } //enumerate the Sky condition if (strcasecmp($sager_nubes, 'Clear') == 0) { $sager_nubes = 1; } if (strcasecmp($sager_nubes, 'Partly Cloudy') == 0) { $sager_nubes = 2; } if (strcasecmp($sager_nubes, 'Mostly Overcast') == 0) { $sager_nubes = 3; } if (strcasecmp($sager_nubes, 'Overcast') == 0) { $sager_nubes = 4; } if (strcasecmp($sager_nubes, 'Rain') == 0) { $sager_nubes = 5; } ?> <html> <!-- standard header stuff goes here --> <!-- and don't forget to include the sager script --> <script src="sager_cast.js" type="text/javascript"></script> <body> <br /> Sager = <span id="forecast">forecast will appear here</span> <script type="text/javascript" language="javascript"> <!-- { //we could do some fancy escaping to directly insert the php variables //into the javascript function call, but this is harder to break. z_wind = "<?php echo $sager_wind?>"; z_rumbo = "<?php echo $sager_rumbo?>"; z_hpa = <?php echo $sager_hpa?>; z_trend = <?php echo $sager_trend?>; z_nubes = <?php echo $sager_nubes?>; document.getElementById('forecast').innerHTML = sager_cast( z_wind, z_rumbo, z_hpa, z_trend, z_nubes); } //--> </script> </body> </html> this basically turns my PHP variables intoa forecast by using the script above and also sager_cast.js (which crunches the numbers). my question is how can i record the output to a text file ie. this bit Quote: <br /> Sager = <span id="forecast">forecast will appear here</span> i know how to run a cron job on my host server but whenever i try to use php to geta at it, it fails. i understand that php and JS and side server / client server / host server different, but surely there must be a way to record the output using my host and the script that i have. my goal is to catch the forecast every 15 mins (with a time stamp) and then look back at the (text) file to see how it has changed. can anyone please help? one suggestion is to turn the number crunching JS script into php so i can 'get at it' but there are thousands of lines of code! thanks in advance, and hello from a newbie poster! Writing Table Cells and Switch Statements I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent partyType parameter stores variables of D,R,I,G or L percent parameter store percentage rounded to nearest integer so I am to make a switch and break statements /commands then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1 heres the code I created for this one Code: function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType
for (i=0; i < percent; i++)
{
document.write(barText);
So what improvements should I make? should my loop be before everything? Thanks Okay, here is my assignment: reate an HTML document with 2 JavaScript functions as described below. Call the document useparameters.html The first function will use a parameter for the Width of a horizontal rule. When called, the function will draw a horizontal rule of a width specified by the Functions argument. Prompt the user for the pixel width information. The second function will use parameters for two heading sizes. The parameters will be used for the size of the text that will be displayed on the first line and the size of the text that will be displayed on the second line. The heading size will be different on the first and second lines. Prompt the user for these two headings as well (one prompt for each). The body of the HTML document will contain a page heading and call the two functions you created, displaying a horizontal rule and two lines of text which will be formated based upon the parameters the user entered into the prompts. Here is my 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Use Parameters</title> <script type="text/javascript"> <!-- var hrsize var htwosize var psize function bar() { hrsize = window.prompt( "Please enter the size you want your horizontal rule to be (in pixels)", 50 ) hsize = hrsize document.write("<HR ALIGN='left' width=" + hrsize + ">"); } function output() { htwosize = window.prompt( "Please enter the size you want your heading to be (in pixels)", 18 ) htwosize = htwosize document.write("<h2" + htwosize + "/h2>") } function output() { psize = window.prompt( "Please enter the size you want your paragraphcs to be (in pixels)", 12 ) psize = psize document.write("<p" + psize + "/p>") } --> </script> </head><body> <script type="text/javascript"> <!-- bar(hrsize) output(htwosize) output (psize) --> </script> <h2>JavaScript Rules!</h2><p>Using JavaScript is fun! </p> <p> This is some standard HTML, unlike the above which was generated with javaScript.</p> </body> </html> What am I doing wrong? Hello, Iam currently experimenting with Java Scripting and have hit a wall about the use of Functions. I am trying to create a difference function which would work out the difference between two numbers. e.g. 14 and 18 I am able to create a function and if statement to find the larger number of a argument but am having trouble writing one to find the difference between two numbers. Iam also confused (i know probably a silly question) but is the operator used the same for this function. Hope people can make sense of that. Thanks, Hello all here is a more intelligent question. This one is just on an exercise I am doing. I have to call a function using parameter values. my main function is this Code: function showResults(race,name,party,votes) or just function showResults in the next lines below i have to call the function is this the right way Code:
<script type="text/javascript">
{
showResults=("race[0],name1,party1,votes1");
}
</script>
or should it be without the { and } like this? Code:
script type="text/javascript">
showResults=("race[0],name1,party1,votes1");
</script>
or is it like this Code: script type="text/javascript">
showResults(race[0],name1,party1,votes1);
</script>
Thanks all, what would be the proper method Thanks Forgive me if the code is rather bad, I am new to Javascript. Now what I'm aiming to do is after I have entered the contents of the Array's I then want to query the newly created array/database, based on the track number, Via a seprate function. However all the values I entered, always come up empty. No matter how many solutions I tried I can't get the query to work. So I've decided to come to you guys/gals for help. Code: mainMenu()
function mainMenu()
{
menu = 0;
menu = eval(prompt("Select an Operation to Continue\n ====================\n 1 - Create new Database\n 2 - Query Database\n 3 - Show Report\n Any other to exit"));
switch (menu)
{
case 1:
insert(trackNumber)
break;
case 2:
query(trackNumber)
break;
case 3:
break;
}
}
// Enter the track number
function trackNumber()
{
var theNumber = eval(prompt("Enter Track Number"));
if ((theNumber >= 0) && (theNumber < 100))
{
return theNumber; // Stores the track number for insert(trackNumber)
}
}
// This function will allow the user via the (trackNumber)
// parameter to insert the contents of the database
function insert(trackNumber)
{
// Create new Array's
trackNum = new Array(5)
trackName = new Array(5)
trackArtist = new Array(5)
// For each Track we want to hold the trackNumber(),
// the track name and the track's artist.
for(var i = 0; i < trackNum.length; i++)
{
trackNum[i] = trackNumber()
trackName[i]= prompt("Enter Track Name: " + i)
trackArtist[i] = prompt("Enter Track Artist: " + i)
}
}
// This Function will allow the user to query the database, based on track number.
function query(trackNumber)
{
var trackSearch = trackNumber()
var j = 0;
for(j in query)
{
if (query[j] == trackSearch)
{
alert("Track Number: " + trackSearch + "\nTrack Name: " + trackName[j] + "\nTrack Artist " + trackArtist[j]);
break;
}
else if (query[j] != trackSearch)
{
alert("Track Number: Empty" + "\nTrack Name: Empty" + "\nTrack Artist: Empty");
break;
}
}
}
If someone could please help me by posting some relevant code that would help accomplish this, I would greatly appreciate it, as so far I have been scratching my head puzzled, at how I could solve this. i am new to JavaScript and i have an assignment to create a tour calculator here is the code and its not working please help its urgent thanks. [code] <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .font { font-size: 28pt; } font2 { font-size: 15pt; } </style> </head> <body> <strong class="font">USA Tour Cost Calculator</strong> <br/> <br/> Conplete the form below to calculate the cost of your tour of the United States <script type="text/javascript"> function calculate(){ var cost=0; var accomodation=0 var radio1 var radio2 var duration=0 function accomodation() { for (var i=1; i<=3; i++) {radio1= document.getElementById("radio"+i); if (radio1.checked==true) {accomodation=i;}} if (accomodation=1){cost=parseInt(radio.value); return value;} else if (accomodation=2){cost=parseInt(radio.value); return value;} else if (accomodation=3) {cost=parseInt(radio.value);return value;} else {window.alert("Please select the type of accomodation")} } function peak() { var cost=accomodation() var peak=document.getElementById("check1") if (peak.checked==true) {cost +=parseInt(checkbox.value); return value;} else {cost=accomodation()} } function calc(){ var cost=peak() for (var i=1; i<=4; i++){ radio2=document.getElementById("Radiobutton"+i); if (radio2.checked==true) {duration=i;} if (duration=1) {cost*=parseInt(radio.value); return value;} else if (duraion=2){cost*=parseInt(radio.value); return value;} else if(duration=3) {cost*=parseInt(radio.value); return value;} else if(duration=4){caost*=parseInt(radio.value); return value;} else {alert("Please select the duration of tour")} } } </script> <br/> <form id="form2" name="form2" method="post" action=""> <p> <label> <input type="radio" name="RadioGroup2" value="95" id="Radio1" /> Camping</label> <br /> <label> <input type="radio" name="RadioGroup2" value="140" id="Radio2" /> Budget Hotel</label> <br /> <label> <input type="radio" name="RadioGroup2" value="170" id="Radio3" /> Premier Hotel</label> <br /> </p> </form> Click here if you will be travelling during the peak season of June to August: <input name="" type="checkbox" value="20" id="check1" /> <br/> <br/> Duration of tour: <form id="form1" name="form1" method="post" action=""> <label> <input type="radio" name="RadioGroup1" value="4" id="Radiobutton1" /> 4 days, 1sate</label> <br /> <label> <input type="radio" name="RadioGroup1" value="7" id="Radiobutton2" /> 7 dasy, 3 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="14" id="Radiobutton3" /> 14 days, 12 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="20" id="Radiobutton4" /> 20 days, 18 states</label> <br /> </p> </form> <br/> <p> <input type="submit" value="Calculate" onClick='alert("The total cost of your tour is $calculate();")'><input type="reset" value="Reset" /></p> </body> </html> [code] All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero Hi all, I've written the following script: Code: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keys2</title>
<script type="text/javascript">
function keyPress(key){
document.getElementById('rect01').style.fill = "red";
}
</script>
<style>
.button {
width: 100px;
padding-right:10px;
height:2em;
background-color:#FC3;
border-radius:3px;
color:#fff;
font-weight:bold;
}
ul {
list-style-type: none;
padding: 0;
margin-left:25px;
}
li {
float:left;
width:30px;
margin-right:25px;
padding:10px;
height:2em;
background-color:#FC3;
font-size:xx-large;
}
</style>
</head>
<body>
<div>
<svg width="1000" height="200">
<rect x="25" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect01"/>
<rect x="100" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect02"/>
<rect x="175" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect03"/>
<rect x="250" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect04"/>
<rect x="325" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect05"/>
<rect x="400" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect06"/>
<rect x="475" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect07"/>
<rect x="550" y="50" fill="#FFFFFF" stroke="#000000" width="50" height="150" id="rect08"/>
</svg>
</div>
<div>
<ul>
<li><a href="#" class="button" onClick="keyPress(rect01);">A</a></li>
<li><a href="#" class="button" onClick="keyPress(rect02);">B</a></li>
<li><a href="#" class="button" onClick="keyPress(rect03);">C</a></li>
<li><a href="#" class="button" onClick="keyPress(rect04);">D</a></li>
<li><a href="#" class="button" onClick="keyPress(rect05);">E</a></li>
<li><a href="#" class="button" onClick="keyPress(rect06);">F</a></li>
<li><a href="#" class="button" onClick="keyPress(rect07);">G</a></li>
<li><a href="#" class="button" onClick="keyPress(rect08);">H</a></li>
</ul>
</div>
</body>
</html>
Now, I could write a version of the keypress function for each rectangle, but that seems like poor coding. Can anyone point out how I might restructure the function or the code so that I can pass the number in the onClick to the rectangle it refers to? Thanks Hello, I am new to javascript and have managed to create the below form with few fields validation that is working. I also have an email format validation function which is not working. Any help would be hightly appreciated. Below with the form with the javascript <html> <script language="JavaScript" type="text/javascript"> <!-- var radio_selection=""; function checkform ( form ) { **// ** START ** **if (form.name.value == "") { ****alert( "Please enter your name." ); ****form.name.focus(); ****return false; **} if (form.Phone.value == "") { ****alert( "Please enter your phone number." ); ****form.Phone.focus(); ****return false; **} **if (form.email.value == "") { ****alert( "Please enter your email." ); ****form.email.focus(); ****return false; } if (radio_selection=="") { alert("Please indicate your attendance."); return false; } *// ** END ** **return true; } function checkEmail(form) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } alert("Invalid E-mail Address! Please re-enter."); return false; } //--> </script> <body> <form style="font-family:lucida calligraphy;font-size:120%;color:maroon" action="invitees.php" method="post" onsubmit="return checkform(this);checkEmail(this.email.value);"> <table cellspacing="5" cellpadding="5" border="0"> <tr> <td valign="top" > <style="font-family:lucida calligraphy;font-size:100%;color:maroon">Name: </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Phone Number </td> <td valign="top"> <input type="text" name="Phone" id="Phone" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Email Address: </td> <td valign="top"> <input type="text" name="email" id="email" size="40" value="" /> </td> </tr> <tr> <td valign="top"> Will You Attend </td> <td valign="top"> <input type="radio" name="Attendance" id="Attendance_0" value="Yes" onClick="radio_selection='yes'" /> Yes <input type="radio" name="Attendance" id="Attendance_1" value="No" onClick="radio_selection='no'"/> No <input type="radio" name="Attendance" id="Attendance_2" value="Maybe" onClick="radio_selection='maybe'"/> Maybe<br/> </td> </tr> <tr> <td valign="top"> Adults <select name ="adults" id="Adults" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> <td valign="top"> Kids <select name="kids" id="Kids" > <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </td> </tr> <tr> <td valign="top"> Post a Note </td> <td valign="top"> <textarea name="Note" id="Note" rows="6" cols="35"></textarea> </td> </tr> <tr> <td colspan="3" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </table> </form> </html></body> hey all, I am now at the point of being able to see the light at the end of the tunnel (woot!). After a lot of help from you guys I have tackled my RSS feed issue (sort of) to the point where i have a page that does basically what I need it to (http://www.the-rational-investor.com/test042311.php/). I now need to incorporate this java script developed into the big picture and of course, there seems to be problems. Since I know it works on its own, I must be running into problems getting all the functions working simultaneously and I once again need to call on the board's brilliance in figuring out what I am doing wrong....so here it goes I have taken out a lot of unnecessary code just to focus on the java script. Yes there is PHP code embedded but please don't beat up on me too much for that. here is the main page code: Code: <head>
<?
// function for onmouseover to do ALL THREE tasks //
?>
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
changetext(z);
var x=y;
var rssfeedvar = myArrayRssFeed[x];
showRSS(rssfeedvar);
}
</script>
<?
// First Task - function for onmouseover TEXT //
?>
<script type="text/javascript">
function changetext(z){
var s= z;
var textchangeEntries = myArrayEntries[s];
var id = document.getElementById("DBtext_large");
id.innerHTML=textchangeEntries;
var textchangeWebadr = myArrayWebadr[s];
var id = document.getElementById("DBtext_link").getElementsByTagName('a')[0];
id.nodeValue=textchangeWebadr;
id.setAttribute('href',textchangeWebadr);
id.innerHTML=textchangeWebadr;
var textchangeEmail = myArrayEmail[s];
var id = document.getElementById("DBtext_email");
id.innerHTML=textchangeEmail;
var textchangeRssUrl = myArrayRssUrl[s];
var id = document.getElementById("DBtext_rssUrl");
id.innerHTML=textchangeRssUrl;
var textchangeRssFeed = myArrayRssFeed[s];
var id = document.getElementById("DBtext_rssFeed");
id.innerHTML=textchangeRssFeed;
}
</script>
<?
// Second Task - functions for onmouseover IMAGES //
?>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
var myArrayEntries = ["<?php echo implode('","',$map_entry_array);?>"];
var myArrayWebadr = ["<?php echo implode('","',$web_adr_array);?>"];
var myArrayEmail = ["<?php echo implode('","',$email_adr_array);?>"];
var myArrayRssUrl = ["<?php echo implode('","',$rss_url_array);?>"];
var myArrayRssFeed = ["<?php echo implode('","',$rss_feed_array);?>"];
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(<?echo("$qs1");?>);
</script>
<?
// Third Task - functions for onmouseover RSS FEED //
?>
<script type="text/javascript">
function showRSS(str)
{
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getrss.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
getrss.php is unchanged Code: <?php
//get the q parameter from URL
$q=$_GET["q"];
//find out which feed was selected
if($q=="http://twitter.com/statuses/user_timeline/53777622.rss")
{
$xml=("http://twitter.com/statuses/user_timeline/53777622.rss");
}
elseif($q=="http://www.autisticsociety.org/rss/news2.php")
{
$xml=("http://www.autisticsociety.org/rss/news2.php");
}
elseif($q=="http://sableresources.com/news/")
{
$xml=("http://sableresources.com/news/");
}
elseif($q=="http://www.northgateminerals.com/rss/pressrelease.aspx")
{
$xml=("http://www.northgateminerals.com/rss/pressrelease.aspx");
}
elseif($q=="http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0")
{
$xml=("http://www.thompsoncreekmetals.com/s/RSS.asp?MaxItems=4&Version=RSS2.0");
}
elseif($q=="http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.imperialmetals.com/s/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL")
{
$xml=("http://investorrelations.walterenergy.com/corporate.rss?c=71978&Rule=Cat=news~subcat=ALL");
}
elseif($q=="http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1")
{
$xml=("http://www.teck.com/framework/comp.aspx?portalName=tc&id=133613&rss=1");
}
elseif($q=="http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.tasekomines.com/tko/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0")
{
$xml=("http://www.rocamines.com/s/RSS.asp?MaxItems=10&Version=RSS2.0");
}
elseif($q=="http://www.breakwater.ca/rss/pressrelease.aspx")
{
$xml=("http://www.breakwater.ca/rss/pressrelease.aspx");
}
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
//output elements from "<channel>"
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");
//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
echo ("<p><a href='" . $item_link
. "'>" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>
Thanks again for all your wonderful help and all the best to you and your families on this Easter weekend, Brian Hello folks: I've got an html table populated by a php foreach routine. One field in this table is an Input type=checkbox. The goal is to run a javascript function when the user checks the checkbox. But, since the checkbox is in a table populated by a foreach routine, I'm having some problems. Below is the applicable code for my table: <?php foreach($results as $row) { $bk_owner = $row['BookOwner']; $addrss_owner = $row['AddressOwner']; $f_name = $row['FName']; $l_name = $row['LName']; $email = $row['EmailAddress']; $d_phone = $row['DeskPhone']; $ext = $row['Ext']; $cell = $row['CellPhone']; $title = $row['Title']; echo "<tr>"; echo "<td class='a'>".$l_name ."</td>"; echo "<td class ='a'>".$f_name ."</td>"; echo "<td class ='c'>".$email ."</td>"; echo "<td class ='a'>".$d_phone ."</td>"; echo "<td class='b'>".$ext."</td>"; echo "<td class='a'>".$cell."</td>"; echo "<td class='c'>".$title."</td>"; echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; echo "</tr>"; } echo"</tbody>"; ?> Specifically, note this line: echo "<td class='b'><input type='checkbox' id='chk_Bx' value=". $addrss_owner. " onClick='selectFunction()'></input></td>"; the value is set to $address_owner. This value is a primary key value and will allow me to run routines related to the record chosen when the checkbox is checked. Following is the javascript code for selectFunction(): function selectFunction(){ var check = document.getElementById("chk_Bx").checked; var val = document.getElementById("chk_Bx").value; alert(val); } At this point the javascript is very simple. All I'm trying to do is pick up applicable values for the record selected. But - I believe because the table is populated through a foreach loop, the javascript alert is returning the same primary key value for every record checked (or unchecked). Also, if I alert out check, it continually returns false, even if I've checked the box and it should read true. I am assuming this is also related to the foreach table presentation. How do I grab ONLY the primary key value, or checked true/false for the applicable record? Thanks in advance: Pavilion I am currently designing a table as such Code: ___________________________ | TABLE | | | FRAME A |___________________________| | last row clicked | FRAME B |___________________________| the top frame is a table and the bottom frame contains the last row clicked called through onclick. question: if frame B is a php file with a javascript object, how do i call the javascript object's function to print the data? here is what i have so far index.html //this is the source code for the site Code: <html> <frameset rows = "60%, 40%"> <frame src = "table_driver.php" name = "A" id = "FRAME1"> <frame src = "bottom_row.php" name = "B" id = "FRAME2"> </frameset> </html> printJSTable() //prints the table shown in frame A Code: function printJSTable()
{
echo '<script src = "java_script.js"></script>';
echo '<script src="sorttable.js"></script>';
echo '<table class = "sortable" id = "myTable" border = "1">';
echo '<thead id = "header"><tr>';
foreach($this->columns as $header => $order)
{
echo '<th>';
echo $header;
echo '</th>';
}
echo '</tr></thead><tbody>';
$counter = 0;
for($i = 0; $i < $this->numRows; $i++)
{
//IMPORTANT changeRow(this) is JS call
echo '<tr onclick = "changeRow(this)" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)">';
foreach($this->data[$i] as $key => $value)
{
echo '<td>';
if($value!="")
echo $value;
else
{
echo '';
}
$counter++;
echo '</td>';
}
echo '</tr>';
}
echo '</tbody></table>';
echo '<form><input id = "'.$this->numRows.'"type = "button" value = "add row" onclick = "addRow(id)"></form>';
}
and this is changeRow(this) which is supposed to create the table in frame b Code: //populates headersArr and rowArr correctly parent.B.obj = new TableData(headersArr, rowArr); parent.B.obj.printTable(); here are the function definitions for TableData Code: function TableData(headers, row)
{
this.headerArr = headers;
this.rowArr = row;
}
TableData.prorotype.printTable = function()
{
for(i=0; i<this.headerArr.length; i++)
{
document.write('<tr><th>');
document.write(this.headerArr[i]);
document.write('</th><td>');
document.write(this.rowArr[i]);
document.write('</td></tr>');
}
}
and then, finally, this is the php file for the bottom frame Code: <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <script type = "text/javascript" src="java_script.js"></script> </head> <body> <script> obj = new TableData; </script> </body> </html> what i want to do is populate the variable obj from ^ (bottom_row.php) and then use the print function to print it out. right now it is populating correclt,y but i cant get it to print. The error console says that Value undefined (result of expression parent.B.obj.printTable) is not object. ?? sry for all the code! just didnt want to leave anything out thanks! Hi I've set up an html page that contains 3 buttons, which have a sprite rollover effect when hovered over. This is handled by css. When one of the buttons is clicked - a value is passed to an input field. This is handled by Javascript. Both of these functions work. What I would like to do is add a second function when a button is clicked - so that the hover sprite remains selected. Could anyone tell me how to do this please? Here is the button code I have: <button type="button" class="fantasy_button_blue_sprite" id="mcgyver" value="mcgyver" onclick="setHiddenControlValue('option1');">next</button> Here is the input field that gets populated: <input type="<?php echo $type;?>" id="fantasy_friend" name="fantasy_friend" value="<?php echo $fantasy_friend; ?>"> This is the javascript I'm using: <!-- // set the hidden form field when a button is clicked function setHiddenControlValue(selectedValue) { document.getElementById("fantasy_friend").value = selectedValue; parent.document.options_form.their_firstname.value=selectedValue; } And this is the sprite css: .fantasy_button_green_sprite { background: transparent url("/images/align_page/fantasy_button1.jpg") 0 1px no-repeat; height:61px; width:164px; border:none; text-indent:-99999px; cursor: pointer; margin-top:20px; } .fantasy_button_green_sprite:hover { background: transparent url("/images/align_page/fantasy_button1.jpg") 0 -61px no-repeat; } Thanks! Tom --> |
|||||||