|
JavaScript - Evaluate Performance Of Following Code Parts....
Similar TutorialsI have made this code and want help from professionals (people with a lot of Javascript knowledge). What do you Think of my code, and how would you improve it, to make it more efficient? Thanks in advance Code: <html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examinationNo.value === "") {
msg+="You must enter your Examination Number \n";
document.ExamEntry.examinationNo.focus();
document.getElementById('examinationNo').style.color="red";
result = false;
}
var x = document.ExamEntry.examinationNo.value
if(x.length != 4 || isNaN(x)){
msg+= "You must enter an Examination Number that has 4 digits \n";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
function lOEConfirm(levelOfEntry,lOEID){
if(confirm("You have selected "+levelOfEntry +" do you confirm?")){}
else {document.getElementById(lOEID).checked = false}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examinationNo">Examination Number</td>
<td><input type="text" name="examinationNo" /></td>
</tr>
<tr>
<td> Level Of Entry </td>
<td><input type="radio" name="levelOfEntry" id="GCSE" value="GCSE" onclick = "return lOEConfirm(this.value,this.id)" /> GCSE
<input type="radio" name="levelOfEntry" id="AS" value="AS" onclick = "return lOEConfirm(this.value,this.id)" /> AS
<input type="radio" name="levelOfEntry" id="A2" value="A2" onclick = "return lOEConfirm(this.value,this.id)" /> A2 <br />
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
this has to be on another file Code: <html> <head> <title>Success message</title> </head> <body> <H1> You entered all the data required </H1> </body> </html> Curious about the following issue. I currently have a dynamic drop-down based on the value of each option.. If selection in top drop-down is B it will show all options with a B contained in the second/resulting drop-down. Now - I also want to evaluate the options by having the script check for a few keywords.. Example - have it evaluate the drop-down on page load for options with text containing 'blah123' (ex. <option value="0323G">Qwerty - blah123</option>). And if any of the options have that text the script will generate an additional drop-down menu allowing you to select blah123 or other specified text. Say another thing I'd like to search each text string for is 'abump'. If there is 'blah123' and 'abump' contained within the drop-down, a third drop-down menu will be generated (as said before) with only blah123 and abump as options. Whichever of these is selected will narrow down the options available in the final drop-down menu. If any clarification is needed I would be more than happy to make this more clear. Any ideas? Hi, I was wondering if it's possible to capture a piece of HTML using XPath where the source is a sting rather than a document. I know how to use xPath and document.evaluate() as I've used it before on actual web pages - I just dont understand how to run it on a string of HTML. E.g. if I have this string: var stg = "<div>The best-laid schemes o' <span>mice</span> an' men</div>"; I'd like to convert this string into something that I can run the document.evaluate() on so that I can find the contents of the SPAN element (without loading the string into a real browser page). Thanks I am returning the present time - then using the .substr to remove all digits except the last two on the right (i.e effectively returning the value 32 from 65344532) I am then looping, subtracting 11 from that number until the value is less than 11. The intent being to then return the value from the appropriate matching array ID I have an array sl1 sl1[0]; sl1[1]; sl1[2]; sl1[3]; sl1[4]; sl1[5]; sl1[6]; sl1[7]; sl1[8]; sl1[9]; sl1[10]; The problem arises with evaluating two digit numbers beginning with zero - In cases where the last two numbers are greater than 09, the looping returns a 1 digit number for valuse less than 10, in cases where the last two digits begin with zero the loop will not begin. I have attempted to use the switch(n) to determine if any 01, 02, 03 ... etc exists but this is not evaluating correctly - is this due to using the date/time object and if so is there a good way to convert this to either a numeric or string datatype where the case can be evaluated correctly? Thanks in advance! -------- Hello. I have a page that has bunch of moving elements, and obviously I want the movement to be smooth. It worked just great in chrome, but very chunky in firefox. I ran a profiler, found the bottleneck and dealt with it, so things work fine now, but after seeing the result of profiler I now have few questions: The function that is responsible for moving elements around takes 33% of time. Here's the code: Code: Tile.prototype.relocate=function(x,y){
this.elem.style.left=this.x=x;
this.elem.style.top=this.y=y;
}
It's called from timer (setInterval) for elements that are not where they should be (they have .style.position set to "relative"). Is there a better way of moving elements around? Another function: Code: function type(code){
return code>>8;
}
It takes 13% of time. Now this is just ridiculous. 181854 binary shifts take 174.579ms. Is there a way to make it look like a function call but just replace the call with actual code at compile time, just like C's preprocessor? Hi, Which among the following for iterating objects in JavaScript is better in terms of performance & usage? A) property enumeration: for (var propName in someObject) { var value = someObject[propName]; } B) Array protocol for (var i=0; i<someObject.length; i++) { var value = someObject[i]; } C) forEach method Can forEach method be used across various browsers and OS? K Hi I am trying to get the url parts using javascript my url looks like this http://domain/#/Home I need to get the "Home" piece of the url I tried window.location.pathname but it only returns / can anybody help? Hi, I ve recently come across the Advanced jQuery background image slideshow by Marco Folio. I have implemented it fine but when it goes to load an image I get a black screen for a second or two. I have about 15 images and reading around I found out that it has to do with the loading of images and that it would be better adding an image preloader to it. I have tried several pre loaders and have got the to work on their own, but not with this slider. This is the script.js Code: var slideshowSpeed = 6000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [
{
"title" : "",
"image" : "1.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "2.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "3.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "4.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "5.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},{
"title" : "",
"image" : "6.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "7.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "8.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "9.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "10.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "11.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "12.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "13.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "14.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}
];
$(document).ready(function() {
// Backwards navigation
$("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
$("#next").click(function() {
stopAnimation();
navigate("next");
});
var interval;
$("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
$(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -400;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
$("#headertxt").css({"display" : "none"});
// Set the new header text
$("#firstline").html(photoObject.firstline);
$("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
$("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, 500);
});
};
var stopAnimation = function() {
// Change the background image to "play"
$("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
and this is the part of the html where it is added: Code: <div id="header_top"> <div id="headerimgs"> <div id="headerimg1" class="headerimg"></div> <div id="headerimg2" class="headerimg"></div> </div> </div> I would like to load 2 images on page load and then while it is displaying the 2 images to download to the browser cache the rest. Could you point me in the right direction. Thanks If I wanted to extract certain parts of the URL... how can I do this? I know how to extract the entire URL or just the search query but what if i want to do this /boxscore.asp?w=2&s=4&yr= Just extract the numbers 2 and 4 from the url. I want to make a new link for this site I am on to plug those 2 numbers into here /game.asp?gnum=2&gslot=4 That's basically what i want the new window to read. I have a nice javascript slideshow but it kills the rendering speed of my home page. According to Yahoo performance guru(s), javascript gets run before other stuff is rendered, so you fix that by putting the js code "at the end" of the html file. Putting it at the end puts the slideshow at the bottom which is not the desired result. And even abs positioning is slave to the <div> structure. How do I nullify the flow just for this one thing (I don't want to make the whole page absolute). Or is there a better way to fix the performance issue. Thanks. I would appreciate assistance with the following case. Thank you in advance. I have two fields with values, e.g. Field1: 123456-1- 01 Field2: 01 -0001 I need to compare the last two digits of Field1( 01 ) against the First two digits of Field2 ( 01 ) I would assume OnChange moving from Field2. If the two do not match throw an alert. Thanks!! Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today. The features of Qatrix a Hardware Accelerated Animation Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother. High performance code Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient. Easy-to-learn The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge. Cache system Qatrix included a simple cache system to storage and fetch data with high speed. Incredible size Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation. Read more and download: http://qatrix.com Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code:
<SCRIPT LANGUAGE="JavaScript">
var Tborder = .05
var howmanyIMG = 15
var winHeight = Math.floor(window.innerHeight);
var winWidth = Math.floor(window.innerWidth);
var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3);
var BoxWidth = BoxHeight;
var howmanyx = Math.floor(winWidth / BoxWidth) + 1;
var howmanyy = 3;
var HowMany = howmanyx * howmanyy;
var used = new Array(howmanyIMG);
var CMYG = ["00AEEF","EC008C","FFF200","41AD49"]
function RNDy(numby){
return Math.floor(Math.random()*numby);
}
function getUniq(){
/* alert("run getuniq");*/
var n;
while ( used[ n = RNDy(howmanyIMG) ] ){}
used[ n ] = true;
return n;
}
function ColorRND() {
if (RNDy(4) ==1) {
return true;
}else{
return false;
}
}
function PlacePop (HMx,HMy){
var counter = 0;
var countc = 0;
for(x=0;x<=HMx;x++){
var countr = 0;
for(y=0;y<HMy;y++){
var divy = document.createElement("div");
var divyID = 'box' + counter;
divy.setAttribute('id', divyID)
divy.style.position="absolute";
divy.style.zIndex = counter + 3;
divy.style.visibility = 'visible';
divy.style.borderWidth = '1';
divy.style.borderColor = '#000000';
divy.style.pixelLeft= x * BoxWidth + (2 * countc);
divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr);
divy.style.pixelWidth= BoxWidth;
divy.style.pixelHeight= BoxHeight;
if (ColorRND()){
/*divy.innerHTML = 'color';*/
divy.style.backgroundColor = "#" + CMYG[RNDy(4)];
}else{
/*divy.innerHTML = 'image';*/
divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)";
divy.style.backgroundPosition = "center";
/*RNDy(100) + "% " + RNDy(100) + "%";*/
}
document.body.appendChild(divy);
counter++;
countr++;
}countc++;
}
/*
alert("ran" + counter + " times");*/
}
/* used = null;*/
</script>
THANKS FOR ANY HELP YOU CAN GIVE! This is my first post. I am reading "Javascript The Good Parts" ~ The Method Invocation Pattern Page 28 and tried this, var myObject= { value:0, increment:function(inc){ this.value+= typeof inc==="number" ? inc:1; } } myObject.increment(2); alert(myObject.value); but alert(myObject.value); is returning a value of "2", when it should return "3". Can someone help? Reply With Quote 12-22-2014, 09:59 AM #2 rnd me View Profile View Forum Posts Visit Homepage Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts 0+2=2, not 3; the code is working correctly. This post will contain a few guidelines for what you can do to get better help from us. Let's start with the obvious ones: - Use regular language. A spelling mistake or two isn't anything I'd complain about, but 1337-speak, all-lower-case-with-no-punctuation or huge amounts of run-in text in a single paragraph doesn't make it easier for us to help you. - Be verbose. We can't look in our crystal bowl and see the problem you have, so describe it in as much detail as possible. - Cut-and-paste the problem code. Don't retype it into the post, do a cut-and-paste of the actual production code. It's hard to debug code if we can't see it, and this way you make sure any spelling errors or such are caught and no new ones are introduced. - Post code within code tags, like this [code]your code here[/code]. This will display like so: Code: alert("This is some JavaScript code!")
- Please, post the relevant code. If the code is large and complex, give us a link so we can see it in action, and just post snippets of it on the boards. - If the code is on an intranet or otherwise is not openly accessible, put it somewhere where we can access it. - Tell us any error messages from the JavaScript console in Firefox or Opera. (If you haven't tested it in those browsers, please do!) - If the code has both HTML/XML and JavaScript components, please show us both and not just part of it. - If the code has frames, iframes, objects, embeds, popups, XMLHttpRequest or similar components, tell us if you are trying it locally or from a server, and if the code is on the same or different servers. - We don't want to see the server side code in the form of PHP, PERL, ASP, JSP, ColdFusion or any other server side format. Show us the same code you send the browser. That is, show us the generated code, after the server has done it's thing. Generally, this is the code you see on a view-source in the browser, and specifically NOT the .php or .asp (or whatever) source code. I'm trying to get my Client Side Firefox DHTML app to display a list of eBooks. For this, i have the following files F:\Textbooks.html F:\eBooks.txt F:\FirstBook.txt F:\SecondBook.txt F:\ThirdBook.txt textbooks.html is my DHTML app eBooks.txt is the Library file with a listing of all of my eBooks. Inside of eBooks.txt is the following data: ----------------- FirstBook.txt, SecondBook.txt, ThirdBook.txt, ----------------- FirstBook.txt to ThirdBook.txt are my actual ebooks. The problem that i'm having is that When i try to click on any buttons other than the FirstBook button, i get the following error: ---------------------------------- Error: unterminated string literal Source File: file:///F:/Textbooks.html Line: 1, Column: 10 Source Code: LoadEbook(' ---------------------------------- So, unlike clicking on the FirstBook button, these other buttons do not load the eBook data into the DIV for displaying the eBook data. I use the DOM insepector to checkout the DOM of the button code, and it seems like whitespace maybe is the problem. However, i have removed whitespace from the HTMLdata string, and that's not fixing the problem. did i forget something silly? LOL i'm using FireFox 3.5 to develop this App. So obviously this will not work with anything other than Gecko Based browsers. here is my HTML code: <html> <head> <script language="JavaScript"> var eBookLibrary = "eBooks.txt"; var SystemPath = "f:" + String.fromCharCode(92) function Init() { // Initialize the eBook reader document.getElementById("EbookCanvas").style.visibility = "hidden"; document.getElementById("EbookToolbar").style.visibility = "visible"; document.getElementById("FileManager").style.visibility = "visible"; // Load the List of eBooks in the Library LoadBookList(); } function UpdateEbookList() { // Update the Library of Ebooks alert("Updating eBook Library"); // Go back to the File Manager, and Reload the List of Ebooks LoadBookList(); } function LoadBookList() { // This will load the list of books that are available var EbookList = LoadFromDisk(SystemPath + eBookLibrary); var EbookListArray = EbookList.split(","); for(var x = 0; x < EbookListArray.length -1; x++) { // Strip the Filename Extension off of the eBook File Name // The Name of the Book is always the first Index in the Array var BookName = EbookListArray[x].split("."); // Remove the weird whitespace - it screws things up...i think... BookName[0] = BookName[0].replace(/(^\s*|\s*$)/g, ""); var HTMLdata = HTMLdata + "<input type='button' value='" + "FirstBook" + "'" + " onClick=LoadEbook('" + EbookListArray[x] + "');><br>"; } // For some ****ed up reason the first string always generates an 'undefined' even though it's nonsense // So just delete that from the HTMLdata string, because it's just ugly - LOL HTMLdata = HTMLdata.replace("undefined", ""); HTMLdata = HTMLdata.replace("", " "); // Write the HTML data to the DIV document.getElementById("FileManager").innerHTML = HTMLdata; } function LoadEbook(EbookName) { // Hide the File Manager and Show the Ebook Canvas document.getElementById("FileManager").style.visibility = "hidden"; document.getElementById("EbookCanvas").style.visibility = "visible"; document.getElementById("EbookToolbar").style.visibility = "visible"; // Load the Ebook content into the Ebook Reader Pannel var EbookContent = LoadFromDisk(SystemPath + EbookName); document.getElementById("EbookCanvas").innerHTML = EbookContent; } function LoadFromDisk(filePath) { if(window.Components) try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); file.initWithPath(filePath); if (!file.exists()) return(null); var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream); inputStream.init(file, 0x01, 00004, null); var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream); sInputStream.init(inputStream); return(sInputStream.read(sInputStream.available())); } catch(e) { //alert("Exception while attempting to load\n\n" + e); return(false); } return(null); } </script> </head> <body onLoad="Init();"> <div id="FileManager" style="position: absolute; top: 0px; left: 0px; visibility: visible;"> The eBook Library's List of Books will be listed here. Click on one to open it in the eBook Reader </div> <br> <div id="EbookCanvas" style="position: absolute; top: 0px; left: 0px; visibility: hidden;"> </div> <br> <div id="EbookToolbar" style="position: absolute; top: 100px; left: 0px;"> <input type="button" value="Open" OnClick="Init();"> <input type="button" value="Update" OnClick="UpdateEbookList();"> <input type="button" value="Exit" OnClick="MainMenu();"> </div> </body> </html> Hi all, I hope someone can advise whether such a script exists for what am wanting to do. From time to time, I need to send password information or login details and password information to some users. At the moment, am doing it via email with a subject named FYI and the body of the email basically just contain the login and the password or in some case, just the password. What am wanting to know is whether I can put these information into a HTML file which contains an obfuscated Javascript with a button that a user will click that will prompt for his login information and then will display the password. In its simplest form, I guess I am looking for a Javascript that will obfuscate a HTML file that contains the password. Anyway, hopefully someone understand what am looking for. I found some website that offers such service as obfuscating a HTML file but am hoping it can be done via a Javascript so it is at least "portable" and I do not have to be online. Any advice will be much appreciated. Thanks in advance. Hey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas? Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>City and State Lookup</title> <style type="text/css"> h1 { font-family:Arial; color:navy; } p, td { font-family:arial; font-size:11px; } </style> <script type="text/javascript"> /* <![CDATA[ */ var httpRequest = false; function getRequestObject() { try { httpRequest = new XMLHttpRequest(); } catch (requestError) { try { httpRequest = new ActiveXObject ("Msxm12.XMLHTTP"); } catch (requestError) { try { httpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (requestError) { window.alert("Your browser does not support AJAX!"); return false; } } } return httpRequest; } function updateCityState() { if (!httpRequest) httpRequest = getRequestObject(); httpRequest.abort(); httpRequest.open("get","zip.xml"); httpRequest.send(null); httpRequest.onreadystatechange=getZipInfo; } function getZipInfo() { if (httpRequest.readyState==4 && httpRequest.status == 200) { var zips = httpRequest.responseXML; var locations = zips.getElementsByTagName("Row"); var notFound = true; for (var i=0; i<locations.length; ++i) { if (document.forms[0].zip.value == zips.getElementsByTagName( "ZIP_Code")[i].childNodes[o].nodeValue) { document.forms[0].city.value = zips.getElementsByTagname( "City") [i].childNodes[0].nodeValue; document.forms[0].state.value = zips.getElementByTagName( "State_Abbreviation")[i].childNodes[0].nodeValue; notFound = flase; break; } } if (notFound) { window.alert("Invalid ZIP code!"); document.forms[0].city.value = ""; document.forms[0].state.value = ""; } } } /* ]]> */ </script> </head> <body> <h1>City and State Lookup </h1> <form action=""> <p>Zip code <input type="text" size="5" name="zip" id="zip" onblur="updateCityState()" /></p> <p>City <input type="text" name="city" /> State <input type="text" size="2" name="state" /></p> </form> </body> </html> Hi guys.. I really need a bit of help.. is anyone looking at this good with JS? I have a php form validation script but i think its a bit slow and would rather a JS script instead... here is what i have in php.. PHP Code: <?php if(isset($_POST['submit'])) { $firstName = $_POST['firstName']; $lastName = $_POST['lastName']; $email = $_POST['email']; $mobile = $_POST['mobile']; $comments = $_POST['comments']; $errors = array(); function display_errors($error) { echo "<p class=\"formMessage\">"; echo $error[0]; echo "</p>"; } function validateNames($names) { return(strlen($names) < 3); } function validateEmail($strValue) { $strPattern = '/([A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4})/sim'; return(preg_match($strPattern,$strValue)); } function validateMobile($strValue) { $strPattern = '/^\d{10}$/'; return(preg_match($strPattern,$strValue)); } function validateComments($comments) { return(strlen($comments) < 10); } if(validateNames($firstName)) { $errors[] = 'Please Enter Your First Name'; } if(validateNames($lastName)) { $errors[] = 'Please Enter Your Second Name'; } if(!validateEmail($email)) { $errors[] = 'Please Enter Your Correct Email'; } if(!validateMobile($mobile)) { $errors[] = 'Please Enter Your Correct Mobile Number'; } if(validateComments($comments)) { $errors[] = 'Please Enter A Comment More Than 10 Characters'; } if(empty($errors)) { $to = "info@eventpromotion.ie"; $subject = "Event Promotion Enquiry!"; $body = "First Name: " . $_POST['firstName'] . "\nLast Name: " . $_POST['lastName'] . "\nEmail: " . $_POST['email'] . "\nMobile: " . $_POST['mobile'] . "\nMessage: " . $_POST['comments']; $headers = "From: ". $firstName ." ". $lastName . " <" . $email . ">\r\n"; if (mail($to, $subject, $body, $headers)) { echo("<p class=\"formMessage\">Thanks for submitting your enquiry.</p>"); } else { echo("<p class=\"formMessage\">Message delivery failed.</p>"); } } else { //echo "error"; display_errors($errors); } } ?> <form id="form" method="post" action="index.php#quickContact"> <p> <label>First Name</label><br /> <input type="text" name="firstName" value="<?php if(isset($firstName)){echo $firstName;} ?>" /> </p> <p> <label>Last Name</label><br /> <input type="text" name="lastName" value="<?php if(isset($lastName)){echo $lastName;} ?>" /> </p> <p> <label>Email:</label><br /> <input type="text" name="email" value="<?php if(isset($email)){echo $email;} ?>" /> </p> <p> <label>Mobile:</label><br /> <input type="text" name="mobile" value="<?php if(isset($mobile)){echo $mobile;} ?>" /> </p> <p> <label>Comments:</label> <br /> <textarea name="comments" cols="30" rows="3" ><?php if(isset($comments)){echo $comments;} ?></textarea> </p> <p> <input class="send" type="image" src="images/submit2.gif" name="submit" value="Submit" /></p> </form> does anyone know how to transfer this to JS so that it will be easy to understand.. Im not good with JS at all |
|||||||