|
JavaScript - Make Onclick Event On Javascript Button To Working
Code:
Quote: Code: Quote: Code: Quote: can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks. Similar TutorialsI have identical code in my index that works, so I'm just guessing the error is somewhere else, I know IE is not the best target to aim for - but I really want this to work in the windows default browser.... Here is the php page... PHP Code: <HTML> <HEAD> <TITLE> Family Home Page </TITLE> <SCRIPT TYPE="text/javascript" SRC="AddFamilyMemeber.js"> </SCRIPT> </HEAD> <BODY> <TABLE> <TR> <TD>Father:</TD> <TD> <SELECT ID="Father"> <?PHP $con=mysql_connect("localhost","XXXX","XXXX"); if (!$con) { die('Could not connect: '.mysql_error()); } mysql_select_db("XXXX",$con); $result=mysql_query("SELECT * FROM FamilyMembers"); while ($row=mysql_fetch_array($result)) { echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>"; echo "<BR/>\n"; } mysql_close($con); ?> </SELECT> </TD> </TR> <TR> <TD>Mother:</TD> <TD> <SELECT ID="Mother"> <?PHP $con=mysql_connect("localhost","XXXX","XXXX"); if (!$con) { die('Could not connect: '.mysql_error()); } mysql_select_db("XXXX",$con); $result=mysql_query("SELECT * FROM FamilyMembers"); while ($row=mysql_fetch_array($result)) { echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>"; echo "<BR/>\n"; } mysql_close($con); ?> </SELECT> <TD> </TR> <TR> <TD>FirstName:</TD> <TD><INPUT TYPE="text" ID="FirstName"/></TD> </TR> <TR> <TD>MiddleName:</TD> <TD><INPUT TYPE="text" ID="MiddleName"/></TD> </TR> <TR> <TD>LastName:</TD> <TD><INPUT TYPE="text" ID="LastName"/></TD> </TR> </TABLE> <BUTTON TYPE="button" ONCLICK="Submit()">Submit</BUTTON> <BUTTON TYPE="button" ONCLICK="Abort()">Abort</BUTTON> </BODY> </HTML> and here is the javascript that works in the index but not here... Code: function Abort()
{
document.location="AddFamilyMember.php";
};
When I load the page everything looks ok, but click on the abort button, and all that happens is that the little error symbol pops in the lower left of IE. The names of the two files are "AddFamilyMember.php" and "AddFamilyMember.js". Sorry, but I honestly can't see where the problem is.... I am using 2 ajax functions in the program. One for login and one for logout. The login one is showUser which is working correctly by using the form onsubmit method, however the logout button (IN BOLD) onclick method is not working. Pls help. Code: <form onsubmit="showUser(document.getElementById('uid').value,document.getElementById('pass').value);return false;" >
<div id="txt"><b>Enter your username </b>
<input type="text" name= "username" id="uid">
<br>
<b>Enter your password</b> <input type="password" name="pass" id="pass">
<br></div>
<div id="txt1" style="display : none">help</div>
<input type="submit" value="Login" />
<input type="button" onclick="logout(document.getElementById('uid').value); return false; " name="logout" value="Logout" />
<input type="button" value="Register" class="register"/>
</form>
Hello....I have written a PHP script for a secure client login system and it is working on Firefox and Chrome. But it doesn't work on Safari and IE. I have noticed that some of the javascript functions do not work at all while a few of them work. Can somebody please take a look and let me know what could be wrong? I am pasting the part of my code that does't work up he <script type="text/javascript"> function newdir(i) { alert('Newdir!'); var newdir=prompt("Please enter the name of the folder"); if (newdir!=null && newdir!="") { document.getElementById('newdir').value= newdir; document.getElementById('folder').value= i; document.getElementById('download').value = ''; document.myform.submit(); } } </script> <?php $dir = '../Users/gcreddy/' echo '<tr><td></td><td></td><td><a href=# onMouseOver="this.src=\'images/delete_s.png\';" onMouseOut="this.src=\'images/delete.png\';" onClick="setdir(''.$dir.'&apos"><img src="images/delete.png" name="Delete"></a></td><td></td><td></td><td><a href=# onMouseOver="document.newdirimg.src=\'images/newdir.png\';" onMouseOut="document.newdirimg.src=\'images/newdir_s.png\';" onClick="newdir(''.$dir.'&apos"><img src="images/newdir_s.png" name="newdirimg"></a></td></tr>'; echo '<tr><td></td><td></td><td>Upload file:<input type="file" style="background-color:gray;" name="datafile" size="40"></td><td><a href=# onMouseOver="document.load.src=\'images/upload_s.png\';" onMouseOut="document.load.src=\'images/upload.png\';" onClick="upload(\''.$dir.'\')"><img src="images/upload.png" name="load"></a></td><td><input type="hidden" name="login" value="'.$user.'"><input type="hidden" name="password" value="'.$password.'"><input type="hidden" name="number" value="'.$indexCount.'"><input type="hidden" id="folder" name="folder" value=""><input type="hidden" id="newdir" name="newdir" value=""></td><td><input type="hidden" id="download" name="download" value=""></td><input type="hidden" id="Delete" name="Delete" value=""></tr></TABLE></form>'; ?> When I click on the create folder button (newdir.png), I don't see the alert message that I gave for debugging. I have the SAME problem with 2 more buttons on the same page. I would be glad if somebody could let me know what the problem / solution is. Regards, G.C.Reddy I assum the following html code: <div id="id1" onclick="click()">A<div> <div id="id2" onclick="click()">B<div> Do you know how to get ID = id2 when I onclick on A? hello everyone, i am new to all this.. i need help regarding.. i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.) my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field. i am able to do it for simple text field as onclick="javascript: showCalendar('idname')" but how to do it in this case, where can i declare this ? Hi Everyone, How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below. Code: var start = new Image(); start.src = "start.jpg"; ctx.drawImage(start, 50, 50); Thanks! Ok... so I just downloaded the new Adobe Edge program for creating HTML5 websites. I was trying out a proof of concept for something I wanted to do on a site with a simple circle shape (will eventually be a soccer ball) rolling across the screen when clicked. The animation looks great, but it happens when the page loads, not when the image is clicked. Any suggestions?? Thanks! My HTML Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ball_edge.js"></script>
<link rel="stylesheet" href="ball_edge.css"/>
<!--Adobe Edge Runtime End-->
</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
ball_edge.css Code: /**
* Adobe Edge(TM): Generated CSS
* Do not edit this file.
*/
#stage {
height: 560px;
background-color: rgba(255,255,255,1);
width: 931px;
}
#RoundRect1 {
background-color: rgba(0,0,0,1.00);
-webkit-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-moz-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-ms-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-o-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
}
.default_end_Default_Timeline #RoundRect1 {
}
ball_edge.js Code: /**
* Adobe Helium: symbol definitions
*/
window.symbols = {
"stage": {
version: "0.1",
baseState: "Base State",
initialState: "Base State",
parameters: {
},
content: {
dom: [
{
id:'RoundRect1',
type:'rect',
rect:[234,175,81,82],
borderRadius:[10,10,10,10],
fill:['rgba(0,0,0,1.00)'],
stroke:[0,"rgba(0,0,0,1)","none"],
},
],
symbolInstances: [
],
},
states: {
"Base State": {
"#stage": [
["style", "height", '560px'],
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "width", '931px']
],
"#RoundRect1": [
["color", "background-color", 'rgba(0,0,0,1.00)'],
["style", "border-bottom-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateX", '18.9112px'],
["style", "border-bottom-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateY", '69.673px'],
["transform", "rotateZ", '0deg']
]
}
},
actions: {
},
bindings: [
],
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1000,
timeline: [
{ id: "eid32", tween: [ "style", "#RoundRect1", "border-bottom-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid30", tween: [ "style", "#RoundRect1", "border-top-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid18", tween: [ "transform", "#RoundRect1", "rotateZ", '360deg', { valueTemplate: undefined, fromValue: '0deg'}], position: 0, duration: 1000, easing: "linear" },
{ id: "eid31", tween: [ "style", "#RoundRect1", "border-top-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid17", tween: [ "transform", "#RoundRect1", "translateX", '511.599px', { valueTemplate: undefined, fromValue: '18.9112px'}], position: 0, duration: 1000, easing: "easeInCirc" },
{ id: "eid29", tween: [ "style", "#RoundRect1", "border-bottom-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" }]
}
},
}};
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
$.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
$(window).load(function() {
$.Edge.play();
});
I have a web page with two forms, when I click the button on one of the forms, the onclick event goes to a javascript that emails the first form and then the second form. This is correct, this is the way I want this to work. It's simple, it's easy, it works! However, it only works in FireFox and Internet Explorer, it will not work in Google Chrome browser. I've spent many hours trying lots of various ways to implement this so I'm not interested in speculating about possible solutions that might work, I've already tried too many of those. Also, it needs to work this way, not combining the forms, etc. Does anyone have any tried and tested solutions that work with Chrome? Thanks, in advance, for your expert advice. I know I can always rely on EE when all else fails. I know somebody here can solve this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<form id="NameForm" method="post" action="mailto:yourFirstemail@email.com">
Name: <input type="text" size="10" name="name"> <br />
<input onclick=functionCaller() type="button" value="Submit Two Forms">
</form>
<form id="AddressForm" name="DComments" method="post" action="mailto:yourSecondemail@email.com">
Address: <input type="text" size="10" name="address"> <br />
</form>
<script type="text/javascript">
<!--
function functionCaller()
{
document.getElementById('NameForm').submit();
document.getElementById('AddressForm').submit();
}
-->
</script>
</body>
</html>
Ok so Im going to break down what Im trying to do and hopefully someone can point me to a possible solution without getting all technical. I have 2 div tags. the first is a content container more or less. the second is a container for a php built calender (using html tables). Basically when the page loads the php builds the calenders html table code. each td element has an onclick event handler. The goal is to have the javascript handler execute when any non empty cell is clicked (non empty being that it has a date associated with it and is not a blank space filler). This is the easy part. The hard part is that each calendar day potentially has certain information associated with it stored in a mysql database. Im wanting input fields within the first container div to autopopulate with the information from the database (if any) for whatever day is clicked. Ive search around and heard things like javascript cant do mysql queries directly, and heard mention of ajax. So im stumped as to how to accomplish this. whether i need an external php script for the queries (perhaps inside a php function that can return data to the javascript that calls it?), but if that is plausable would it cause page loads or the like to the user? i really dont want to have to learn ajax for this one page, just seems excessive, but i do need a way to make the content in the first div populate with the respective database data for the selected day on the calendar. any thoughts, comments, or solutions that dont involve yet another web language would be greatly appreciated. thanks
I am very new Beginner of Javascript.. My query is that 1)I have 2 radio buttons A and B 2)When I click A I want 2 dropdownbox and a button to be displayed 3)When I click B I want 2 dropdownbox to be displayed. 4)Both should be independent Plz tell me the code..for this I need to make a table fadeout with JavaScript when I click a button. The table is simple. Code: <table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'> <tr class="dataRow"> <td>11</td> <td>12</td> <td>13</td> </tr> <tr class="dataRow"> <td>21</td> <td>22</td> <td>23</td> </tr> <tr id="row3" class="dataRow"> <td>31</td> <td>32</td> <td>33</td> </tr> <tr class="dataRow"> <td>41</td> <td>42</td> <td>43</td> </tr> </table> There is a button that calls a function called fadeout(). I cannot find a way to make the table fade out with just that one function. Is that even possible? If not, what other functions are necessary to make this happen? I am trying to understand a button that calls a script without any onclick event, post or similar. I do not have a clue ... This is the code of the button Code: <div class="sNR"> <button type="button" class="sLR" id="gwt-debug-searchPanel-searchButton">Suchen</button> </div> From: Code: https://adwords.google.com/o/Targeting/Explorer?__u=1000000000&__c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none Is there any software that help would help me? PS: You need firebug or an equivalent to view the code. Hey everyone, I am having troubles with my form not working correctly in IE. I have onclicks for different parts of my site. I am trying to use onclick and divs to make this happen. Can some look at my code and help me out? Thanks/ Code: <script type="text/javascript">
function switchFS(obj) {
var fset,i,fsclass;
fset=document.getElementsByTagName('fieldset');
fsclass = obj;
for ( i=0; i<fset.length; i++) {
if ((fset[i].getAttribute('class') != "user") && (fset[i].getAttribute('class') != fsclass)) {
fset[i].style.display = "none";
} else {
fset[i].style.display = "block";
}
}
}
</script>
</head>
<body id="submitform">
<div id="container">
<div id="header">
<?php include($dirprefix . "external/include/header.html"); ?>
</div><!-- end header -->
<div id="maincontent">
<h3> </h3>
<?php include($dirprefix . "external/include/menu_inactive.html"); ?>
<div id="bodycontent">
<div id="bodyleftcol">
<h4>Contact</h4>
<h5>Registration</h5>
</div>
<div id="bodyrightcol">
<h1 class="formhead">Site Registration</h1>
<p>Please register if you are a Zimmer customer, or an agency or designer working on behalf of one. Completing the requested information will enable us to continue to update and improve site content. Please make note of your password for future reference. You will receive an email with your login information.</p>
<div id="mainrightcol">
<form name="form" id="register" method="post" action="processregister.php">
<fieldset class="user">
<legend>i am a:</legend>
<label><input type="radio" value="Healthcare provider" class="checkbox" name="usertype" onclick="switchFS('healthcare');" /> Healthcare provider</label>
<label><input type="radio" value="Agency or designer for a customer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Agency or designer for a customer</label>
<label><input type="radio" value="Independent agency or designer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Independent agency or designer</label>
<label><input type="radio" value="Zimmer employee" class="checkbox" name="usertype" onclick="switchFS('zimmer');" /> Zimmer employee</label>
<label><input type="radio" value="Zimmer field representative" class="checkbox" name="usertype" onclick="switchFS('zimmer1');" /> Zimmer field representative</label>
<label><input type="radio" value="Media" class="checkbox" name="usertype" onclick="switchFS('user');" /> Media</label>
<label><input type="radio" value="Healthcare Author/Publisher" class="checkbox" name="usertype" onclick="switchFS('author');" /> Healthcare Author/Publisher</label>
<label><input type="radio" value="Other" class="checkbox" name="usertype" onclick="switchFS('user');" /> Other</label>
</fieldset>
<fieldset class="zimmer" style="display: none;">
<legend>zimmer information</legend>
<!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
<label for="division">Zimmer business unit:
<select name="division">
<option value="">- n/a -</option>
<option value="Knees">Knees</option>
<option value="Hips">Hips</option>
<option value="Extremities">Extremities</option>
<option value="Trauma">Trauma</option>
</select></label>
</fieldset>
<fieldset class="zimmer1" style="display: none;">
<legend>zimmer information</legend>
<!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
<label for="distributorship">Zimmer distributorship:
<input type="text" name="distributorship" value="" required="required" /></label>
</fieldset>
I have added the javascript and the section of code where the user picks how they are. Once you click on one of the users in IE the form goes away. Hi everyone, I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong... Is onclick already defined maybe? I'm not sure how it works to be honest... Code: <script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;
window.location.href = searchurl;
}
</script>
<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">> All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>
</select>
<strong>Area</strong>
<select name="area" id="area">
<option value="all">> All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>
</select>
<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />
The domain I'm currently testing this on is http://www.hairloss-help.net. Any help would be much appreciated. Thanks Sam I hate javascript.... OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working. In fact, when I replace the two recently revised files with the originals, these icons no longer work there either. Any help would be appreciated. I'm simply at a total loss for ideas here. From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null. Code:
function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}
function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}
function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;
From the supporting php file are the following lines of code.... Code: $s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";
None of these lines of code were changed or altered when I was updating the code. Any thoughts or suggestions would be deeply appreciated? Talltom Hello forum, My name is juan and recently started html programming. I have a web page with a drop box with the name of states. Code: <option value="">Alabama</option> <option value="">Alaska</option> I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event. Im using Ibox in order to have a image of the state open. Code: <a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!"><img src="images/small/image_1.jpg" alt=""/></a> the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event? Hi, New to javascript. Doing web page with ASP/VB.NET. Have text boxes for UI on page. Two command buttons - Submit (for db update) and Cancel. I need the Cancel button to prompt the user to verify cancellation. Need OK/Cancel buttons on alert. If user selects Cancel-no action. If user selects OK then I want the text boxes cleared of user text input and focus returned to first text box. I think this may be the code but do not know how to apply it. function Clear() { var res=window.confirm("Please confirm cancellation-text boxes will be cleared"); if(res==true) { document.getElementById("StrtDte").value=""; document.getElementById("EndDte").value=""; document.getElementById("txtProjRegHrsAl").value=""; document.getElementById("txtProjOTHrsAl").value=""; document.getElementById("ddlRAS").focus(); } } Is this code valid or invalid for the events I need? How do I set it to fire when user clicks the ASP Cancel button? Thanks, John Hello here is another one i need suggestions on here is my coding so far <html> <head> <!-- New Perspectives on JavaScript Tutorial 3 Case Problem 2 Congressional Election Results Author: Date: November 14 2010 Filename: election.htm Supporting files: back.jpg, logo.jpg, results.css, votes.js --> <title>Congressional Races</title> <link href="results.css" rel="stylesheet" type="text/css" /> script type="text/javascript" src="votes.js"></script> <script type="text/javascript"> // script element to add the votes.js function totalVotes(votes){ // script element that will calculate the array var total = 0; for (var i = 0; i < votes.length; i++); { total = total + votes[i]; } return total; } function calcPercent(item,sum){ // script element to calculate the percentage which is rounded to the nearest integer var item = Math.round((item/sum))*100); // script element to get the percentage return item; } calcPercent(); function createBar(partyType,percent){ // script element to create blank cells switch(partyType) { case D: <td class='dem'></td> break; case R: <td class='rep'></td> break; case I: <td class='ind'></td> break; case G: <td class='green'></td> break; case L: <td class='lib'></td> break; } var barTxt = partyType; for (i=0; i < percent; i++){ document.write(barText); } } function showResults(race,name,party,votes){ // script element to display the results of a particular race var totalIV = totalVotes(votes); document.write("<h2>race</h2>"); document.write("<table cellspacing='0'>"); document.write("<tr>"); document.write("<th>Candidate</th>"); document.write("<th class ='num'>Votes</th>"); document.write("<th class='num'>%</th>"); document.write("</tr>"); for (var i=0; i < name.length; i++){ document.write("<tr>"); document.write("<td>name(party</td>"); document.write("td class='num'>"votes</td>"); var percent=calcPercent(votes[i], totalV) document.write("<td class='num'>(" + percent +"%)</td>"); createBar(party[i],percent) document.write("</tr>"); } document.write("</table>"); } </script> </head> <body> <div id="intro"> <p><img src="logo.jpg" alt="Election Day Results" /></p> <a href="#">Election Home Page</a> <a href="#">President</a> <a href="#">Senate Races</a> <a href="#">Congressional Races</a> <a href="#">State Senate</a> <a href="#">State House</a> <a href="#">Local Races</a> <a href="#">Judicial</a> <a href="#">Referendums</a> </div> <div id="results"> <h1>Congressional Races</h1> <script type="text/javascript"> showResults(race[0],name1,party1,votes1)... showResults(race[1],name2,party2,votes2)... showResults(race[2],name3,party3,votes3)... showResults(race[3],name4,party4,votes4)... showResults(race[4],name5,party5,votes5)... </script> </div> </body> </html> ______________ What i need to do is make a bar charts of elections people on the assignment, using 2 other files on a folder the names of the other files are votes.js and results.css here is the link of the actual question it is case problem 2 if u scroll down at http://books.google.ca/books?id=aG_T...Cell()&f=false right now i did up my coding and still nothing is working what does seem to be wrong with my coding? any suggestions from anyone? or hints even? thanks I was trying to help someone on another forum and seem to have run into a brick wall. The main problem that has got me stumped at the moment is that clicking on the images in the 1st tab work fine. However the subsequent tab selections and clicks do not change the "bigImage" correctly (not at all). Perhaps some other more experienced forum members can identify what I doing wrong at this time. I believe it is in my set-up of the onclick events in the "onload=" section, but I not the best at this event stuff yet! Code: var sel, tmp, elem;
var j=0;
for (var i=0; i<imgGroupArray.length; ++i) {
sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
}
Here is the full code that 'almost' works: Code: <!DOCTYPE HTML>
<html>
<head>
<title> Tab Gallery </title>
<style type="text/css">
li { display:inline; list-style-type:none; border:1px solid blue; margin:3px; }
.imgBlock { display:none; }
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=250787
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgGroupArray = [
['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'],
['61.jpg','62.jpg','63.jpg','64.jpg','65.jpg'] // NOTE: No comma after last entry
];
function tabGroup(which) {
var sel = document.getElementById('imgGroup').getElementsByTagName('div');
for (var i=0; i<sel.length; ++i) {
sel[i].style.display = 'none';
}
var tmp = 'imgGroup'+which; // alert(tmp);
document.getElementById(tmp).style.display = 'block';
}
function setBigImage(info) { // alert(info);
document.getElementById('bigImage').src = info;
}
window.onload = function() {
var img;
for (var i=0; i<imgGroupArray.length; ++i) {
for (var j=0; j<imgGroupArray[i].length; ++j) {
img = document.createElement('img');
img.setAttribute('src', baseURL+imgGroupArray[i][j]);
img.setAttribute('height','100px');
img.setAttribute('width','75px');
document.getElementById('imgGroup'+i).appendChild(img);
}
}
// Following modified from:
// http://www.codingforums.com/showthread.php?t=102896&highlight=addevent+onclick
var sel, tmp, elem;
var j=0;
for (var i=0; i<imgGroupArray.length; ++i) {
sel = document.getElementById('imgGroup'+i).getElementsByTagName('img');
while (elem=sel[j++]) { elem.onclick = function() { setBigImage(this.src); } }
}
tabGroup(0);
}
</script>
</head>
<body>
<div id="tabMenu">
<div style="float:left">
<li onclick="tabGroup(0)">Tab 1</li>
<li onclick="tabGroup(1)">Tab 2</li>
<li onclick="tabGroup(2)">Tab 3</li>
<li onclick="tabGroup(3)">Tab 4</li>
<li onclick="tabGroup(4)">Tab 5</li>
<li onclick="tabGroup(5)">Tab 6</li>
</div><br>
<div id="imgGroup"
style="width:300px; height:300px; border:1px solid red; float:left">
<div id="imgGroup0" class="imgBlock"></div>
<div id="imgGroup1" class="imgBlock"></div>
<div id="imgGroup2" class="imgBlock"></div>
<div id="imgGroup3" class="imgBlock"></div>
<div id="imgGroup4" class="imgBlock"></div>
<div id="imgGroup5" class="imgBlock"></div>
</div>
<div id="bigImageDiv"
style="width:250px; height:300px; border:1px solid red; float:left;">
<img id="bigImage" src="" alt="bigImage here!">
</div>
<br style="clear:both">
</div>
</body>
</html>
here the deal ,,I've solved all but this problem in my script i have my page setup with 1 iframe and the main html the code below is exactly how the page will show up in the iframe, you can copy and paste the whole thing and save it as a htm file to view if needed.. I need a way to catch the clicks that happen within the iframe but from the main section of the page..heres why! this is inserted at the top of the page if(top.location==self.location){top.location="RefESI_search.asp";} just above top.document.reset.RefCat.value= I can get the page to load even with this in the iframes ..but for the purposes of this i left it out so the page would load ok for anyone thats gonna try and help . theres only 2 links in the code.. hopefully whatever will hopefully solve this problem will be able to tell which links were clicked,and i can can point them to the apropriate links. I've looked thru alot of the threads so i know there are some extremely brite ppl in here that can knock this problem out of the ball park very easily.. you can grab the styles sheet from here https://www.docs.sony.com/reflib/Style_esi.css Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ref_Lib_Results</title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script language="javascript">
top.document.reset.RefCat.value="Home Receiver";
top.document.reset.NarrowRef.value="Good";
top.document.reset.criteria.value="stra";
top.document.reset.searchscope.value="model";
top.document.reset.companyscope.value="SONY";
top.document.reset.company.value="SONY";
if(""==""){top.reset();}
function popUp(URL,Name) {
var day = new Date();
var id = "page" + Name;
window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=600,height=600");
}
function launchjsmanuals(flag, x, y, z, id) {
//var myTypeLib = new ActiveXObject("Scriptlet.Typelib");
//var GUID = new String(myTypeLib.guid).substr(1,8);
//var endguid = new String(myTypeLib.GUID).substr(25,10);
if((x.indexOf("CHM")!=-1) || (x.indexOf("chm")!=-1)){
alert("You will be prompted to download a file\n\nClick Open - Do NOT click Save");
}
var whnd = "page" + id; //+ GUID + endguid;
var URL = '_manualusage.asp?flag='+flag+'&manual=' + x + '&user=' + y + z + '&manualid=' + id;
if(flag!=""){
whnd = window.open(URL,whnd, "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}else{
whnd = window.open(URL,"Loader", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}
}
function emailit(id, url,name,type,filesize,model,email,custname,cs3event,user){
var namestring = name;
var re = new RegExp('&','gi');
namestring = namestring.replace(re,'and');
name = namestring;
var xurl = "/srvs/common/email.asp?id="+id+"&emailurl="+url+"&title=" + name + "&type="+type+"&model=" + model + "&filesize=" + filesize + "&email=" + email + "&custname=" + custname + "&convid=" +cs3event + "&user=" + user;
popUp(xurl,id);
}
function NarrowSearch(what,value,cat){
switch(what){
case "Category":
parent.document.SearchForm.RefCat.value=value;
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "Model":
if("Home Receiver"!=""){
parent.document.SearchForm.RefCat.value="Home Receiver";
}
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "ONLY":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="Only";
parent.document.SearchForm.submit()
break;
case "ALL":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="ALL";
parent.document.SearchForm.submit()
break;
}
}
</script>
</head>
<body>
<div id="results">
<div style="height: 400px;border-bottom:1px solid black;"
class="modelblock">
<div style="margin-left:20px; margin-right:15px; margin-top:10px; font-size:10pt">
<span style="float:Right;margin-top:10px;text-align:right">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<div style="background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer" onclick="javascript:NarrowSearch('ALL','stra','Home Receiver')">Display All Models</div>
</td><td> </td><td><div style="width:40px;background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer;text-align:center" onclick="javascript:history.go(-1)">Back</div></td></tr></table></span><b>Your search of "<font color=green>stra</font>" matches 66 Models in the Home Receiver category.</b><br><br>Please select the specific model to continue:<table border=0 cellpadding=0 cellspacing=2><tr><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1000','Home Receiver')"><b>STRA</b>V1000</a></td><td width=15px></td><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1010','Home Receiver')"><b>STRA</b>V1010</a></td><td width=15px></td></tr></table</div></div></div>
<iframe name="Loader" id="Loader" src="blank.htm" style="display:none;height:150px;width:100%;border:1px solid silver"></iframe>
<a onclick="document.getElementById('Loader').style.display='';">*</a>
<script language="javascript">
//alert(parent.IQ.location.href);
</script>
</body>
</html>
|
|||||||