|
JavaScript - Using Loop Created Variables In Same Function...e
Hey,
I'm attempting to add functuallity to some code and have been having problems getting loops to create variables that are usable. I know the actual programming seems rather redundant as im creating a variable for each div then looping it to create each div, but it is the only way i can get it to work with other parts of the website. So the actual code takes the variables defining the content of each div and uses the loop to actually produce the divs. I am having problems with the + "linkdiv" + x + part of the actual loop. however way i try to define the variable it simply prints the "linkdiv1" or "linkdiv2" ect... rather then referencing the earlier variable that was created and printing "div1". is this even possible in javascript? The whole whing works when i reference a variable directly, just not when i try to use a loop to create the reference for me. If i use a variable directly i get 5 of the same references rather than one of each reference which is not what i want. please note thati define the colour1 and colour2 variables along with the rest of the actual code earlier in the function... Code:
var linkdiv1="<p style=\"color:"+ colour1+"\">div1</p>"
var linkdiv2="<p style=\"color:"+ colour1+"\">div2</p>"
var linkdiv3="<p style=\"color:"+ colour1+"\">div3</p>"
var linkdiv4="<p style=\"color:"+ colour1+"\">div4</p>"
var linkdiv5="<p style=\"color:"+ colour1+"\">div5</p>"
<!----------------------------------------------------------------->
for (x = 1; x <= 5; x++)
{
document.write("<div style=\""+colour1+"\" id=\"div"+x+"\">" + "linkdiv" + x + "</div>")
}
feel free to ask for more infomation or more code as im not even sure if this makes enough sense to answer the question. Having troubles writing this in a way thats easily understood as i had to take a lot of code that wasnt relevent out. thanks... Similar TutorialsHi all, I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code Code: function updateStatusIcons(retText) {
updatingStatuses = true;
var updates = retText.split("|");
for (z=0; z<updates.length; z++) {
var sysId = trim(updates[z].split(":")[0]);
var projectId = trim(updates[z].split(":")[1]);
if (projectId != "") {
var statusImg = getSysidsImg(sysId);
statusImg.src = "images/tick.gif";
statusImg.className = "hand";
statusImg.title = "Project "+ projectId +" created, Click here to find in project search";
statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; };
// Remove sysid from csv
removeSysidfFromCSL(sysId);
}
}
if (pollingOn) {
pollingupdate = setTimeout("checkForProjectComplete()", 5000);
}
updatingStatuses = false;
if (runErrorFunction) {
markErrors();
}
}
Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to? TIA, Dale Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [
{
"name" : "Menu 1",
"url" : "menu1.html",
"submenu" : [
{
"name" : "menu 1 subitem 1",
"url" : "menu1subitem1.html"
},
{
"name" : "menu 1 subitem 2",
"url" : "menu1subitem2.html"
} ]
},
{
"name" : "Menu 2",
"url" : "menu2.html",
"submenu" : [
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
},
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
} ]
},
{
"name" : "Menu 3",
"url" : "menu3.html",
"submenu" : [
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
},
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
} ]
}
];
Here is the recursive function: Code: function buildMenuHTML(menuData,level) {
var ul;
if (level == 1) {
ul = "<ul id='menu'>";
} else {
ul = "<ul class='level" + level + "'>";
}
for (i = 0; i < menuData.length; i++) {
menuItemData = menuData[i];
ul += "<li>";
ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
if (typeof menuItemData.submenu != 'undefined') {
ul += buildMenuHTML(menuItemData.submenu,level + 1);
}
ul += "</li>";
}
ul += "</ul>";
return ul;
}
Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'>
<li><a href='menu1.html'>Menu 1</a>
<ul class='level2'>
<li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
<li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
</ul>
</li>
</ul>
'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked. I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight... The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway. I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below. Thanks. Code:
/* designImages[x][0] = the image source on the page;
* designImages[x][1] = the destination url on clicking the image;
*/
var designImages = new Array();
designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );
designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );
designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );
designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );
designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );
designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );
designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
window.onload = function()
{
creationCompleteHandler();
}
function creationCompleteHandler()
{
calcNumDesigns();
setLinks();
}
function calcNumDesigns()
{
var numDesignBoxes = designImages.length;
var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
{
var newGalleryBox = document.createElement('div');
var newGalleryBoxID = ("galleryRow" + n);
newGalleryBox.setAttribute('id',newGalleryBoxID);
newGalleryBox.setAttribute('class',"galleryBox");
document.getElementById('content').appendChild(newGalleryBox);
squareOff(newGalleryBox);
var rowBoxes;
if ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
else rowBoxes = 2;
for ( m = 0 ; m <= rowBoxes ; m++ )
{
var boxNum = ( n * 3 ) + m;
var newDesignBox = document.createElement('div');
var newDesignBoxID = "design" + boxNum;
newGalleryBox.appendChild(newDesignBox);
newDesignBox.setAttribute('id',newDesignBoxID);
newDesignBox.setAttribute('class',"designBox");
var newDesignImg = document.createElement('img');
var newDesignImgID = "designImg" + boxNum;
newDesignImg.setAttribute('id',newDesignImgID);
newDesignImg.setAttribute('class',"designImage");
newDesignImg.src = designImages[boxNum][0];
newDesignBox.appendChild(newDesignImg);
}
}
}
function squareOff(frame)
{
document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
}
function setLinks()
{
for (x in designImages)
{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
};
}
function sendToURL(x)
{
var url = designImages[x][1]
MM_goToURL('self',url);
return document.MM_returnValue;
}
function MM_goToURL()
{ //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
I'm using a loop to get the attributes of a series of <a> tags in an xml. Here's the code: Code: function getAttributes(){
for(var i=0;i <= totalSteps;i++){
whichLink = xmlDoc.getElementsByTagName("xml")[0].getElementsByTagName("a")[i].attributes.getNamedItem("href").value.split("?");
alert(whichLink);
if(whichLink[1]=="correctLink"){
alert("correctLink detected");
myMessage += whichLink[0];
}
}
displayMessage();
}
When I run the function, I get a "Object required" error for the getElementsByTagName("a")[i] line, and displayMessage() won't fire. The weird thing is, the alert(whichLink); and alert("correctLink detected"); commands both work correctly, and when I replace the i variable with a digit, like 1 , everything works smoothly (save for the fact that it only returns one of the urls I'm looking for). So something odd is going on with my loop variable, but I'm at a loss as to what. Anyone have any ideas? Appreciated as always, ~gyz Hey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript">
function clickFocus(input){
input.className = 'focus';
if (input.value = input.defaultValue){
input.value = '';
}
}
function unFocus(input){
input.className = 'entered';
if (input.value == ''){
input.value = input.defaultValue;
input.className = 'normal'
}
}
</script>
<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea>
<input class="submit" name="submit"type="submit" value="Send Message" />
</form>
I have the following code: ... var numberoffiles = array(); for (i = 1; $i <= totalNumberOfFiles; i++) { numberoffiles[i] = i; } ... I get an error saying that numberoffiles is undeclared or something What am I doing wrong? Do I need to declare it a global variable or something?? ALSO, why can't I do this: numberoffiles[] = i; I've seen code snippets that assign to the end of an array like this (Or maybe my problem is the scope of the variable??) Thanks OM Hi, I am quite new to javascript but I'm quite sure this problem is very easy to solve. I have a vague idea of what might be going wrong but I have no idea what I should be doing instead. Here is what I'm trying to do: User inputs X and Y coordinates into form validate that they are numbers do a little bit of maths redirect to a php script with a single variable tacked onto the end of the url Here is the form code: Code: //part of a larger php script to make the form echo "<form name='gotoForm' onsubmit='return coordCalc()'> <fieldset> <legend>Go to Square</legend> X <input type='text' id='X' size='1' maxlength='3'/> Y <input type='text' id='Y' size='1' maxlength='3'/> <input type='submit' value='Go To' /> </fieldset> </form> "; which references these functions in the header: Code:
//Is it a number
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//deal with the input, check if they are both numbers with the above function
//if they are do some maths on the input
//add the result onto a url and redirect
function coordCalc (){
var Xcoord = document.getElementById('X');
var Ycoord = document.getElementById('Y');
if(isNumeric(Xcoord, "Please enter a Number for X")){
if(isNumeric(Ycoord, "Please enter a Number for Y")){
//Takes the X and Y coordinates and transforms them into a single number
//not fully coded in case you try putting some numbers into the formula btw :)
var X = parseInt(document.getElementById('X').value);
var Y = parseInt(document.getElementById('Y').value);
var G = 16;
var Z = (((G + 1) - Y) - Y);
var A = (Y + Z);
var B = (X - 1);
var L = ((A * (G - 1)) + B);
window.location = "map.php?start=" + L;
}
}
return false;
}
The number validation works but the url ends up as map.php?start=NaN. Now, this simply must be the way I am assigning the Xcoord and Ycoord variables with the document.getElementByID() function I am sure. But like I said, I have no idea what to do instead, any help is massively appreciated. Thankyou! I'm new to javascript and have come across what I'm sure its a really easy problem to solve. I want a page with a hyperlink that passes a variable to another 'pop-up' page (in this case a name, its just an example) and new pop-up page prints a message followed by the variable thats passed. Here is the code as it is right now Code:
<html>
<head>
<script language="javascript" type="text/javascript">
function popitup(a)
{
var reply = 'a';
newwindow=window.open('','name','height=200,width=150');
var tmp = newwindow.document;
tmp.write('<html><head><title>popup</title>');
tmp.write('</head><body><p>"Hello there" + reply </p>');
tmp.write('<p><a href="javascript:self.close()">close</a> the popup.</p>');
tmp.write('</body></html>');
tmp.close();
}
</script>
</head>
<body>
<a href="testpopup.html" onclick="popitup('Toby')"
>Link to popup</a>
</body>
</html>
In short, I just want the pop-up page to print 'Hello there Toby' or whatever name I choose to pass across. Any help much appreciated!! The 'testpopup.html' url is just the initial webpage. Hello. This is very long and I think if you look at code it might be quicker. If not, then please read along. Here is the code and the problem: Code: function addtwoboxes
{
get values from two text boxes, one about width, the other one about height,
and store each in a variable; a=width; b=height
checkifwidthproblem(); //to see if the boxes are empty and with numbers
checkifheightproblem(); //to see if the boxes are empty and with numbers
if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
}
function checkifwidthproblem()
{
width_not_ok=false;
if problems with the data in the textbox (the a variable is being checked).
{
bring up an alert box
width_not_ok=true;
}
} //end of checkifwidthproblem function
function checkifheightproblem()
{
height_not_ok=false;
if problems with the data in the textbox (the b variable is being checked)
{
bring up an alert box
height_not_ok=true;
}
} //end of checkifheightproblem function
I would like this function to be setup the same way as the addtwoboxes function, but right
now I am only calling up the checkifwidthproblem function, and it doesn't execute and the
form gets submitted. The fillInvoiceNumber function can be called because if I place only
an alert of Hello in it, it comes up, and then the form gets submitted. If it do get this
working, I would also need to be sure that it is seeing the results of the variables
width_not_ok and height_not_ok, just as they are for the addtwoboxes function.
function fillInvoiceNumber()
checkifwidthproblem(); //to see if the boxes are empty and with numbers
checkifheightproblem(); //to see if the boxes are empty and with numbers
if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
]
This is going to be a bit long, but it's the only way I can be sure of that I have covered everything, so please bear with me and help me out. Thanks. Please Provide Solution Using my way First, Then suggest Better Ways: O.k. Before I post the problem, I know, since I took program classes years ago and since I have done a little research here and here, that there are better, more efficient, and tidier ways to do what I am doing, but I have started already this way and would like to continue this way. I will ask what's the better way to do this in another thread, unless 1) you feel like explaining the bettery way and 2) it's not too long or complicated, but AFTER you have provided me with a solution to doing it my way. The Setup / What My Form is Supposed to Do: I have a form with two buttons. The user has to enter some information into the form and then click the button to have some calculations done and for other text fields to automatically filled in. After that, the user has to click submit. A note about the submit button: The type is image and the name says submit. The form line has the following: <form target="abcco" action="https://www.domainname.com" method="post" id="Form" onsubmit="fillInvoiceNumber()"> I will explain what the fillInvoiceNumber() is doing later on. Data Validation / Verification: 1) I want to ensure that when the user clicks the first button, let's call it GetPrices to make things easier, that it checks to see if data is enterted into the textboxes and that it is the right kind of data. 2) After the GetPrices button is clicked, the user can then enter nonsense into the textboxes and click submit or, never click the GetPrices button, the first button to begin with, and so junk will be submitted. This is what I have going on: For the GetPrices button, I have the following: onclick="addtwoboxes() (the names I have aren't fully descriptive of all that's going on, as I do have more things happening, but for now I have left them like that). in the addtwoboxes function I have it calling up two functions, each for a textbox in which the user has to enter width in one and height in another, and if the textboxes are not empty and have the correct data in them, then the calcuations for the addtwoboxes take place; if not, nothing happens (regarding the calculations; an alert box comes up for either or both of the functions in the addtwoboxes function if something is wrong). So, the two functions that are called in the addtwoboxes() function are checkifwidthproblem() checkifheighthproblem() which I am calling just like that but with a semicolon to the end of each one. This next now is one of the areas where I do believe this can be combined, since only one value is changing, but I will leave it like this for now. The checkifwidthproblem() function starts of with a variable:width_not_ok=false; (after doing some research, I see that this is often set the opposite way or not set at all) if something is wrong with the data entered into the width textbox, an alert box with a message comes up, and I then have the following variable: width_not_ok=false; For the checkifheighthproblem(), it's basically the same as the width problem, except, with it's own set of variables. I had the same ones as the width one, but if things were not ok with the width textbox, but o.k. with the height textbox, the calculations were taking place. So, because of this I used new variables in the height function and had an if statement check both variables for false. So, the checkifheighthproblem() starts of with the variable: height_not_ok=false and if there is a problem with the data entered into the height textbox, an alert box comes up and the variable height_not_ok=true is set. When the user presses the GetPrices button, this function works excellently. Everything goes as it should. The problem is when the form is being submitted. I would like the textboxes to be rechecked. So, right now I have a function called fillInvoiceNumber() in which it is joining two strings together after getting their values from a drop down menu. This has to be done at the time of submission only for the page that's processing the results to have them interpreted the way I want it to. Prior to joining those strings, I would like it check and see if everything is o.k. with the two textboxes by calling the two functions of that check height and width and if they are not, for the alert boxes to come up, for the joining of the strings to not take place, and for the form to not be submitted. However, the fillInvoiceNumber() function is not executing either function at all. If it does work, I would also need to be sure that it is seeing the results of the variables width_not_ok and height_not_ok. Forgive but I'm quite a beginner at JS . . . Anyway, on my website I've got a form, and then a script that validates the form. The script for validation is inside a function. The problem is that I have another script outside of the function that generates random numbers to make sure there's not a spambot submitting the form. I set a variable called 'answer' as the correct answer, but for some reason, the variable won't be read when I put it inside the original function to make sure the user got it right. How should I go about doing this? Thanks, Raybob Code: <!-- THIS SCRIPT ENSURES FIELDS ARE FILLED OUT CORRECTLY -->
<script type="text/javascript">
var x1 = Math.floor(Math.random()*11);
var x2 = Math.floor(Math.random()*11);
var ans = x1+x2;
</script>
<script type="text/javascript">
<!--
function validate_form ( )
{
var valid = true;
var at = document.newaccount.email.value.indexOf ("@");
var dot = document.newaccount.email.value.lastIndexOf (".");
if ( document.newaccount.name.value == "" )
{
document.getElementById('noname').style.display = 'inline';
valid = false;
}
if ( at < 2 || dot < at+2 || dot+2 >= document.newaccount.email.value.length )
{
document.getElementById('wrongemail').style.display = 'inline';
valid = false;
}
if ( document.newaccount.password.value == "" )
{
document.getElementById('nopassword').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.password2.value == "" )
&& ( document.newaccount.password.value !== "" ) )
{
document.getElementById('nopassword2').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.password.value !== document.newaccount.password2.value )
&& ( document.newaccount.password.value !== "" ) && ( document.newaccount.password2.value !== "" ) )
{
document.getElementById('nomatch').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.password.value.length < 8 )
&& ( document.newaccount.password.value !== "" ) )
{
document.getElementById('passwordlength').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.agree[0].checked == false )
&& ( document.newaccount.agree[1].checked == false ) )
{
document.getElementById('noagree1').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.agree[0].checked == false )
&& ( document.newaccount.agree[1].checked == true ) )
{
alert ( "Sorry, but you must agree to the terms and conditions before creating an account." );
valid = false;
window.location = "/terms.html"
}
if ( document.newaccount.spamcheck.value == "" )
{
document.getElementById('nomath1').style.display = 'inline';
valid = false;
}
if ( ( document.newaccount.spamcheck.value !== ans )
&& ( document.newaccount.spamcheck.value !== "" ) )
{
document.getElementById('nomath2').style.display = 'inline';
valid = false;
}
if ( (!document.newaccount.store.checked)
&& (!document.newaccount.share1.checked)
&& (!document.newaccount.share2.checked) )
{
document.getElementById('noinfo').style.display = 'inline';
valid = false;
}
return valid;
}
//-->
</script>
<!-- END OF SCRIPT -->
Code: <form name="newaccount" onsubmit="return validate_form ( );" action="/submitted.html" method="get" > <center> <table style="text-align:center;" ><tr><td> What's <script type="text/javascript"> document.write (x1 + " " + "+" + " " + x2); </script> ? <input type="text" size="5" name="spamcheck" /></td></tr></table> <br /> <br /><br /> <input type="submit" name="send" value="Submit" /> </center> </form> Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with! I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below: function checkAvailibility() { // re-calculate... calculate (); if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) { document.ordersummary.emailQuote.value = "No"; setValue(); return true; } else { return false; } } function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name") document.ordersummary.Name.focus(); return false; } return true; } function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address") document.ordersummary.Address1.focus(); return false; } return true; } function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town") document.ordersummary.Town.focus(); return false; } return true; } function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County") document.ordersummary.County.focus(); return false; } return true; } function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode") document.ordersummary.Postcode.focus(); return false; } return true; } function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email") document.ordersummary.YourEmail.focus(); return false; } return true; } function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date") document.ordersummary.FuncDate.focus(); return false; } return true; } function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address") document.ordersummary.emailonly.focus(); return false; } return true; } Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area! Sam Hi Everyone, I am not able to figure out why the function "changeDiv(the_div,the_change)" is not called from the for loop in the function displayUsers(keeper)that I generated. The displayUsers is written to get rid of excess code in the function display(keeper). Can someone, please point out what the mistake is? Code: function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}
function getStyleObject(objectId)
{
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
//Shows input information for # of users selected
function displayUsers(keeper)
{
var display=keeper;
var i,user;
for(i=1;i<= display;i++)
{
user="user"+i;
changeDiv('user','block');
}
}
/*function display(keeper)
{
if (keeper == 1)
{
changeDiv('user1', 'block');
changeDiv('user2', 'none');
changeDiv('user3', 'none');
changeDiv('user4', 'none');
changeDiv('user5', 'none');
changeDiv('user6', 'none');
changeDiv('user7', 'none');
changeDiv('user8', 'none');
changeDiv('user9', 'none');
changeDiv('user10','none');
}
else if (keeper == 2)
...
...
...
else
{
changeDiv('user1', 'none');
changeDiv('user2', 'none');
changeDiv('user3', 'none');
changeDiv('user4', 'none');
changeDiv('user5', 'none');
changeDiv('user6', 'none');
changeDiv('user7', 'none');
changeDiv('user8', 'none');
changeDiv('user9', 'none');
changeDiv('user10','none');
}
}// end function display(keeper)*/
First off I didn't know whether to post this here or in the PHP section since it deals with both, but mostly JS. I have a PHP scraper that scrapes the job title, company name and location from a website and stores them in separate arrays. These values are then extracted out one at a time from the array and stored into a string, that is then passed to a Google Maps API. I can make this successfully happen once, the thing is I need to do it multiple times. I have an idea on what I should do but don't really know how to implement it (correctly). The idea I had was to create a function in the JavaScript section that accepts three values from PHP. This function would be called in my PHP for loop that extracts the values from the array into a string. The thing that confuses me is that the Map function is called via <body onLoad="initialize()">. Here's the link to my code Here's the code: Code: for (var i = 1; i < 5; i++)
var pl = eval("player" + i)
var namepl = eval("document.charInput.name" + i + ".value");
var skillpl = eval("document.charInput.skill" + i + ".value");
var genderpl = eval("document.charInput.gender" + i + ".value");
switch (skillpl) {
case "warrior":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 5, 5, 2, 2, 3, 3, 0, 0);
logEntry("black", namepl + " is now a warrior.");
break;
case "mage":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a mage.");
break;
case "healer":
pl = new player(namepl, skillpl, genderpl, 15, 10, 20, 2, 5, 5, 5, 2, 3, 0, 0);
logEntry("black", namepl + " is now a healer.");
break;
case "archer":
pl = new player(namepl, skillpl, genderpl, 20, 15, 0, 3, 3, 2, 2, 5, 5, 0, 0);
logEntry("black", namepl + " is now an archer.");
break;
}
}
Each player has three form values: document.charInput.name1.value document.charInput.skill1.value document.charInput.gender1.value In the case of the 2nd-4th player, it changes to name2.value, etc. Based on these three inputs, I need to iterate through all four players and make the player object for each of them, as I've done above. If anybody has any ideas on how to correct this or an alternative method, please help. Hi, I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>
Code: $hide = "";
while($ligne=mysql_fetch_array($ress)){
$hide.= "visibilite('$ligne[id]'); ";
$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";
$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";
$return.= "</div></td></tr>";
}
Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff I'm trying to make it so when you click a cell in a table it runs a function based on the value within that cell. With the current code, no matter what cell is clicked, the alert box displays the same number, which is the last number in my array. The variable, princ, is just being overwritten rather than writing code to each the cell with the proper value. Help is appreciated. Thanks. Code: for(i=0;i<=3;i++){
document.writeln('<tr>');
document.writeln('<th>'+(periodArray[i])+'</th>');
for(j=0;j<=2;j++){
princ = principleArray[j][i];
document.writeln('<td onclick="(calculateInterest(princ,1,1))">$'+principleArray[j][i]+'</td>');
}
document.writeln('</tr>');
}
function calculateInterest(principle,rate,period){
totalInterest = principle * rate * period;
totalLoanCost = principle + totalInterest;
alert('Total Interest: '+totalInterest+'\n'+'Total Loan Cost: '+totalLoanCost);
}
hi i'd like to ask how can i ask for a function inside a for loop , if i remove the loop the code works fine but i need it for 10 rows . please help , here is the code PHP Code: $content .=' <table cellspacing="2" cellpadding="2" border="0" align="center" > <SCRIPT LANGUAGE="JavaScript" type="text/JavaScript"> function doCalcAndSubmit() { // get both values kolicina1 = document.forms["vlez1"].kolicina.value; cena1 = document.forms["vlez1"].cena.value; // do some calculation vkupno1 = kolicina1 * cena1; // set the value in the right field document.forms["vlez1"].vkupno.value = vkupno1; } </script> <form id="vlez1" name="vlez1" method="POST" action="index_execute.php" > <tr valign="middle"> <td></td> <td align="center"><b> Sifra : </b></td> <td align="center"><b> Kolicina : </b></td> <td align="center"><b> Cena : </b></td> <td align="center"><b> Vkupno : </b></td> </tr> '; for($t=1;$t<11;$t++) { $content .= ' <tr valign="middle"> <td>'.$t.'.</td> <td><input type="text" id="sifra" autocomplete="off" name="sifra['.$t.']" align="middle" onblur="normalField(this);" onfocus="fireKeyListener_sifra(event); highlightField(this,1);" onkeyup="getList_sifra(event);" size="25" value="" /></td> <td><input type="text" id="kolicina" name="kolicina['.$t.']" align="middle" size="25" ></td> <td><input type="text" id="cena" name="cena['.$t.']" align="middle" size="25" onblur="doCalcAndSubmit();"></td> <td><input type="text" id="vkupno" disabled name="vkupno['.$t.']" align="middle" size="25" ></td> <input type="hidden" name="hidden_data" value="'.$data.'"> </tr>'; } $content .= '<tr> <td></td> <td></td> <td align="center"><input type="submit" id="submit2" name="submit2" value="Potvrdi" ></td> </tr> </form> </table> '; Hi, I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me... Situation: I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers. The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one. I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works... Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me): Code: var maxBoxes = 10;
function initSite() {
var rotator = document.getElementById("rotator");
rotator.innerHTML = "";
for (x = 0; x < maxBoxes; x++) {
rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>';
// various other stuff about myBoxes[x] also in here, but not relevant to the issue I think
applyMouseActions(document.getElementById("myDark" + x);
debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1);
}
}
function applyMouseActions(item) {
if (!item) return;
item.onmouseover = function(ev) {
alert("does this work?");
var thisNum = this.id;
thisNum = thisNum.charAt(this.id.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#fff";
}
item.onmouseout = function(ev) {
var thisNum = this.id;
thisNum = thisNum.charAt(thisNum.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#aaa";
}
}
initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work. I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice. So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box. They are all created the same way, the mouseover assigned the same way... All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-) Any idea what else I can try? Thanks! I am trying to create a simple auto-calculate function for a webpage. What should be happening: The 'onchange' command should pass the 'price' of the item to the function, the function should then cycle through all the dropdowns (or checkboxes or fields) and calculate the total. What is happening: It is only picking up the last checkbox. It seems that the 'for' loop only remembers the last item in the array. What am I doing wrong? How can I get the code to remember all the items? thanks, Code: <script language="JavaScript" type="text/javascript">
function calculateTotal(price)
{
var total = 0;
var cList = ['sel1','sel2','sel3'];
for (i=0;i<2;i++);
var select = GetE(cList[i]); total+= price * (select.options[select.selectedIndex].value);
GetE("totalShow").innerHTML = total.toFixed(2);
}
function GetE(id) {return document.getElementById(id); }
</script>
<html>
<head></head><body>
<form id="form1" name="form1" method="post" action="">
<select name="sel1" id="sel1" onchange="calculateTotal(100)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<select name="sel2" id="sel2" onchange="calculateTotal(200)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
<select name="sel3" id="sel3" onchange="calculateTotal(300)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br><br>
</form>
<br>total <span id="totalShow">0.00</span>
</body></html>
|
|||||||