|
JavaScript - Function/button Not Working Correctly?
I read that you don't allow homework assignments to be posted, but this is only one small section of the assignment (1 page of 5), and I have a migraine, and I am utterly hopeless and lost (ha)...
I was wondering if there was any errors you could point out to me that would explain why the button isn't doing ANYTHING (i.e. not calculating the sum, average, or grade) when i click it. I'm new to js so I'm sure it could be pretty much any n00b error in the function code. But like I said any help would be greatly appreciated... Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="5A.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
var bNum= 1* document.getElementById("txtbNum").value;
var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;
if (Avg <= 60)
alphaGr="F";
if (Avg>60 && Avg <= 70)
alphaGr="D";
if (Avg>70 && Avg <= 80)
alphaGr="C";
if (Avg>80 && Avg <=90)
alphaGr="B";
if (Avg>90 && Avg <=100)
alphaGr="A";}
</script>
</head>
<body>
<div id="wrapper">
<div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />
Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />
<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />
<hr/>
Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>
Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />
Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />
</div>
</div>
</body>
</html>
Similar TutorialsHi, I wonder if someone can help! I am not a JavaScript programmer at all, so I cant really see what I am doing wrong with the following code... Just to explain I have 2 fields on a form that retrieve monetary data from a mysql database. The data is a monetary value e.g. 12.59. Which works fine as normal. I have been asked to hide this value depending on what the customers preferences are set to i.e Show Price = Yes or Show Price = No. Hopefully that makes sense. After lots of deliberation I realised that I couldnt hide the fields because the database called an error saying the price data was missing. So I thought change the field type to a 'password field' and the price data would still be accepted by the database. This thankfully worked and didnt break the php code. So I found some javascript code, chopped and pasted it and came up with the following script. This is called with an onclick event through a link. <script language="JavaScript"> function changetype(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; document.getElementById('price2jd').type='password'; else return false; } I thought the above would work but it doesn't. If I take out one of the lines "document.getElementById('price2jd').type='password';", then it does work. After more playing around I thought, create a function caller as shown below but again that doesnt work. The first function works but the second function doesnt seem to work. I shoved in an alert just to check that the second function was being called and it is. So what I gather is It seems to convert the first price field to a password type field but not the second field. Does anyone know why? is it some thing to do with the getElement and can only run once? I am using FireFox 3.6 if that will help <script type="text/javascript"> function checkprefs() { price1(); price2(); } </script> <script language="JavaScript"> function price1(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; else return true; } </script> <script language="JavaScript"> function price2(){ var mynewtestField2 = document.getElementById('hf_showmobprices'); if(mynewtestField2.value == "Yes") document.getElementById('price2jd').type='password'; else alert("alert2") } </script> Any guidance would be much appreciated john I'm a js noob but have managed to cobble together some code for a simple calculator. All the math works well, but changing the radio button doesn't have any effect. Basically, I have 4 set of equations (long if/then statements) - 2 are to be used when one radio button is checked, 2 if the other is checked. Code: <html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="JavaScript">
function temp(form)
{
var r1 = form.r1.value;
var GNW = parseFloat(form.GNW.value, 10);
var BNW = parseFloat(form.BNW.value, 10);
var totalfee = 0;
var netfee = 0;
var discount = 0;
//if the "old" radio button is selected, use the the next two if/then formulas
if (r1=1)
{
for brevity sake, I'll omit the first two if/then equations Code: //close out the "old" options
}
//use the "new" option
else if (r1=2)
{
// two more if/then statements
}
// this applies to all conditions
discount = totalfee - netfee;
form.totalfee.value = totalfee/4;
form.netfee.value = netfee/4;
form.discount.value = discount/4;
}
and now the radio buttons Code: <input name="r1" value=1 type="radio" checked="checked">Old (3m/3m) <input name="r1" value=2 type="radio" >Current (5m/5m)</p><p> hopefully the brevity makes the answer apparent, the full code is attached if I've left out a crucial detail. Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi Guys, I'm trying to do up a contact form that after a user submits the information, the drop down contact box will slide back up instead of redirecting to another page. The script works fine in Chrome and Safari, but Firefox and IE keeps redirecting to the php page. Hope someone can shed some light here, thanks! Html form: Code: <div class="left">
<!-- Login Form -->
<form class="clearfix" action="contactengine.php" name="cform" method="post">
<h4>Drop us a mail</h4>
<label class="grey" for="emailName">Name:</label>
<input class="field" type="text" name="emailName" id="emailName" value="" size="23" />
<label class="grey" for="emailFrom">Email Address:</label>
<input class="field" type="text" name="emailFrom" id="emailFrom" value="" size="23" />
<label class="grey" for="message">Message:</label>
<textarea type="text" name="message" id="message" size="23"></textarea>
<div class="clear"></div>
<input type="submit" rows="" cols="" name="submit" value="Submit" class="bt_register" />
<span id="messageSent">Message sent successfully!</span>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("cform");
frmvalidator.addValidation("emailName","req","Please enter your Name");
frmvalidator.addValidation("emailName","maxlen=20", "Max length for Name is 20");
frmvalidator.addValidation("emailFrom","maxlen=50", "Max length for email is 50");
frmvalidator.addValidation("emailFrom","req","Please enter your Email");
frmvalidator.addValidation("emailFrom","email","Please enter a valid email");
</script>
</div>
<div class="left right">
<!-- Register Form -->
<h4>Contact Details</h4>
<p class="grey"><b>XXX<br /></b>XXX<br />XXX<br />XXX</p>
<p class="grey">T: 999<br />F: 999</p>
<h5>Stalk Us</h5>
<a href="index.html"><img src="misc/fb.png" border="0" alt="Facebook" /></a> <a href="index.html"><img src="misc/twit.png" border="0" alt="Twitter" /></a>
</div>
</div>
</div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello there</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Contact Us</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
The Slider JS: Code: $(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Hey There | Contact us" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
//submission scripts
$('div#panel').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('emailFrom');
if (!filter.test(emailFrom.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.emailName.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.emailName.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.emailName.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.div#panel').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('contactengine.php',{emailName:$('#emailName').val(),
emailFrom:$('#emailFrom').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
$("#messageSent").show("slow");
setTimeout('$("#toggle a").toggle(); $("div#panel").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
});
The PHP Code: PHP Code: <?php $EmailFrom = "xxx@xxx.com"; $EmailTo = "xxx@xxx.com"; $Subject = Trim(stripslashes($_POST['Webmail'])); $Name = Trim(stripslashes($_POST['emailName'])); $Email = Trim(stripslashes($_POST['emailFrom'])); $Message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email Adress: "; $Body .= $Email; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, Webmail, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=success.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> I have some javascript code: first it gets string of the url in the address bar then it splits the string at the ? and grabs the right half it then makes an IFrame go to that string(which is yet another url I would manually insert) here is the code: Code: function redirect(){
var raw=window.document.location.href;
if(content_address_start=raw.indexOf("?")!=-1){
var content_address=raw.split("frame.html?")[1];
window.document.getElementById('content').src=content_address;
}
}
'content' is the id of the IFrame, and frame.html is the html file this code is inside. Ok, so everything works perfectly when I test this code offline, but as soon as I load it to my website, and the .src line occurs, it just loads a blank page in the IFrame. What could be causing this? Perhaps certain sites will not allow themselves to be inside iframes? Much thanks in advance. I hope I gave enough information and relayed my problem clearly. EDIT: It seems that the code works on other sites, just not youtube. Why would it do this and are there any ways around it? Code: I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Hey guys, My code works perfectly fine in internet explorer and google chrome, however, in firefox it does not. I have created an online form, but nothing happens when pressing the "submit" button firefox, whereas in other browsers, it works correctly. Also, the centering of the form is different. Please help me if possible. Thanks <!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>Airduct Cleaning</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <link href="text.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript"> function gosubmit(){ musimw.submit(); } </script> <style type="text/css"> #text { width: 250px; position: relative; margin-left: 200px; } </style> </head> <body leftmargin="0" topmargin="0"> <table width="998" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="147" valign="top"> <!----LEFT MENU---------> <? include "left_menu.php"; ?> </td> <td width="591" valign="top" colspan="1"> <!----TOP---------> <? include "top.php"; ?> <!----TITLE---------> <table width="100%" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="590" height="33" background="images/top_bg2.gif" valign="bottom"><img src="images/title_sub09_01.gif" /></td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> <!----CONTENT---------> <!----story------> <form action=sendmail2.php method=post name=musimw enctype=multipart/form-data onSubmit="return musimm_check(this);"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr style=" position: relative; margin-left: 28px;"> <td width="50"></td> <td><p><span class="stxt2">Call for a Free Estimate</span><br> <br> <img src="images/img25.gif" align="left"><strong>For a free estimate, call: </strong></p> <div id="text"> Office: Insert Office #<br /> Toll-Free: Insert Toll Free # <br /> Email: Insert Email<br /> <br><em>Or, submit the online form below.</em> </div> </td> </tr> <tr> <td width="50"></td> <td> <table width="530" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#EFEFEF"> <tr> <td width="10"></td> <td width="180" height="25">*First name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='fname'/></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Last name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='lname'/></td> </tr> <tr> <td></td> <td >Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ptel'/> <select name='pteltype'> <option value='Home'>Home</option> <option value='Work'>Work</option> </select></td> </tr> <tr> <td></td> <td >Cell Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ctel'/></td> </select></td> </tr> <tr> <td></td> <td height="25">*Email Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='email'/></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Type of Service</td> <td style="padding:10px 5px 5px 5px"><select name='bnametype'> <option value='Air Duct Cleaning'>Air Duct Cleaning</option> <option value='Dryer Vent Cleaning'>Dryer Vent Cleaning</option> <option value='Chimney Cleaning'>Chimney Cleaning</option> </select></td> </tr> <tr> <td></td> <td height="25">Square Footage<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='feet'/></td> </tr> <tr> <td></td> <td height="25">Approximate # of Ducts<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20"name='vent' /></td> </tr> <tr> <td></td> <td height="25">Number of furnaces</td> <td style="padding:10px 5px 5px 5px"><select name='furnaces'> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">*Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" class="inputPlain004" size="30" name='address'></td> <tr> <td></td> <td height="25">*City<br /></td> <td style="padding:10px 5px 5px 5px"><input name="city" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td></td> <td height="25">*State </td> <td style="padding:10px 5px 5px 5px"><select name='statetype'> <option value='State'>IL</option></td> </tr> <tr> <td></td> <td height="25">*Zip Code</td> <td style="padding:10px 5px 5px 5px"><input name="zip" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">Comments or Questions</td> <td style="padding:10px 5px 5px 5px"><textarea name='Comment' cols="45" rows="8"></textarea></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> </table> <!---BUTTON---> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" align="center"><a href="javascript:gosubmit()"><img src="images/bt_submit.gif"></a> <a href="#"><img src="images/bt_cancel.gif"></a></td> </tr> </table> </form> </td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> </td> <td width="260" valign="top"> <!----RIGHT--------> <? include "right_menu.php"; ?> </td> </tr> </table> <!------BOTTOM----------> <? include "foot.php"; ?> </body> </html> Hi There, I have recently completed making a website for my sister's wedding. I am quite new to the web design world, and have only taken 2 classes on the subject. I used a Javascript function that was provided to us in one of my HTML coding classes in order to automatically resize the (nesting?) div's according to how long the content in them is. This all seems to work perfectly fine in Google Chrome, as well as most versions of Internet Explorer - however, in some versions of internet explorer, and ALL versions of Firefox, this resize function does not seem to work. Since this coding was provided to me by a teacher (who is unfortunately in another country), I'm not sure what kinda of edit would make it so it would function in Firefox, or if there is a way to make in function in Firefox at all. I would appreciate if some of you could take a look at it, and let me know if you have any ideas/suggestions/advice, as to what is happening with the code/why it does not work in Firefox/some versions of Internet Explorer. The specific javascript code (which i assume is the issue here - please let me know if I'm wrong about it being the javascript that isn't working) is he PHP Code: function fnReset(){ document.getElementById('dTorso').style.height="380px"; document.getElementById('dMiddle').style.height="auto"; var middleHt=document.getElementById('dMiddle').scrollHeight; var maxHt=Math.max(380,middleHt); document.getElementById('dTorso').style.height=maxHt + "px"; document.getElementById('dMiddle').style.height=maxHt + "px"; } Which is then called to action he Code: <body onLoad="fnReset();> Also, in some versions of Firefox, the background image for the whole page isn't showing up either - any tips on why that is happening would also be amazing. Thank you so much for any help you may provide. This is a gift to my sister and her fiance, and I really want it to work well for them, and all their guests. Thanks! Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element. it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly? Here's my Code: Code: <script type='text/javascript'>
// Startup Script
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
}
function LoadEventListeners()
{
var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
// Create event Listeners for the alphabetic keys
for(var x = 0; x < Key_Table.length; x++)
{
Key_Table[x] = document.getElementById(Key_Table[x]);
Key_Table[x].addEventListener("click",
function(){
InsertChar(Key_Table[x]);
},
false);
}
}
function InsertChar(Char)
{
alert("Char is:" + Char);
// Textbox data
document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
}
</script>
Hi everyone. Here is the code I am using to flip an image 3 times (Blank -> X, X-> O and O back to blank) Code: function flipBox(img) {
var tmpname;
if(img.src=="http://www.riddlesforall.com/logic/n.gif") {
img.src = "http://www.riddlesforall.com/logic/x.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 1;
document.getElementById(img.name).value = 1;
} else if(img.src=="http://www.riddlesforall.com/logic/x.gif") {
var finaltest = checkDoubles(img.name);
if(finaltest=="false") {
img.src = "http://www.riddlesforall.com/logic/o.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 3;
document.getElementById(img.name).value = 3;
} else {
img.src = "http://www.riddlesforall.com/logic/n.gif";
}
} else if(img.src=="http://www.riddlesforall.com/logic/o.gif") {
img.src = "http://www.riddlesforall.com/logic/n.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 0;
document.getElementById(img.name).value = 0;
}
showVals();
}
I had it working, previously, and everything was fine, but now, for some odd reason I cannot figure out, it is changing the names of the image files to absurdly long gibberish, and I cannot flip any images at all, clicking does nothing. Here is an example of what it changes the names to: Code: <img src="data:image/gif;base64,R0lGODlhGQAZAIAAAP///wAAACH5BAEAAAAALAAAAAAZABkAAAIXhI+py+0Po5y02ouz3rz7D4biSJamWAAAOw==" height=20 width=20 id=1-0-0 name=A1B1 onclick="flipBox(this);" class=gridbox> There are 3 images - N.gif (blank) X.gif (An X) and O.gif I do not understand why it is changing the names like this? As I said, it was working fine before, and now this. Having trouble getting this plugin to work.. jparallax - see here for more info - http://webdev.stephband.info/parallax.html Now I have this plugin working separately, on its own page, just fine. see here - http://bit.ly/hPpSAC But when I went back, to my own page, and tried to incorporate it into the background of my site, I was able to get the look fine, but the movement isn't working. see here - http://bit.ly/ee52Iv I've tried everything I could to get it working.. Maybe someone here could troubleshoot? It would be a huge help, seriously. Thanks. Hello all, I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file. The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way. I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads. I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below. Code: <!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine
Peninsula & The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script>
// initialise the drop-down menus
runOnLoad(Dropdown.initialise);
</script>
</head>
<body>
<div id="wrapper">
<a href="tel://+61425859742"><div id="mobile_header"></div></a>
<a href="tel://+61425859742"><div id="phoneBlock"></div></a>
<div id="header"></div>
<div id="nav">
<ul class="dropdown">
<li>
<a href="index.html">Home</a>
</li>
<li>Electrical
<ul>
<li>
<a href="domestic_electrician.html">Domestic</a>
</li>
<li>
<a href="electrical_contractors.html">Commercial/Industrial</a>
</li>
</ul>
</li> <li>
<a href="air_conditioner_installation.html">Air Conditioners</a>
</li> <li>
<a href="solar_power_systems.html">Solar</a>
<ul>
<li><a href="solar_system_maintenance.html">Maintenance</a>
</li>
<li><a href="solar_energy_facts.html">About Solar</a>
</li>
</ul>
</li> <li>
<a href="b_type_gas_service.html">Type B Gas</a>
</li> <li>
<a href="formgenerator/forms/contact.html">Contact Us</a>
</li>
</ul>
</div>
<div id="content-2">
<div class="clear"> </div>
<div id="top_border"></div>
<div id="content-2-1">
<span class="blackheading">Watt You Need Electrical -
Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast</span>
<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can
take that extra bit of time and effort to make sure you get the best service and advice.
<br /><br />
If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a
split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best
quality job at a competitive price.
<br /><br />
Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>,
we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B
Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
<br /><br />
<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
</p>
</div>
<div id="bottom_border"></div>
</div>
<div id="footer">
<table class="tableFooter">
<tr><td>Watt You Need Electrical Pty. Ltd. © 2014</td></tr>
</table>
</div>
</div>
</body>
</html>
Code: /*
Dropdown.js
Creates touch-friendly drop-down menus
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the Dropdown object
var Dropdown = (function(){
// the delay, in milliseconds
var DELAY = 250;
// the list of menus
var menus = [];
// Initialises the drop-down menus.
function initialise(){
// listen for touch events on the document if appropriate
if ('createTouch' in document){
document.body.addEventListener('touchstart', handleTouchStart, false);
}
// loop over the menus, converting them
var menus = document.querySelectorAll('ul.dropdown');
for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);
}
/* Handles a touch start event. The parameter is:
*
* e - the event
*/
function handleTouchStart(e){
// determine whether any menu is open
var isOpen = false;
for (var i = 0; i < menus.length; i ++){
if (menus[i].isOpen) isOpen = true;
}
// return immediately if all menus are closed
if (!isOpen) return;
// move up the document tree until we reach the root node
var node = e.target;
while (node != null){
// return immediately if we are inside a drop-down menu
if (/\bdropdown\b/.test(node.className)) return;
// move onto the parent node
node = node.parentNode;
}
// close all menus
close();
}
/* Closes all menus except the specified menu. The parameter is:
*
* menu - a menu not to close; this parameter is optional
*/
function close(menu){
// loop over the menus, closing them
for (var i = 0; i < menus.length; i ++){
if (menus[i] != menu) menus[i].close();
}
}
/* Creates a drop-down menu. The parameter is:
*
* node - either the DOM node of the menu or the ID of the node
*/
function applyTo(node){
// fetch the DOM node if a string was supplied
if (typeof node == 'string') node = document.getElementById(node);
// create and store the new menu
menus.push(new Menu(node));
}
/* Creates a drop-down menu. The parameter is:
*
* node - the DOM node of the menu
*/
function Menu(node){
// store the node
this.node = node;
// update the class name
node.className += ' dropdownJavaScript';
// listen for mouse events
if ('addEventListener' in node){
node.addEventListener(
'mouseover', this.bind(this.handleMouseOver), false);
node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
node.addEventListener('click', this.bind(this.handleClick), false);
}else{
node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
node.attachEvent('onmouseout', this.bind(this.handleMouseOut));
node.attachEvent('onclick', this.bind(this.handleClick));
}
// listen for touch events if appropriate
if ('createTouch' in document){
node.addEventListener('touchstart', this.bind(this.handleClick), false);
}
}
// whether the menu is open
Menu.prototype.isOpen = false;
// the timeout
Menu.prototype.timeout = null;
/* Binds the specified function to the current object. The parameter is:
*
* f - the function
*/
Menu.prototype.bind = function(f){
// return the bound function
var thisObject = this;
return function(){ f.apply(thisObject, arguments); }
}
/* Handles a mouse over event. The parameters a
*
* e - the event
* immediate - true to open the menu without a delay
*/
Menu.prototype.handleMouseOver = function(e, immediate){
// clear the timeout
this.clearTimeout();
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// if the target is within a list item, set the timeout
if (item.nodeName == 'LI'){
this.toOpen = item;
this.timeout =
window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
}
}
// Handles a mouse out event.
Menu.prototype.handleMouseOut = function(){
// clear the timeout
this.clearTimeout();
// set the timeout
this.timeout = window.setTimeout(this.bind(this.close), DELAY);
}
/* Handles a click event. The parameter is:
*
* e - the event
*/
Menu.prototype.handleClick = function(e){
// close any other menus
close(this);
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// check that the target is within a list item
if (item.nodeName == 'LI'){
// check whether the item has a closed submenu
var submenu = this.getChildrenByTagName(item, 'UL');
if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){
// open the submenu
this.handleMouseOver(e, true);
// prevent the default action
if ('preventDefault' in e){
e.preventDefault();
}else{
e.returnValue = false;
}
}
}
}
// Clears the timeout.
Menu.prototype.clearTimeout = function(){
// clear the timeout
if (this.timeout){
window.clearTimeout(this.timeout);
this.timeout = null;
}
}
// Opens the last item hovered over.
Menu.prototype.open = function(){
// store that the menu is open
this.isOpen = true;
// loop over the list items with the same parent
var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
for (var i = 0; i < items.length; i ++){
// check whether there is a submenu
var submenu = this.getChildrenByTagName(items[i], 'UL');
if (submenu.length > 0){
// check whether the submenu should be opened or closed
if (items[i] != this.toOpen){
// close the submenu
items[i].className =
items[i].className.replace(/\bdropdownOpen\b/g, '');
this.close(items[i]);
}else if (!/\bdropdownOpen\b/.test(items[i].className)){
// open the submenu
items[i].className += ' dropdownOpen';
// determine the location of the edges of the submenu
var left = 0;
var node = submenu[0];
while (node){
left += node.offsetLeft;
node = node.offsetParent;
}
right = left + submenu[0].offsetWidth;
// move the submenu to the right of the item if appropriate
if (left < 0) items[i].className += ' dropdownLeftToRight';
// move the submenu to the left of the item if appropriate
if (right > document.body.clientWidth){
items[i].className += ' dropdownRightToLeft';
}
}
}
}
}
/* Closes the menus within the specified node. The parameter is:
*
* node - the node; if omitted, all menus are closed
*/
Menu.prototype.close = function(node){
// if no node was specified, close all menus
if (!node){
this.isOpen = false;
node = this.node;
}
// loop over the items, closing their submenus
var items = node.getElementsByTagName('li');
for (var i = 0; i < items.length; i ++){
items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
}
}
/* Returns an array containing the children of the specified node with the
* specified tag name. The parameters a
*
* node - the node
* tagName - the tag name
*/
Menu.prototype.getChildrenByTagName = function(node, tagName){
// initialise the list of children
var result = [];
// loop over the children, adding those with the right tag name to the list
for (var i = 0; i < node.childNodes.length; i ++){
if (node.childNodes[i].nodeName == tagName){
result.push(node.childNodes[i]);
}
}
// return the children
return result;
}
// return the public API
return {
initialise : initialise,
applyTo : applyTo
};
})();
Any help is appreciated. Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed. However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior. What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown. Here is the code I am using.. PHP Code: function searchCats(text) { // Set URL for ajax request var url = 'search_cats.php?search_text='+text; // Set up element we're modifying var results = document.getElementById('cat_list'); // Trim string text.replace(/^ss*/, '').replace(/ss*$/, ''); if (text.length < 3) { alert('Please enter a search string more than 2 characters.'); return; } // Send the request, giving it an anonymous function that acts as the oncomplete event ajaxRequest(url, (function(ajaxResponse) { /* Deal with results */ // First we remove all current childs while(results.hasChildNodes()) { while (results.childNodes.length >= 1) { results.removeChild(results.firstChild); } } if (ajaxResponse == '') { // Display no results text document.getElementById('no_results').style.display='block'; } else { // Hide no results text document.getElementById('no_results').style.display='none'; // Display loading text document.getElementById('loading_results').style.display='block'; // Check for occurence of cat seperator (if not there then we know we only have one results) var sep_found = ajaxResponse.indexOf('!@!'); if (sep_found === -1) { // One result only // Seperate ID & cat name var parts = ajaxResponse.split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } else { // Seperate cat data var cats = ajaxResponse.split('!@!'); // Loop through cat data for(i = 0; i < cats.length; i++) { // Seperate ID & cat name var parts = cats[i].split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } } } })); // Hide loading text document.getElementById('loading_results').style.display='none'; } Thanks guys! I found this script, and it works great: Code: <script type="text/javascript">
function disable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","true");
}
}
</script>
I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript">
function enable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","false");
}
}
</script>
But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
<input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
</fieldset>
</form>
Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" />
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
</fieldset>
<input type="radio" name="test" onclick="disable('D2')" />
<fieldset id="D2">
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
</fieldset>
<input type="radio" name="test" onclick="disable('D3')" />
<fieldset id="D3">
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
</fieldset>
</form>
And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo I'm really not that familiar with javascript. I work with an application that provides a very basic web page for the user to view customer info....on this page is a button that will open launch a URL that allows the assoc to view a survey the customer has filled out....the customer info is in a SQL db and the web page is populated from the db table. In the data we get a doc ID for the survey and in a javascript function we have the begining of the URL to the survey. When the button is clicked it completes the URL by pulling the doc ID from the db....that is basically the current process. We are now adding additional surveys to the db and will have different URLs...we would like to use the same process but I've not been able to get it to work. Can someone let me know if there is a way to make this work? Or if you have any other questions. Thanks Travis hye every1, can someone checkout my code because it is not working.at first the form is working until i add reset button then i suddenly not working anymore.thank you for your help. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radio Group Calculation</title>
<script type="text/javascript">
var brand=0;
function calc()
{
var form = document.forms.Calculator;
var bdpr = Number( getSelectedValue(form.elements.a) );
var bdft = Number( getSelectedValue(form.elements.b) );
var bdbs = Number( getSelectedValue(form.elements.c) );
var prft = Number( getSelectedValue(form.elements.d) );
var prbs = Number( getSelectedValue(form.elements.e) );
var ftbs = Number( getSelectedValue(form.elements.f) );
if ( isNaN(bdpr)||isNaN(bdft)||isNaN(bdbs)||isNaN(prft)||isNaN(prbs)||isNaN(ftbs) ){
alert("Please answer the question."); }
else{
brand=1+bdpr+bdft+bdbs;
price=1+1/bdpr+prft+prbs;
feature=1+1/bdft+1/prft+ftbs;
basic=1+1/bdbs+1/prbs+1/ftbs;
if(brand>price && brand>feature && brand>basic)
window.open('syg.html');
elseif(price>feature&&price>basic)
window.open('syg.html');
else(feature>basic)
window.open('syg.html');
}
}
function getSelectedValue(flds) {
var i = 0;
var len = flds.length;
while (i < len) {
if (flds[i].checked) {
return flds[i].value;
}
i++;
}
return "";
}
document.forms.Calculator.reset();
</script>
</head>
<body>
<br/><b>Please rank the functionality based on your preferences</b><br/><br />
<form name="Calculator" action="">
<label>Is brand important that price of a phone?</label><br />
<input name="a" type="radio" id="a_1" value="1">Not important<br />
<input name="a" type="radio" id="a_2" value="2">A little of important<br />
<input name="a" type="radio" id="a_3" value="3">Moderate important<br />
<input name="a" type="radio" id="a_4" value="4">Important<br />
<input name="a" type="radio" id="a_5" value="5">Very important<br />
<label >Is brand important than features of a phone?</label><br />
<input name="b" type="radio" id="b_1" value="1">Not important<br />
<input name="b" type="radio" id="b_2" value="2">A little of important<br />
<input name="b" type="radio" id="b_3" value="3">Moderate important<br />
<input name="b" type="radio" id="b_4" value="4">Important<br />
<input name="b" type="radio" id="b_5" value="5">Very important<br/>
<label >Is brand important than basic functions of a phone?</label><br />
<input name="c" type="radio" id="c_1" value="1">Not important<br />
<input name="c" type="radio" id="c_2" value="2">A little of important<br />
<input name="c" type="radio" id="c_3" value="3">Moderate important<br />
<input name="c" type="radio" id="c_4" value="4">Important<br />
<input name="c" type="radio" id="c_5" value="5">Very important<br />
<label >Is price important than features of a phone?</label><br />
<input name="d" type="radio" id="d_1" value="1">Not important<br />
<input name="d" type="radio" id="d_2" value="2">A little of important<br />
<input name="d" type="radio" id="d_3" value="3">Moderate important<br />
<input name="d" type="radio" id="d_4" value="4">Important<br />
<input name="d" type="radio" id="d_5" value="5">Very important<br />
<label >Is price important than basic function of a phone?</label><br />
<input name="e" type="radio" id="e_1" value="1">Not important<br />
<input name="e" type="radio" id="e_2" value="2">A little of important<br />
<input name="e" type="radio" id="e_3" value="3">Moderate important<br />
<input name="e" type="radio" id="e_4" value="4">Important<br />
<input name="e" type="radio" id="e_5" value="5">Very important<br />
<label >Is features important than basic func. of a phone?</label><br /></td>
<input name="f" type="radio" id="f_1" value="1"> Not important<br />
<input name="f" type="radio" id="f_2" value="2">A little of important<br />
<input name="f" type="radio" id="f_3" value="3">Moderate important<br />
<input name="f" type="radio" id="f_4" value="4">Important<br />
<input name="f" type="radio" id="f_5" value="5">Very important<br />
</form>
<input type="button" onclick="calc()" value="Next" />
<input type="reset" value="Clear">
</body>
</html>
I've never had this problem in the past and I am now stumped. I've written a fairly long script to calculate numbers for a web based Diabetes calculator but for some reason the "Calculate" button does nothing when using Chrome, Opera or Safari for iOS. It does work when using IE, Firefox and Safari for PC. I've looked everywhere and found nothing but some references to an 'onclick' problem in Chrome. My problem is that the same method has always worked in the past and is still working in those scripts now so that can't be the issue. What is different about THIS button that is breaking it? Button WORKS here (IE, Chrome, Firefox, Safari-PC & iOS & Opera): http://jdrinc.webatu.com/FICC.html But DOES NOT work here (Chrome, Safari-iOS & Opera): http://jdrinc.webatu.com/D-Calc.html The second link DOES work in IE, Firefox & Safari-PC. I don't see a difference in the method that I'm using in either of these. Does anyone know what I am doing wrong? Here is the html with the script that is NOT working: Code: <html>
<head>
<title>
D-Calc
</title>
<style type="text/css">
table
{
border:2px solid black;
border-collapse:collapse;
}
th
{
border:2px solid black;
border-collapse:collapse;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
}
td
{
border:2px solid black;
border-collapse:collapse;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
}
.inputlabel
{
background-color: #6CC417;
}
.outputlabel
{
background-color: #6698FF;
}
.inputbox
{
border:0px inset blue;
background-color: #FFFFFF;
border-color: #FFFFFF;
text-align: center;
font-weight: bold;
width: 100px;
}
.outputbox
{
border:0px inset blue;
background-color: #FFFFFF;
border-color: #FFFFFF;
text-align: center;
font-weight: bold;
width: 100px;
}
</style>
<script type="text/javascript">
function Calculate()
{
//input variables
var B01, B02, B03, B04, B05, B06, B07, B08, B09, B10, B11
//output variables
var B12, B13, B14, B15, B16, B17, B18, B19, B20, B21, B22, B23, B24, B25, B26
//correction sensitivity variable
var CSV
//new blood glucose
var NBG
//bloodsugar-carbohydrate ratio
var BCR
B01=eval(document.DCalcForm.B01.value);
B02=eval(document.DCalcForm.B02.value);
BCR=(B02/B01);
B03=eval(document.DCalcForm.B03.value);
B04=eval(document.DCalcForm.B04.value);
B05=eval(document.DCalcForm.B05.value);
B06=eval(document.DCalcForm.B06.value);
B07=eval(document.DCalcForm.B07.value);
B08=eval(document.DCalcForm.B08.value);
B09=eval(document.DCalcForm.B09.value);
B10=eval(document.DCalcForm.B10.value);
B11=eval(document.DCalcForm.B11.value);
B12=(B10*(B03/100));
B13=(B11*(B04/100));
B14=(B09+B12+B13);
B15=(B09);
B16=(B12+B13);
if (B07<(B05+(B06+1)) && B07>(B05-(B06+1)))
{
CSV=(0);
}
else if (B07>(B05+B06))
{
CSV=(B06);
}
else if (B07<(B05-B06))
{
CSV=(-1*B06);
}
if (CSV==0)
{
B17=0;
}
else
{
B17=((B07-(B05+CSV))/B02);
}
B18=((B12*(B03/100))/B01);
B19=((B13*(B04/100))/B01);
B20=(B09/B01);
if (CSV=0)
{
B21=((B18+B19+B20)-B08);
}
else
{
B21=((B17+B18+B19+B20)-B08);
}
B22=((B17+B20)-B08);
B23=(B18+B19);
if (B21==0)
{
B24=0;
}
else
{
B24=((B22/B21)*100);
}
if (B21==0)
{
B25=0;
}
else
{
B25=((B23/B21)*100);
}
NBG=(B07+((B09+B12+B13)*BCR));
if (B07<(B05+(B06+1)) && B07>(B05-(B06+1)))
{
CSV=(0);
}
else if (B07>(B05+B06))
{
CSV=(B06);
}
else if (B07<(B05-B06))
{
CSV=(-1*B06);
}
if (CSV==0)
{
B26=0;
}
else
{
B26=(((B05+CSV)-NBG)/BCR);
}
document.DCalcForm.B12.value=(Math.round(B12*100))/100 + ' g';
document.DCalcForm.B13.value=(Math.round(B13*100))/100 + ' g';
document.DCalcForm.B14.value=(Math.round(B14*100))/100 + ' g';
document.DCalcForm.B15.value=(Math.round(B15*100))/100 + ' g';
document.DCalcForm.B16.value=(Math.round(B16*100))/100 + ' g';
if (B17<0)
{
document.DCalcForm.B17.value='0 unit(s)';
}
else
{
document.DCalcForm.B17.value=(Math.round(B17*100))/100 + ' unit(s)';
}
if (B18<0)
{
document.DCalcForm.B18.value='0 unit(s)';
}
else
{
document.DCalcForm.B18.value=(Math.round(B18*100))/100 + ' unit(s)';
}
if (B19<0)
{
document.DCalcForm.B19.value='0 unit(s)';
}
else
{
document.DCalcForm.B19.value=(Math.round(B19*100))/100 + ' unit(s)';
}
if (B20<0)
{
document.DCalcForm.B20.value='0 unit(s)';
}
else
{
document.DCalcForm.B20.value=(Math.round(B20*100))/100 + ' unit(s)';
}
if (B21<0)
{
document.DCalcForm.B21.value='0 unit(s)';
}
else
{
document.DCalcForm.B21.value=(Math.round(B21*100))/100 + ' unit(s)';
}
if (B22<0)
{
document.DCalcForm.B22.value='0 unit(s)';
}
else
{
document.DCalcForm.B22.value=(Math.round(B22*100))/100 + ' unit(s)';
}
if (B23<0)
{
document.DCalcForm.B23.value='0 unit(s)';
}
else
{
document.DCalcForm.B23.value=(Math.round(B23*100))/100 + ' unit(s)';
}
if (B24>100)
{
document.DCalcForm.B24.value='100 %';
}
else if (B24<0)
{
document.DCalcForm.B24.value='0 %';
}
else
{
document.DCalcForm.B24.value=(Math.round(B24*100))/100 + ' %';
}
if (B25>100)
{
document.DCalcForm.B25.value='100 %';
}
else if (B25<0)
{
document.DCalcForm.B25.value='0 %';
}
else
{
document.DCalcForm.B25.value=(Math.round(B25*100))/100 + ' %';
}
if (B26<0)
{
document.DCalcForm.B26.value='0.00 g';
}
else
{
document.DCalcForm.B26.value=(Math.round(B26*100))/100 + ' g';
}
// document.write('B01 = '+B01+'<br>');
// document.write('B02 = '+B02+'<br>');
// document.write('B03 = '+B03+'<br>');
// document.write('B04 = '+B04+'<br>');
// document.write('B05 = '+B05+'<br>');
// document.write('B06 = '+B06+'<br>');
// document.write('B07 = '+B07+'<br>');
// document.write('B08 = '+B08+'<br>');
// document.write('B09 = '+B09+'<br>');
// document.write('B10 = '+B10+'<br>');
// document.write('B11 = '+B11+'<br>');
// document.write('B12 = '+B12+'<br>');
// document.write('B13 = '+B13+'<br>');
// document.write('B14 = '+B14+'<br>');
// document.write('B15 = '+B15+'<br>');
// document.write('B16 = '+B16+'<br>');
// document.write('B17 = '+B17+'<br>');
// document.write('B18 = '+B18+'<br>');
// document.write('B19 = '+B19+'<br>');
// document.write('B20 = '+B20+'<br>');
// document.write('B21 = '+B21+'<br>');
// document.write('B22 = '+B22+'<br>');
// document.write('B23 = '+B23+'<br>');
// document.write('B24 = '+B24+'<br>');
// document.write('B25 = '+B25+'<br>');
// document.write('B26 = '+B26+'<br>');
// document.write('BCR = '+BCR+'<br>');
// document.write('CSV = '+CSV+'<br>');
// document.write('NBG = '+NBG+'<br>');
}
</script>
</head>
<body>
<center>
<form name=DCalcForm>
<table name="table" id="table" class="table">
<tr name="01" id="01" class="">
<td name="A01" id="A01" class="inputlabel">
INSULIN/CARBOHYDRATE RATIO
</td>
<td name="B01" id="B01" class="">
<input name="B01" id="B01" class="inputbox" value="10" type="number">
</td>
<td name="C01" id="C01" class="">
</td>
</tr>
<tr name="02" id="02" class="">
<td name="A02" id="A02" class="inputlabel">
INSULIN/BG RATIO
</td>
<td name="B02" id="B02" class="">
<input name="B02" id="B02" class="inputbox" value="35" type="number">
</td>
<td name="C02" id="C02" class="">
</td>
</tr>
<tr name="03" id="03" class="">
<td name="A03" id="A03" class="inputlabel">
PROTEIN RATIO
</td>
<td name="B03" id="B03" class="">
<input name="B03" id="B03" class="inputbox" value="40" type="number">
</td>
<td name="C03" id="C03" class="">
</td>
</tr>
<tr name="04" id="04" class="">
<td name="A04" id="A04" class="inputlabel">
FAT RATIO
</td>
<td name="B04" id="B04" class="">
<input name="B04" id="B04" class="inputbox" value="10" type="number">
</td>
<td name="C04" id="C04" class="">
</td>
</tr>
<tr name="05" id="05" class="">
<td name="A05" id="A05" class="inputlabel">
TARGET BLOOD GLUCOSE
</td>
<td name="B05" id="B05" class="">
<input name="B05" id="B05" class="inputbox" value="100" type="number">
</td>
<td name="C05" id="C05" class="">
</td>
</tr>
<tr name="06" id="06" class="">
<td name="A06" id="A06" class="inputlabel">
CORRECTION RANGE/SENSITIVETY
</td>
<td name="B06" id="B06" class="">
<input name="B06" id="B06" class="inputbox" value="20" type="number">
</td>
<td name="C06" id="C06" class="">
</td>
</tr>
<tr name="07" id="07" class="">
<td name="A07" id="A07" class="inputlabel">
CURRENT BLOOD GLUCOSE
</td>
<td name="B07" id="B07" class="">
<input name="B07" id="B07" class="inputbox" value="100" type="number">
</td>
<td name="C07" id="C07" class="">
</td>
</tr>
<tr name="08" id="08" class="">
<td name="A08" id="A08" class="inputlabel">
INSULIN ON BOARD
</td>
<td name="B08" id="B08" class="">
<input name="B08" id="B08" class="inputbox" value="0" type="number">
</td>
<td name="C08" id="C08" class="">
</td>
</tr>
<tr name="09" id="09" class="">
<td name="A09" id="A09" class="inputlabel">
CARBOHYDRATES
</td>
<td name="B09" id="B09" class="">
<input name="B09" id="B09" class="inputbox" value="0" type="number">
</td>
<td name="C09" id="C09" class="">
</td>
</tr>
<tr name="10" id="10" class="">
<td name="A10" id="A10" class="inputlabel">
PROTEIN
</td>
<td name="B10" id="B10" class="">
<input name="B10" id="B10" class="inputbox" value="0" type="number">
</td>
<td name="C10" id="C10" class="">
</td>
</tr>
<tr name="11" id="11" class="">
<td name="A11" id="A11" class="inputlabel">
FAT
</td>
<td name="B11" id="B11" class="">
<input name="B11" id="B11" class="inputbox" value="0" type="number">
</td>
<td name="C11" id="C11" class="">
</td>
</tr>
<tr name="12" id="12" class="">
<td name="A12" id="A12" class="outputlabel">
CARBS FROM PROTEIN
</td>
<td name="B12" id="B12" class="">
<input name="B12" id="B12" class="outputbox" value="" type="number" readonly>
</td>
<td name="C12" id="C12" class="">
</td>
</tr>
<tr name="13" id="13" class="">
<td name="A13" id="A13" class="outputlabel">
CARBS FROM FAT
</td>
<td name="B13" id="B13" class="">
<input name="B13" id="B13" class="outputbox" value="" type="number" readonly>
</td>
<td name="C13" id="C13" class="">
</td>
</tr>
<tr name="14" id="14" class="">
<td name="A14" id="A14" class="outputlabel">
TOTAL CARBOHYDRATES
</td>
<td name="B14" id="B14" class="">
<input name="B14" id="B14" class="outputbox" value="" type="number" readonly>
</td>
<td name="C14" id="C14" class="">
</td>
</tr>
<tr name="15" id="15" class="">
<td name="A15" id="A15" class="outputlabel">
CARBS TO BOLUS NOW
</td>
<td name="B15" id="B15" class="">
<input name="B15" id="B15" class="outputbox" value="" type="number" readonly>
</td>
<td name="C15" id="C15" class="">
</td>
</tr>
<tr name="16" id="16" class="">
<td name="A16" id="A16" class="outputlabel">
CARBS FOR EXTENDED BOLUS
</td>
<td name="B16" id="B16" class="">
<input name="B16" id="B16" class="outputbox" value="" type="number" readonly>
</td>
<td name="C16" id="C16" class="">
</td>
</tr>
<tr name="17" id="17" class="">
<td name="A17" id="A17" class="outputlabel">
CORRECTION BOLUS
</td>
<td name="B17" id="B17" class="">
<input name="B17" id="B17" class="outputbox" value="" type="number" readonly>
</td>
<td name="C17" id="C17" class="">
</td>
</tr>
<tr name="18" id="18" class="">
<td name="A18" id="A18" class="outputlabel">
PROTEIN BOLUS
</td>
<td name="B18" id="B18" class="">
<input name="B18" id="B18" class="outputbox" value="" type="number" readonly>
</td>
<td name="C18" id="C18" class="">
</td>
</tr>
<tr name="19" id="19" class="">
<td name="A19" id="A19" class="outputlabel">
FAT BOLUS
</td>
<td name="B19" id="B19" class="">
<input name="B19" id="B19" class="outputbox" value="" type="number" readonly>
</td>
<td name="C19" id="C19" class="">
</td>
</tr>
<tr name="20" id="20" class="">
<td name="A20" id="A20" class="outputlabel">
CARB BOLUS
</td>
<td name="B20" id="B20" class="">
<input name="B20" id="B20" class="outputbox" value="" type="number" readonly>
</td>
<td name="C20" id="C20" class="">
</td>
</tr>
<tr name="21" id="21" class="">
<td name="A21" id="A21" class="outputlabel">
TOTAL BOLUS
</td>
<td name="B21" id="B21" class="">
<input name="B21" id="B21" class="outputbox" value="" type="number" readonly>
</td>
<td name="C21" id="C21" class="">
</td>
</tr>
<tr name="22" id="22" class="">
<td name="A22" id="A22" class="outputlabel">
UNITS TO DELIVER NOW
</td>
<td name="B22" id="B22" class="">
<input name="B22" id="B22" class="outputbox" value="" type="number" readonly>
</td>
<td name="C22" id="C22" class="">
</td>
</tr>
<tr name="23" id="23" class="">
<td name="A23" id="A23" class="outputlabel">
UNITS TO EXTEND
</td>
<td name="B23" id="B23" class="">
<input name="B23" id="B23" class="outputbox" value="" type="number" readonly>
</td>
<td name="C23" id="C23" class="">
</td>
</tr>
<tr name="24" id="24" class="">
<td name="A24" id="A24" class="outputlabel">
PERCENT TO DELIVER NOW
</td>
<td name="B24" id="B24" class="">
<input name="B24" id="B24" class="outputbox" value="" type="number" readonly>
</td>
<td name="C24" id="C24" class="">
</td>
</tr>
<tr name="25" id="25" class="">
<td name="A25" id="A25" class="outputlabel">
PERCENT TO EXTEND
</td>
<td name="B25" id="B25" class="">
<input name="B25" id="B25" class="outputbox" value="" type="number" readonly>
</td>
<td name="C25" id="C25" class="">
</td>
</tr>
<tr name="26" id="26" class="">
<td name="A26" id="A26" class="outputlabel">
MORE CARBS NEEDED
</td>
<td name="B26" id="B26" class="">
<input name="B26" id="B26" class="outputbox" value="" type="number" readonly>
</td>
<td name="C26" id="C26" class="">
</td>
</tr>
</table>
<br>
<input type="button" value="Calculate" name="CalculateButton" onclick="Calculate()">
</form>
</body>
</html>
P.S. I am by no means a professional and am aware that there might be better ways of doing this. I am still learning. I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
onclick="CB(document.getElementById('output').value); return false;"
</form name="I5" width="38" height="38">
I have a button that works fine in every browser EXCEPT IE8, and I can't seem to figure out why, I would assume its a Jvascript issue, here's the code, any help would be great thanks guys... THE button that doesn't work in IE is the one with the value "Proceed to your order" at the bottom, the other two, delete and recalculate work fine.??? Code: <form action="/cart" method="post" id="form">
<table width="100%" cellspacing="0" cellpadding="0" style="margin-top:30px">
<thead class="tableTitle"><tr>
<td width="20"><!--<input type="checkbox" value="" checked="" onclick="checkAll(this)" />--></td>
<td>Title</td>
<td>Quantity</td>
<td>Price</td>
</tr></thead><tbody class="tableBody">
<?foreach ($goods as $k => $v){$randId = randId();?>
<tr>
<td><input type="checkbox" name="deleteCheckbox[]" class="checkboxes" value="<?=$v['id']?>" /></td>
<td width="400"><strong><?=$v['title']?></strong><br />
Color: <select onchange="updateExtras('color', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify color</option>
<?if (count($v['colors'])) foreach ($v['colors'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['colorId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
Size:<select onchange="updateExtras('size', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify size</option>
<?if (count($v['sizes'])) foreach ($v['sizes'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['sizeId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
<?if ($_SESSION['cartDetails'][$v['id']]['size']){?>
<div style="font-size:0.9em; margin-top:5px"><strong>Size</strong>: <?=$_SESSION['cartDetails'][$v['id']]['size']?></div>
<?}?>
<?if ($_SESSION['cartDetails'][$v['id']]['color']){?>
<strong>Color</strong>: <?=$_SESSION['cartDetails'][$v['id']]['color']?><?}?>
</td>
<td width="100"><input type="text" value="<?=$v['q']?>" size="5" name="ammounts[]" /></td>
<td>$<span id="<?=$randId?>"><?=$v['totalPrice']?></span> CAD<br /><span style="color:#ccc">($<?=$v['price']?> per each)</span></td>
</tr>
<?}?>
<tr class="totalPrice">
<td></td>
<td width="400" style="font-size:1em; font-style:italic">Total price</td>
<td width="100"></td>
<td style="font-size:1em; font-style:italic">$<span id="totalPriceHere"><?=$totalPrice?></span> CAD</td>
</tr>
</tbody>
<tfoot class="tableFoot"><tr><td colspan="4"></td></tr></tfoot>
</table>
<div style="margin-top:10px;">
<input type="submit" value="Delete selected" id="deleteButton" class="button left" />
<a href="/cart/proceed" onclick="
var stop = false;
$('.checkMe').each(function(){
if ($(this).attr('value') == 0) {stop = true}
return
})
if (stop) {
$('#alert').html('Choose colors and sizes for each item to proceed!');
return false
}
return true
"><input type="button" value="Proceed to your order" class="button right" /></a>
<a href="#" onclick="$('#form').attr('action', '/cart/recalc'); $('#form').submit()"><input type="button" value="Recalculate" style="margin-right:10px" class="button right" /></a>
|
|||||||