|
JavaScript - Image Not Resetting Properly
I have 3 images that I am trying to swap in and out with eachother. It starts off with the "Good Afternoon.gif" then I have a checkbox that changes it from and switches between the "Eyeball.jpg" and the "Smileys.gif" without going back to the "Good Afternoon.gif. That works perfectly fine and as intended.
What does not work is my reset button, it unchecks the checkbox that I created as it should be does not set the image back to the "Good Afternoon.gif". I created goodAfternoon and a goodAfternoonFinal images because I am telling the code to to goodAfternoon.src=Eyeball.src; so I have the goodAfternoonFinal to change it back to the original pic. What am I doing wrong here? Code: ml>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:F0F0F0;
}
</style>
<script type="text/javascript">
//Pre loading images to be used with check boxes.
function preLoad(){
Eyeball= new Image(400,200)
Eyeball.src = "Eyeball.jpg"
Smileys = new Image(400,200)
Smileys.src = "Smileys.gif"
goodAfternoon = new Image(400,200)
goodAfternoon.src = "Good Afternoon.gif"
goodAfternoonFinal = new Image(400,200)
goodAfternoonFinal.src = "Good Afternoon.gif"
}
</script>
</head>
<body onLoad="javascript:preLoad()">
"Check" me out:) <input type="checkbox" id="cb1" onClick="validate()" />
<img src="Good Afternoon.gif" name="goodAfternoon">
<input type="button" id="cb2" value="RESET" onClick="reset()"/>
<script type="text/javascript">
function validate(){
if(document.getElementById("cb1").checked){
document.goodAfternoon.src=Eyeball.src;
}else{
document.goodAfternoon.src=Smileys.src;
}
}
function reset(){
cb1.checked=false;
documentgoodAfternoon.src=goodAfternoonFinal.src; //I am expecting this to set it back to the good afternoon pic.
}
document.write("</br></br></br></br>");
document.write("Hello, thank you for visiting my webpage I hope you like it.");
</script>
</body>
</html>
Similar TutorialsI have a form with a text box that is greyed out unless a checkbox is checked. The problem is if the checkbox is checked and this enables the text box to enter data and I hit reset, the text box does not reset and turn grey. It allows data to be entered. I have both the html reset button and the javascript clear form, but neither seem to work. How do I reset the text box to grey as well if reset is hit? Code: <form method="post" action="" name="resetproblemform" enctype="text/plain" onReset="return confirm('Do you really want
to reset the form?')">
<div>Check Which Apply:
LineTest1<input type="checkbox" name="status" value="1" style="margin-left:10px; margin-right:40px"
onclick="this.form.line1test2.disabled = !this.checked;"/>
Line1Test2<input type="text" name="line1test2" style="margin-left:10px; margin-right:67px" maxlength="9"
disabled="disabled" size="9"/> </div>
<div class="break10" style="margin-left:140px">
Line2Test1<input type="checkbox" name="status" value="3" style="margin-left:10px; margin-right:40px"
onclick="this.form.line2test2.disabled = !this.checked;"/>
Line2Test2<input type="text" name="line2test2" style="margin-left:10px; margin-right:67px" maxlength="9"
disabled="disabled" size="9"/> </div>
<div class="break10" style="margin-left:140px">Line3Test1<input type="checkbox" name="status" value="5"
style="margin-left:10px"/> </div>
<input type="submit" value="Submit" />
<input type="button" value="Reset JAVA" onClick="this.form.reset()" />
<input type="reset" value="Rest HTML" />
</form>
First of all, hi everyone I'm new to the forum and relatively new to javascript. I just completed a course in it at university and I did pretty well but I think we all know "real life" coding is a whole other story. Now, down to business. I'm writing up a script, derived from a sitepoint example (available for download here). I want to bring up a dynamic tool tip, on mousover of a thumbnail, that contains one large picture. The style for the tooltip is handled in the css sheet and therefor not featured here. I am also using the sitepoint Core library, similarly available for download at the aforementioned link. I've been working on this for a while with no success. Here's what I know for certain so far: the showTipListener is running on mouseover the span and the img are being created the img is receiving the correct src the img is being attached to the span the span is being attached to the thumbnail What I don't know is why the tooltip never appears and why the default action is not being canceled. Any thoughts would be greatly appreciated, thanks in advance for your help! I've published the page here so that you all can observe it's behavior. An of course here's the code Code: // JavaScript Document
var Tooltips =
{
//contains the source for each full sized image
fullImages: [
"PhotoPortfolio/AdriSelfPortraits.jpg",
"PhotoPortfolio/AmyUtah.jpg",
"PhotoPortfolio/AveQ.jpg",
"PhotoPortfolio/Bingham.jpg",
"PhotoPortfolio/BinghamD12.jpg",
"PhotoPortfolio/Campus.jpg",
"PhotoPortfolio/Campus2.jpg",
"PhotoPortfolio/Clambake.jpg",
"PhotoPortfolio/Construction.jpg",
"PhotoPortfolio/DadInKobeJapan.jpg",
"PhotoPortfolio/DadInTheGarden.jpg",
"PhotoPortfolio/HesperSongWriter.jpg",
"PhotoPortfolio/IrishCoast.jpg",
"PhotoPortfolio/NathanHale.jpg",
"PhotoPortfolio/NorthConway.jpg",
"PhotoPortfolio/Oreo.jpg",
"PhotoPortfolio/Portsmouth.jpg",
"PhotoPortfolio/Portsmouth2.jpg",
"PhotoPortfolio/Portsmouth3.jpg",
"PhotoPortfolio/RockClimbing.jpg",
"PhotoPortfolio/RockClimbing2.jpg",
"PhotoPortfolio/RockClimbing3.jpg",
"PhotoPortfolio/RockClimbing4.jpg",
"PhotoPortfolio/RockClimbing5.jpg",
"PhotoPortfolio/RockClimbing6.jpg",
"PhotoPortfolio/RockClimbing7.jpg",
"PhotoPortfolio/Seaport.jpg",
"PhotoPortfolio/Seaport2.jpg",
"PhotoPortfolio/Snowbird.jpg",
"PhotoPortfolio/VanderbuiltSkies.jpg",
"PhotoPortfolio/VanderbuiltSkies2.jpg",
],
init: function()
{
//collects all the images on the page with the RollOverMe class and stroes them in image
var image = Core.getElementsByClass("RollOverMe");
//adds the event listener to all images' mouseover and mouseout events
for (i=0; i<image.length; i++)
{
Core.addEventListener(image[i], "mouseover", Tooltips.showTipListener);
Core.addEventListener(image[i], "mouseout", Tooltips.hideTipListener);
}
},
showTip: function(image)
{
//retrieve the class number and strip out the string characters, store the number to a variable
var sourceMatch = /(^| )source(\d+)( |$)/.exec(image.className);
var source = parseInt(sourceMatch[2], 10);
//creates a span element
var tip = document.createElement("span");
//assigns it to the class tooltip
tip.className = "tooltip";
//creates an image
var tipImage = document.createElement('img');
//sets the src attribute to appropriate element in the fullImages property using the variable source
tipImage.src = Tooltips.fullImages[source];
//attaches the image to the span
tip.appendChild(tipImage);
//attaches the span to the thumbnail
image.appendChild(tip);
//sets the tooltip property to display the span
image._tooltip = tip;
// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "relative";
},
hideTip: function(image)
{
if (image._tooltip)
{
image.removeChild(image._tooltip);
image._tooltip = null;
// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "static";
}
},
showTipListener: function(event)
{
Tooltips.showTip(this);
Core.preventDefault(event);
},
hideTipListener: function(event)
{
Tooltips.hideTip(this);
}
};
Core.start(Tooltips)
So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie. Code: var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
return document.getElementById(id);
}
var temperature = function (){//This function converts the value the user provides
if($("to_celcius").checked == true)//if checked, then do this conversion
{
$("degrees_celcius").disabled = true;
var far = parseFloat($("degrees_fahrenheit").value );
if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
$("degrees_celcius").value = far_cel;
}else ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
{
$("degrees_fahrenheit").disabled = true;
var cell = parseFloat($("degrees_celcius").value);
if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var cel_far = Math.round(cell * 9/5 + 32);
$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
}
}
function reset()//resets the text box fields
{
$("foofoo").reset();
}
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;
}
Code: <body>
<form id="foofoo" name="foofoo">
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" name="cat" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" name="poo" class="disabled" /><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</form>
</body>
Hello all, First time back here in a while, but I'm trying to get proficient in JS. I want to make my input element reset its value attribute to blank, which is originally set to "your e-mail". You know the effect you see on forms that have text in them, then with the onclick attribute, you can clear the text in the box. So, after looking around trying to find out what to do, here's what I've attempted. HTML Code: <form id="emailbox" name="form1" method="post" action="">
<div>
<input type="text" name="go" id="go" value="your e-mail" onclick="removeText()"/>
<input type="submit" value="Join" />
</div>
</form>
JS: Code: <script type="text/javascript">
function removeText(){
var form = document.getElementById['emailbox'];
var name = form.elements['go'].value;
}
</script>
What do I do next to complete my objective? I have a page where a user can select (via check boxes) several categories. Each category is related to a set of possible options (radio buttons) that have numeric values. When one of the options (radio button) is selected, the amount will appear in a text box (input type="text"). The numeric value in the text box will update depending on what category options are selected. However, when the checkbox is deselected, the radio boxes in the <div> are not displayed and I need to remove (reset) the radio button values from the value seen in the text box. Here are some snippets to hopefully expound on what I would like to do. Code: <script type="text/javascript">
var amountNotice = 0;
function notice(options)
{
amountNotice = parseInt(options);
calculateTotal();
}
function calculateTotal()
{
totalAmount = amountNotice;
document.getElementById("total").value = totalAmount.toFixed(2);
}
function toggle(chkbox, group, associatedValues)
{
var visSetting;
if (chkbox.checked == true)
document.getElementById(group).style.display = "inline";
else
{
document.getElementById(group).style.display = "none";
uncheckRadio(associatedValues);
}
document.getElementById(group).style.display = visSetting;
}
function uncheckRadio(associatedValues)
{
for(var i = 0; i < document.getElementById(associatedValues).length; i++)
{
if (associatedValues[i].checked == true)
associatedValues[i].checked == false;
}
calculateTotal();
}
</script>
<style type="text/css">
#groupNotice {display: none}
</script>
.
.
<input type="button" onClick="calculateTotal()" value="Calculate"><br>
<div id="groupNotice">
<b>Required Notice</b>:
<input type="radio" name="Note" onClick="notice(this.value)" value="0"> None
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Day ($2)
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Call ($2)<br>
</div>
<form name="CostEstimate" method="post" action="calculator.php">
<input type="checkbox" onclick="toggle(this, 'groupNotice', 'Note'); display('groupNotice','inline')" name="Notice" value=""> Notice
</form>
Everything works except for my uncheckRadio function - not sure if I am identifying the elements correctly, or if I need a totally new approach. My thinking is that the function must be accessed by the checkbox onClick call. Previously I had tried calling uncheckRadio from the notice function before I recognized is was not an appropriate location. Any assistance is greatly appreciated. - c Hello everyone, I am completely new to javascripts. I want to have a count down timer on my webpage. I already found a script, but it does not do everything I want it to do. I couldn't find a script that did everything I need. I need it to do the following things: - Use the time zone GMT+1 - Reset everyday at a specific time - From 15:00 till 17:30: A countdown (so it shows 2 hours and 30 minutes from the start and count's down to 0 (which will be 17:30) - During 15:00 till 17:30 it shows: "The game is playing" - Once it is 17:30 I want it to reset and countdown till the next day 15:00 - From 17:30 till 15:00 next day it says: "The game will start in" So it is actually 2 countdown clocks in one javascript. One countdown from 15:00 to 17:30 (whilst the game is playing) and one directly starting after it from 17:30 till 15:00 next day. But both are displayed on the same spot. The countdown will be in text. No buttons or fancy images etc. Hope you can help me out. Thanks Code: <html>
<head>
<script type = "text/javascript">
function getSeconds() {
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var ft = midnight.getTime() + 86400000; // add one day
var diff = ft - time;
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);
}
var timeInSecs;
var ticker;
function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required
}
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
+ " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = "The game will start in " + result;
}
</script>
</head>
<body onload = "getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
</html>
Reply With Quote 01-07-2015, 10:11 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts First of all, move your JavaScript where it belongs: Just before the </body> tag. Then you don't need stuff such as onload='....' Here's my attempt at it: Code: <!DOCTYP html>
<html>
<head>
<title>Game play starts at 17:30</title>
</head>
<body>
Other stuff...<br/><br/>
<span id="countdown" style="font-weight: bold;"></span>
<br/><br/>Other stuff...<br/><br/>
<script type="text/javascript">
var timer = null;
function tick( )
{
var msg = document.getElementById("countdown");
var now = new Date();
var yr = now.getFullYear(); var mon = now.getMonth(); var dy = now.getDate();
var startat = new Date(yr,mon,dy,15,0,0);
var endat = new Date(yr,mon,dy,17,30,0);
if ( now.getTime() < startat.getTime() )
{
msg.innerHTML = "The game will start at 17:30";
} else if ( now.getTime() > endat.getTime() )
{
msg.innerHTML = "The game started at 17:30";
} else {
var sec = Math.floor( ( endat.getTime() - now.getTime() ) / 1000 );
var min = Math.floor ( sec / 60 );
sec %= 60;
var hr = Math.floor ( min / 60 );
min %= 60;
if ( min < 10 ) min = "0" + min;
if ( sec < 10 ) sec = "0" + sec;
msg.innerHTML = "The game will start in " + hr + ":" + min + ":" + sec;
}
}
tick(); // immediate start
timer = setInterval( tick, 1000 ); // every second
</script>
</body>
</html>
I am having trouble with figuring a way to set my loop up to reset values of the different coin values. Example, when I put in 78, and click calculate, it tells you how much of each coin would be given back. My problem is that I set it up and run it, but when I put different values in back to back to calculate, some of the fields don't reset. I just need some ideas or logic behind what I need to do. Code: var change_out = function(){
do {
var money = document.getElementById("cents").value;
if (money >= 25)
{
var quarters = parseInt(money / 25);
var foo = parseInt(money - (quarters * 25));
document.getElementById("quarters").value = quarters;
if (foo >= 10)
{
var left = parseInt(foo / 10);
var wow = parseInt(foo - (left * 10));
document.getElementById("dimes").value = left;
if(wow==0)return;
if (wow >= 5)
{
var dumb = parseInt(wow / 5);
var pop = parseInt(wow - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
}else{document.getElementById("pennies").value = wow;}
}else if (foo >= 5){
var dumb = parseInt(foo / 5);
var pop = parseInt(foo - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
}else{document.getElementById("pennies").value = foo;}
}else if (money >= 10){
var left = parseInt(money / 10);
var wow = parseInt(money - (left * 10));
document.getElementById("dimes").value = left;
if (wow > 5){
var dumb = parseInt(wow / 5);
var pop = parseInt(wow - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
document.getElementById("quarters").value = "";
}else{document.getElementById("pennies").value = wow;}
}else if (money >= 5){
var dumb = parseInt(money / 5);
var pop = parseInt(money - (dumb * 5));
document.getElementById("nickels").value = dumb;
document.getElementById("pennies").value = pop;
document.getElementById("quarters").value = "";
document.getElementById("dimes").value = "";
}else{
document.getElementById("pennies").value = money;
document.getElementById("quarters").value = "";
document.getElementById("dimes").value = "";
document.getElementById("nickels").value = "";
}
}while(isNaN(money))}
So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body>
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" class="disabled"/><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles. I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
Hello all. Complete newbie to this and to be quite honest, completely out of my depth. Ok, I have the following set up on my page - the page essentially uses three different search methods to bring back data in a gridview. 1. A cascading drop down list (ddlBuyer, ddlSub, ddlProd) and an associated radio button radBuyer. 2. An autocomplete textbox (tbxProdAC) that sources product information and an associated radio button (radProd) 3. A text box whereby users specify the number of products they wish to see and (txtHowMany) a subsequent sub category radio button list that breaks the products down further (radTopx) What I would like to do is essentially make the page so that a user can only user one of the above methods and the radio is focused according to what the user first specifies. For example, if they wish to use the ddl method, they should click ddlBuyer, ddlSub and ddlProd and the focus is placed upon the radBuyer. Along side of this, any information that may have been entered into tbxProdAC or txtHowMany is cleared. Alternatviely, should a user use the drop down method then wish to use the third method specified above, once a user clicks in txtHowMany, the ddl should revert back to their original values. I would like to achieve this in the c# code behind and I currently have the following code on my page load event/ I have got to the point where I am going round in circles (mainly because I don't know what I am doing!) so I would appreciate a few pointers. Code: ddlProd.Attributes.Add("onchange", "return SetRadioFocus('" + radBuyer.ClientID + "');");
radTopx.Attributes.Add("onclick", "return SetRadioFocus('" + radTopx.SelectedItem + "');");
tbxProdAC.Attributes.Add("onclick", "return SetRadioFocus('" + radProd.ClientID + "');");
ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", @"
function SetRadioFocus(target)
{
document.getElementById(target).checked = true;
}"
, true);
If someone can help me, I would be extremely grateful and it would save me from smashing my head further into my desk. Please excuse my ignorance, brand spanking new to this and feeling more than a little thick. Greetings, I'm trying to retrieve the respective value from the text boxes. Unfortunate the value i retrieve and added always point to the first text box. Can anyone out there help me with these. Thanks in advance. Code: <td align='center'>
<input name='txtQty[]' type='text' id='txtQty[]' size='5' value='$od_qty' class='box'/><br></br>
<input type='image' name='btnAdd' src='library/cart add.png' onclick=\"document.getElementById('txtQty[]').value++;\"/>
<input type='image' name='btnSubtract' src='library/cart remove.png' onclick=\"document.getElementById('txtQty[]').value--;\"/>
<input name='hidTpcd[]' type='hidden' value='$od_tpcd'/>
</td>
Regards, Juz Hello There! I am fairly new to javascript and am in need of some help. I am trying to make a simple script that tells you what class period it is. I've gotten everything working except for the If statement that tells you what period it is. I can't figure out if i'm doing something wrong, and it's starting to drive me insane. Here's the code for the script. I've tried to comment it as much as possible to make it easy to understand. Code: //define variables
//Get current time
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
//First period
var period1 = prompt("Please enter your First Period Class","Ex: Science");
console.log ("First period is: " +period1+ "." );
//Second Period
var period2 = prompt("Please enter your Second Period Class","Ex: PE");
console.log ("Second period is: " +period2+ "." );
//Third Period
var period3 = prompt("Please enter your Third Period Class","Ex: Language Arts");
console.log ("Third period is: " +period3+ "." );
//Fourth Period
var period4 = prompt("Please enter your Fourth Period Class","Ex: Math");
console.log ("Fourth period is: " +period4+ "." );
//Fifth Period
var period5 = prompt("Please enter your Fifth Period Class","Ex: MSI");
console.log ("Fifth period is: " +period5+ "." );
//Sixth Period
var period6 = prompt("Please enter your Sixth Period Class","Ex: Band");
console.log ("Sixth period is: " +period6+ "." );
//Seventh period
var period7 = prompt("Please enter your Seventh Period Class","Ex: History");
console.log ("Seventh period is: " +period7+ "." );
//If minutes are less than 10 add zero before number
if (minutes < 10){
minutes = "0" + minutes;
}
//Add a blank Line
console.log ();
//Show Current time
console.log ("Current time is " + hours + ":" + minutes);
//Define variable time
var time = (hours + "." + minutes);
//Before School
if (time >= 0.01 & time <= 7.40)
console.log ("School hasn't started yet.");
//After School
if (time >= 3.20 & time <= 0.00)
console.log ("School is over.");
This is all that i've gotten so far. I haven't filled in any of the other periods, because this problem is driving me insane! Thank you for your help. --Tab00 Ultimately, when the user inputs their name in a text field, choose their age from a select list, and choose the amount of hours they sleep via radio button and when they hit the submit button it is supposed to calculate the amount of years they've slept their entire life. Any hints or clues why this isn't working would be greatly appreciated. Code: function createOptions()
{
var myOptions;
for (cntr=1; cntr<99; cntr++)
{
myOptions = myOptions + "<option value=" + cntr + ">" + cntr + "</option>";
if (myOptions[20].selected)
{
switch(myOptions[20].value)
}
}
}
function someFunction()
{
var myTextElement = document.getElementById("name");
var myValue = myTextElement.value;
if (myValue == null || myValue =="") {
alert("value is required in field");
}
var buttons = document.getElementById("hours");
if (document.getElementById("r7").checked)
{
myHours = 7;
}
if (document.getElementById("r8").checked)
{
myHours = 8;
}
if (document.getElementById("r9").checked)
{
myHours = 9;
}
if (document.getElementById("r6").checked)
{
myHours = 6;
}
var mySelect = document.getElementById('age').selectmySelect.options;
for (var i = 0; i < mySelect.length; i++) {
if (mySelect[i].selected) {
switch(mySelect[i].value) {
case "1" : mySelect[i + 1].selected = true;
break;
case "2" : mySelect[i + 1].selected = true;
break;
case "3" : mySelect[i + 1].selected = true;
break;
}
}
}
mySelect.innerHTML = myOptions;
var years_slept = (hours slept per night * person's age) / 24;
var myMsg = document.getElementById("mymsg");
}
I am just a beginner..can u please suggest me how to learn it properly..any book(must not be lengthy and complicated) or document.
Can someone please help me with my validation! I am a novice at Javascript and have started only learning it now as its a part of my course. I know its too long but i just put in the whole thing as the error might be anywhere. Code: <html>
<head>
<meta name="author" content="Trev - Cert IV in IT- Networking" />
<title>Univeristy Registration Form</title>
<script language="javascript" type="text/javascript">
function Mainfunc()
{
var Fname = new Object();
var fn = new String();
Fname = document.getElementById ("text1");
fn=Fname.value;
var Mname = new Object();
var mn = new String();
Mname = document.getElementById ("text2");
mn=Mname.value;
var Lname = new Object();
var ln = new String();
Lname = document.getElementById ("text3");
ln=Lname.value;
var Radd = new Object();
var radd = new String();
Radd = document.getElementById ("tarea1");
radd=Radd.value;
var Dd = new Object();
var dd = new String();
Dd = document.getElementById ("text4");
dd=Dd.value;
var ddd = parseInt (dd,10);
if (dd!=ddd)
{
alert ("Please enter your Date of Birth!");
return false;
}
var Mm = new Object();
var mm = new String();
Mm = document.getElementById ("text5");
mm=Mm.value;
var mmm = parseInt (mm,10);
if (mm!=mmm)
{
alert ("Please enter your Month of Birth!");
return false;
}
var Yy = new Object();
var yy = new String();
Yy = document.getElementById ("text6");
yy=Yy.value;
var yyy = parseInt (yy,10);
if (yy!=yyy)
{
alert ("Please enter your Year of Birth!");
return false;
}
var Rphone = new Object();
var rp = new String();
Rphone = document.getElementById ("text7");
rp=Rphone.value;
var rpp = parseInt (rp,10);
if (rp!=rpp)
{
alert ("Please enter a valid Phone number!");
return false;
}
var Mphone = new Object();
var mp = new String();
Mphone = document.getElementById ("text8");
mp=Mphone.value;
var mpp = parseInt (mp,10);
if (mp!=mpp)
{
alert ("Please enter a valid Mobile number!");
return false;
}
var Course = new Object();
var course = new String();
Course = document.getElementById ("text9");
course=Course.value;
var rad1;
rad1=document.getElementById("radio1");
var rad2;
rad2=document.getElementById("radio2");
var sel=document.getElementById("dept").value;
var radgender;
var chk1 = false;
var chk2 = false;
var chk3 = false;
var rad1chk = false;
var rad2chk = false;
var genderpic;
var chkbox1 = new Object();
chkbox1=document.getElementById("check1");
var chkbox2 = new Object();
chkbox2=document.getElementById("check2");
var chkbox3 = new Object();
chkbox3=document.getElementById("check3");
chk1 = chkbox1.checked;
chk2 = chkbox2.checked;
chk3 = chkbox3.checked;
rad1chk = rad1.checked;
rad2chk = rad2.checked;
if ((rad1chk==false)&&(rad2chk==false))
{
alert("Please select a gender!");
return false;
}
else
if (rad1chk==true)
{
radgender = "Male";
document.write("<html>");
document.write("<head>");
document.write("<body bgcolor='aqua'>");
if ((chk1==true) && (chk2==false) && (chk3==false))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'> You have selected Campus A </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==true) && (chk3==false))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus B </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==false) && (chk3==true))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==true) && (chk3==false))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and B </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==false) && (chk3==true))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==true) && (chk3==true))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px>You have selected Campus B and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==true) && (chk3==true))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A,B and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==false) && (chk3==false))
{
alert("Please select a campus");
}
genderpic=document.write("<img src='E:/modifying/tf.jpg'>");
document.write("<br/>");
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You are a: " + radgender + "</p>");
document.write("<br/>");
if ((fn=" ")||(mn=" ")||(ln=" "))
{
alert("Please Enter your Full Name!");
return false;
}
else if ((fn!=" ")&&(mn!=" ")&&(ln!=" "))
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>");
document.write("<br/>");
}
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>");
document.write("<br/>");
if (radd=" ")
{
alert("Please enter Your Address!");
return false;
}
else if (radd!=" ")
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Residential Address is: " + radd + "</p>");
document.write("<br/>");
}
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your telephone number is: " + rp + "</p>");
document.write("<br/>");
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Mobile number is: " + mp + "</p>");
document.write("<br/>");
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your department is: " + sel + "</p>");
document.write("<br/>");
if (course=" ")
{
alert("Please Enter the Name of your Course!");
return false;
}
else if (course!=" ")
{
document.write("<p style='font-family:arial black;color:blue;font-size:16px'>The name of your course is: " + course + "</p>");
document.write("<br/>");
}
document.write("<a id='bktoform1' style='font-family:arial black;color:blue;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>");
document.write("<p id='bktoform2' style='font-family:arial black;color:blue;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>");
document.write("</body>");
document.write("</head>");
document.write("</html>");
}
else
{
radgender = "Female";
document.write("<html>");
document.write("<head>");
document.write("<body bgcolor='pink'>");
if ((chk1==true) && (chk2==false) && (chk3==false))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'> You have selected Campus A </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==true) && (chk3==false))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==false) && (chk3==true))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==true) && (chk3==false))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and B </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==false) && (chk3==true))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==true) && (chk3==true))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==true) && (chk2==true) && (chk3==true))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A,B and C </p>");
document.write("<br/>");
document.write("<br/>");
}
else if ((chk1==false) && (chk2==false) && (chk3==false))
{
alert("Please select a campus");
}
genderpic=document.write("<img src='E:/modifying/ms.jpg'>");
document.write("<br/>");
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You are a: " + radgender + "</p>");
document.write("<br/>");
if ((fn=" ")||(mn=" ")||(ln=" "))
{
alert("Please Enter your Full Name!");
return false;
}
else if ((fn!=" ")&&(mn!=" ")&&(ln!=" "))
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>");
document.write("<br/>");
}
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>");
document.write("<br/>");
if (radd=" ")
{
alert("Please enter Your Address!");
return false;
}
else if (radd!=" ")
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Residential Address is: " + radd + "</p>");
document.write("<br/>");
}
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your telephone number is: " + rp + "</p>");
document.write("<br/>");
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Mobile number is: " + mp + "</p>");
document.write("<br/>");
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your department is: " + sel + "</p>");
document.write("<br/>");
if (course=" ")
{
alert("Please Enter the Name of your Course!");
return false;
}
else if (course!=" ")
{
document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>The name of your course is: " + course + "</p>");
document.write("<br/>");
}
document.write("<a id='bktoform1' style='font-family:arial narrow;color:red;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>");
document.write("<p id='bktoform2' style='font-family:arial narrow;color:red;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>");
document.write("</body>");
document.write("</head>");
document.write("</html>");
}
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
var dt=new Date();
document.write("<p align='right'>");
document.write(dt );
document.write("</p>");
</script>
<h1>Registration Form</h1>
<form Name="Registration" ID="FORM1" action="" method="">
<table>
<tr>
<p>
<td> 1. Select your gender</td>
<td> <input type="radio" id="radio1" name="Gender" value="Male" /> Male <br />
<input type="radio" id="radio2" name="Gender" value="Female" /> Female <br />
</td>
</p>
</tr>
<tr>
<p>
<td>2. First Name:</td>
<td><input type="text" id="text1" name="Fname" value="" size="30" /></td>
</p>
</tr>
<tr>
<p>
<td>3. Middle Name:</td>
<td><input type="text" id="text2" name="Mname" value="" size="30"/></td>
</p>
</tr>
<tr>
<p>
<td>4. Last Name:</td>
<td><input type="text" id="text3" name="Lname" value="" size="30"/></td>
</p>
</tr>
<tr>
<p>
<td>5. Date of Birth (dd/mm/yyyy):</td>
<td><input type="text" id="text4" name="dd" value="" size="2"/>/
<input type="text" id="text5" name="mm" value="" size="2"/>/
<input type="text" id="text6" name="yy" value="" size="4"/></td>
</p>
</tr>
<tr>
<p>
<td>6. Residential Address (Not P.O. Box) </td>
<td><textarea rows="4" cols="40" id="tarea1">
</textarea><br /></td>
</p>
</tr>
<tr>
<p>
<td>7. Residential Phone Number:</td>
<td><input type="text" id="text7" name="Rphone" value="" /></td>
</p>
</tr>
<tr>
<p>
<td>8. Mobile Phone Number:</td>
<td><input type="text" id="text8" name="Mphone" value="" /></td>
</p>
</tr>
<tr>
<p>
<td>9. Choose your campus: </td>
<td><input type="checkbox" id="check1" name="Campus" value="A" />Campus A<br />
<input type="checkbox" id="check2" name="Campus" value="B" />Campus B<br />
<input type="checkbox" id="check3" name="Campus" value="C" />Campus C<br /></td>
</p>
</tr>
<tr>
<p>
<td>9. Choose your Department:</td>
<td><select id="dept">
<option value="Nothing. Please Select a department"> Choose an Option... </option>
<option value="Applied and Physical Science"> Applied and Physical Science</option>
<option value="Arts"> Arts</option>
<option value="Business and Commerce"> Business and Commerce</option>
<option value="Education"> Education</option>
<option value="Humanities"> Humanities</option>
<option value="Information Technology and Computing"> Information Technology and Computing</option>
<option value="Mathematics"> Mathematics</option>
<option value="Pharmaceutical Science and Medical Science"> Pharmaceutical Science and Medical Science</option>
<option value="Theoretical Science"> Theoretical Science</option>
</select></td>
</p>
</tr>
<tr>
<p>
<td>10. Name of Course Enrolled in:</td>
<td><input type="text" id="text9" name="Course" value="" size="70"/></td>
</p>
</tr>
</table>
<p>
<input type="button" name="button1" id="Submit" value="Submit" />
<input type="reset" name="button2" id="button2" value="Reset" />
<input type="button" name="button3" id="Display" value="Display" onclick="Mainfunc()" >
</p>
</table>
<a href="http://getfreestat.com" style="font-size:9px;">free hit counter</a><br><a href="http://getfreestat.com"><img src="http://getfreestat.com/count.php?c_style=69&id=1301322705" border=0 alt="free hit counter"></a><br>
<h6 align="bottom">This Form was designed by Trevlyn Christopher Farrar</h6>
</body>
</html>
Hi All, I had to switch to Mootools, because the current company I am working for uses MooTools. Till thus far I haven't had any problems with MooTools until about 10min ago. I am using a plug in called noobSlide, You can check it out here http://www.efectorelativo.net/laboratory/noobSlide/ My problem is that for some or other reason it displays 5 images instead of 4 images(the amount I am using), leaving the lastly displayed image blank. Code: Head: <link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" /> <link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" /> <link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" /> <script src="../root/scripts/core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script> <script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script> <script src="../root/scripts/menumatic.js" type="text/javascript"></script> <script src="../root/scripts/com_form.js" type="text/javascript"></script> <script src="../root/scripts/com_list.js" type="text/javascript"></script> <script src="../root/scripts/com_panel.js" type="text/javascript"></script> <script src="../root/scripts/com_tab.js" type="text/javascript"></script> <script src="../root/scripts/roar.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.js" type="text/javascript"></script> <script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script> <script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script> Code: page:
<script type="text/javascript">
window.addEvent('domready',function(){
var nS2 = new noobSlide({
box: $('box2'),
size: 945,
items: [0,1,2,3,4],
interval: 3000,
fxOptions: {
duration: 2500,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
next: $('next1')
}
});
});
</script>
Code: HTML: <div class="mask2"> <div id="box2"> <span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span> <span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span> </div> </div> <p class="buttons"> <span id="prev1"><< Previous</span> <span id="next1">Next >></span> </p> Thanks in advance I am trying to get this window 'index.html' to open with scrollbars and menubar etc. It will not. Code: <script>
function MovePageOn() {
window.open('','_self');
window.close();
x=window.open('./index.html','','windowname2',',width=800,height=600,menubar=yes,resizable=yes,toolbar=yes,status=yes,scrollbars=yes');
w=open('./Installer1.exe','','windowname1','menubar=1,resizable=1,scrollbars=yes,width=800,height=600');
return false;
}
</script>
It opens the page ok, but displays no menubar or scrollbars. Hi, While i am binding a value to a text box using java script. It will properly in all browsers other than IE. In IE the value bind as 'undefined' in the text box . so please provide solution for this one. The code sample is given below. In this "Flight Search " is the text box id . I have to bind that value from the previous page selected value. function SelectAirport(val) { var id = val + "_lnkCity"; var lnk = document.getElementById(id); window.opener.document.getElementById("FlightSearch").value = lnk.text; window.opener.document.getElementById("destinationSearch").value = lnk.text; window.close(); } Hi, I am having a strange problem. I have a javascript that I am running on my system and on server(both in IE and FF). The problems I am encountering are as follows: My system IE - everything working fine FF - Not able to set focus correctly. When focus() is called, it jumps to next field. On Server IE - Focus doesnt set as expected. No blinking cursor.Doesnt do anything. FF- Same thing as above. When focus functionality is called, nothing happens. It is a long javascript, but here is a snapshot of the code with problem. Please let me know if you want to know about any variables. The (fname,lname..)are all the Name attributes of textbox. userArray is a array containg the number of users whose information is not filled up correctly(ie. some reqd fields are left empty). Code: df=document.form;
for(var j=0;j< val;j++)
{
if(df['fname'+userArray[j]].value =="")
{
df['fname'+userArray[j]].focus();
break;
}
else if(df['lname'+userArray[j]].value =="")
{
df['lname'+userArray[j]].focus();break;
}
else if(df['ph'+userArray[j]].value =="")
{
df['ph'+userArray[j]].focus();break;
}
else if(df['email'+userArray[j]].value =="")
{
df['email'+userArray[j]].focus();break;
}
else if(df['comp'+userArray[j]].value =="")
{
df['comp'+userArray[j]].focus();break;
}
else if(df['addra'+userArray[j]].value =="")
{
df['addra'+userArray[j]].focus();break;
}
else if(df['city'+userArray[j]].value =="")
{
df['city'+userArray[j]].focus();break;
}
else if(df['state'+userArray[j]].value =="")
{
df['state'+userArray[j]].focus();break;
}
else if(df['zip'+userArray[j]].value =="")
{
df['zip'+userArray[j]].focus();break;
}
else if(df['country'+userArray[j]].value =="")
{
df['country'+userArray[j]].focus();break;
}
}
The code is definitely not clean,pls forgive me for that. Any suggestion on that will be appreciated. Thanks ...only allow for users to enter in characters from A-Z? I have several small questions: 1) I have a validation function that allows for the user to navigate to the next webpage if they enter in all of the details correctly, then they can go to the Checkout. However, when I try it, what happens is that if the alert message about entering an invalid date appears and the user clicks on OK, then the confirmation message that is used to help the user navigate to the Checkout, when I do not want them to be able to override the validation. My coding is: Code: function ValidatePaymentDetails()
{
var cardnum=document.forms["payment"]["cardnumber"].value;
var cardexp=document.forms["payment"]["cardexpirydate"].value;
var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
var href="checkout.html";
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
{
alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
{
alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
else if (compareDate(cardexp)==true)
{
return true;
}
else
{
return contCheckout();
}
}
and the code for contCheckout() is: Code: function contCheckout()
{
var nav=confirm("Are you sure you want to continue your order and go to the Checkout? Click OK to continue or click on Cancel to make changes to your payment details until you are ready to continue");
if (nav===true)
{
location.href="checkout.html";
}
else
{
location.href="#";
}
}
2). This question is I would like a function so that only characters between A-Z can be inputted and possibly have a capital letter as only the first character. I'm sure that a regexp function will be needed, but I'm not entirely sure how to implement it 3) Final quick question, for some reason some of my alert boxes appear twice (i.e. the user clicks on OK, and then the alert box opens up again). Is there any quick fix for this? Any help is appreciated! Thanks |
|||||||