JavaScript - For Some Reason It Will Not Work
I am attempting to create a web based quote system that pops up a preview of the fencing type selected on click. but nothing works.. im frustrated with this and need a bit of guidance. hopefully someone will help
here is the HTML body of the form Code: <body> <form action="" id="fenceprice" onsubmit="return false;"> <fieldset> <legend>Let's get a quote together for you!</legend> <p>How many feet of fencing do you need? <input type="number" name="length" min="1"></p> <label >Type of fence (Price/foot)</label><br> <input type="radio" name="fence" value="StockadePrivacy" onclick="calculateTotal()" /> Stockade Privacy Fence ($13.99)<br> <input type="radio" name="fence" value="OverlappingPrivacy" onclick="calculateTotal()" /> Overlapping Privacy Fence ($14.99)<br> <input type="radio" name="fence" value="ShaddowboxPrivacy" onclick="calculateTotal()" /> Shaddowbox Privacy Fence ($15.99)<br> <input type="radio" name="fence" value="3BoardHorse" onclick="calculateTotal()" /> 3 Board Horse Fence ($5.99)<br> <input type="radio" name="fence" value="4BoardHorse" onclick="calculateTotal()" /> 4 Board Horse Fence ($6.99)<br> <input type="radio" name="fence" value="4FtChain" onclick="calculateTotal()" /> 4 foot Chain Link Fence ($6.50)<br> <input type="radio" name="fence" value="6FtChain" onclick="calculateTotal()" /> 6 foot Chain Link Fence ($7.99)<br> <input type="radio" name="fence" value="4FtField" onclick="calculateTotal()" /> 4 foot Field Fence ($5.25)<br> <input type="radio" name="fence" value="6FtField" onclick="calculateTotal()" /> 6 foot Field Fence ($7.25)<br> <input type="radio" name="fence" value="4FtNoClimb" onclick="calculateTotal()" /> 4 foot Field Fence with No Climb Wire ($5.73)<br> <input type="radio" name="fence" value="4FtCross" onclick="calculateTotal()" /> 4 foot Cross Fence ($6.75)<br> <input type="radio" name="fence" value="4FtCrossWire" onclick="calculateTotal()" /> 4 foot Cross Fence with No Climb Wire ($7.25)<br> <input type="radio" name="fence" value="BarbedWire" onclick="calculateTotal()" /> 4 Strand Barbed Wire Fence ($5.00)<br> <input type="radio" name="fence" value="4FtVinyl" onclick="calculateTotal()" /> 4 foot Vinyl Fence ($15.99)<br> <input type="radio" name="fence" value="6FtVinyl" onclick="calculateTotal()" /> 6 foot Vinyl Fence ($17.99)<br> <p> <label for='includepaint' class="inlinelabel"> Include Paint($1.25/foot)</label> <input type="checkbox" id="includepaint" name='includepaint' onclick="calculateTotal()" /> </p> <p> <input type= "submit" name="submit" onclick="calculateTotal()" /> </p> <div id="totalPrice"></div> </fieldset> </form> </body> here is my js for the preview images (js.js) Code: var app = preview.module('app' , ['ui.filters']); function MainController($scope) { function Preview(type, imageSrc){ this.type = type; this.imageSrc = imageSrc; }; var fenceType = [ new Fence("StockadePrivacy" , "nicks work/single gate stockade.jpg"), new Fence("OverlappingPrivacy" , "nicks work/board over board privacy fence (3).jpg"), new Fence("ShaddowboxPrivacy" , "nicks work/shadowbox (2).jpg"), new Fence("3BoardHorse" , ""), new Fence("4BoardHorse" , "nicks work/titan (37).jpg"), new Fence("4FtChain" , ""), new Fence("6FtChain" , "nicks work/1003154_498266626917855_1385007596_n.jpg"), new Fence("4FtField" , "nicks work/wire by road.jpg"), new Fence("6FtField" , "nicks work/field wire.jpg"), new Fence("4FtNoClimb" , ""), new Fence("4FtCross" , "nicks work/cross fence black.jpg"), new Fence("4FtCrossWire" , ""), new Fence("BarbedWire" , ""), new Fence("4FtVinyl" , "nicks work/4ft vinyl.jpg"), new Fence("6FtVinyl" , "nicks work/6ft vinyl.jpg") ]; $scope.fenceType = fenceType; $scope.getCurrentFenceImage = getCurrentFenceImage; function getCurrentFence() { return_.find($scope.fenceType, { type: $scope.fenceType}) || {}; } function getCurrentFenceImage() { return getCurrentFence().imageSrc; }; } here is my code for the form calculations (formcalculations) Code: var fence_price = new Array(); fence_prices["StockadePrivacy"]=13.99; fence_prices["OverlappingPrivacy"]=14.99; fence_prices["ShaddowboxPrivacy"]=15.99; fence_prices["3BoardHorse"]=5.99; fence_prices["4BoardHorse"]=6.99; fence_prices["4FtChain"]=6.5; fence_prices["6FtChain"]=7.99; fence_prices["4FtField"]=5.25; fence_prices["6FtField"]=7.25; fence_prices["4FtNoClimb"]=5.73; fence_prices["4FtCross"]=6.75; fence_prices["4FtCrossWire"]=7.25; fence_prices["BarbedWire"]=5; fence_prices["4FtVinyl"]=15.99; fence_prices["6FtVinyl"]=17.99; function getQuantity() { //Assume form with id="theform" var theForm = document.forms["fenceprice"]; //Get a reference to the TextBox var length = theForm.elements["length"]; var howmuch =0; //If the textbox is not blank if(quantity.value!="") { howmuch = parseInt(quantity.value); } return howmuch; } function paintPrice() { var paintPrice=0; //Get a reference to the form id="fenceform" var theForm = document.forms["fenceprice"]; //Get a reference to the checkbox id="includecandles" var includePaint = theForm.elements["includepaint"]; //If they checked the box set candlePrice to 5 if(includePaint.checked==true) { paintPrice=1.25; } //finally we return the candlePrice return paintPrice; } function getFenceSizePrice() { var fenceSizePrice=0; //Get a reference to the form id="fenceform" var theForm = document.forms["fenceform"]; //Get a reference to the fence the user Chooses name=selectedCake": var selectedFence = theForm.elements["selectedfence"]; //Here since there are 4 radio buttons selectedCake.length = 4 //We loop through each radio buttons for(var i = 0; i < selectedFence.length; i++) { //if the radio button is checked if(selectedFence[i].checked) { fenceSizePrice = fence_prices[selectedFence[i].value]; break; } } //We return the fenceSizePrice return fenceSizePrice; } function getTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var fencePrice = getFenceSizePrice() * getQuantity() + paintPrice() * getQuantity(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price For Fencing $"+fencePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } Reply With Quote 12-19-2014, 01:01 AM #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 So have you used your error console? Or your JavaScript debugger? Hit the F12 key to bring up both. I recommend using the Chrome browser for this because I like its integration of the console and debugger, et. al., best. But any modern browser will do. Are you getting errors right off the bat from the error console? Are you getting errors when you try to select a fence, etc.? Tell us *WHAT* is going wrong. Don't make us re-construct your page so we can use our error console. And if you still can't figure it out, can you post the page LIVE someplace? Give us a URL to look at? Similar TutorialsThis code snippet below was extracted from a rather large javascript. It is not written here to function alone, but it is solely to illustrate my question, Why can't a variable be read from within a function when it has been set as the text of a url address, in this case www.google.com)? When I click on the browser HREF that calls the OnClick event, the function SwitchFN, I receive the following 2 alerts: "Ones" (variable is output as expected) "undefined" (the second variable is no longer defined within the function, however using the command alert(numtwo) in the variable definition section of my code will work as expected and the alert will be "www.google.com" Why can't the function see the variable when it is a URL? Code: I have set several default variables up in the beginning of my script: var numone = "Ones" var numtwo = "www.google.com" /// more variables set /// more functions function switchfn(nfn,nrm) { document.cookie = "mvrfile=" + numone alert(numone) alert(numtwo) } document.write('<TR><TD BGCOLOR=# ALIGN=LEFT VALIGN=top WIDTH=60 COLSPAN=2><A HREF="#" onClick="switchfn(\'' + myview + '\',\'' + mytxt + '\')">' + mytxt + '</A></TD></TR>') ; I have the following function: Code: function sonKare(sayac, oteki) { var vertical, horizontal = hangiYataySira(sayac, oteki), j, k, l, m, united, tekRakam, actualV = [], actualH = [], numaralar = [1, 2, 3, 4, 5, 6, 7, 8, 9], olmayanlar = []; if(ilkSefer === true) { vertical = hangiDikeySira(rakamlar.length); ilkSefer = false; } else { vertical = hangiDikeySira(rakamlar.length - 1); } for(j = 0; j <= vertical.length - 1; j ++ ) { if(rakamlar[vertical[j]] !== undefined) actualV.push(rakamlar[vertical[j]]); } for(k = 0; k <= horizontal.length - 1; k ++ ) { if(rakamlar[horizontal[k]] !== undefined) actualH.push(rakamlar[horizontal[k]]); } united = actualV.concat(actualH); //---- Olmayan rakamları bulan kısım ------------ outer: for(l = 0; l <= numaralar.length - 1; l++) { for(m = 0; m <= united.length - 1; m++) { if(numaralar[l] === united[m]) continue outer; if(m === united.length - 1 && numaralar[l] !== united[m]) olmayanlar.push(numaralar[l]); } } //---------------------------------------------- if(olmayanlar.length > 1 || olmayanlar.length === 0) { rakamlar = []; document.form1.buton.click(); // THIS LINE DOES NOT WORK SECOND TIME } else { $("_" + oteki + "_" + sayac).value = olmayanlar[0]; rakamlar.push(olmayanlar[0]); sayac++; if(sayac === 10) return; else sonKare(sayac, oteki); //CALLS ITSELF } } This is a recursive function. As stated above there is a line which does not work for the second time. What I mean is, it works perfect for the first time and after function calls itself, it doesn't work. Javascript does execute the line above it but just disregards that document.form1.buton.click(); line. I use Firebug for debugging and I checked it many times, when that expression needs to be executed for the second time, JavaScript just ignores it and immediately goes at the end of the function... I just can't figure out why JS does such a thing? p.s: Don't bother about weird variable names, they are not in English but in Turkish which is my native language Hi, I'm making a Google Map that reads info from a database and pulls Twitter usernames from it to plot points on a map. In the infowindow of these points I have some code that displays the Twitter users latest tweet. There's alot of code for this map so i'll only show you the part i'm working on: Code: function readData() { var request = GXmlHttp.create(); request.open("GET", "phpsqlinfo_result.php", true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); // obtain the array of markers and loop through it i=[0]; markers=[0]; map.getInfoWindow().hide(); gmarkers = []; map.clearOverlays(); side_bar_html = ""; var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new GLatLng(lat,lng); var label = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var html = '<' + 'script src="http://twitter.com/javascripts/blogger.js"><' + '/script><' + 'script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' + label + '.json?callback=twitterCallback2&count=1"><' + '/script><br /><div id="twitter_update_list" style="list-style:none"></div>'; // create the marker var marker = createMarker(point,label,html); map.addOverlay(marker); } // put the assembled side_bar_html contents into the side_bar div document.getElementById("side_bar").innerHTML = side_bar_html; } } request.send(null); } var html is where it's all happening. I'm using the Twitter script from http://limetouch.com/article/valid-x...vascript-code/ and I have it laid out with all them ' + ' to break it up so it doesn't end the actual javascript used to create the map. I'm new to Javascript so I don't know too much. I know that this method is a really backwards way of doing it, but it works for Firefox. I'm able to retrieve the users latest tweet when I click on their map marker. What I want to know is why it doesn't work in any other browser? I've tried IE7+8, Google Chrome, Opera, and Safari and no tweet displays. Sub-question: While a tweet does display in Firefox, the infowindow doesn't resize with the dynamic content. Any way to fix that? Hi there, i have this simple script that replaces the scrollbar of an iframe called iFrame1 with 2 up and down arrow images, but it only works in IE, i've tried it in Chrome and Firefox... here is the code Code: <script type="text/javascript" language="javascript"> function bsh_iFrame1(step,time){hs_iFrame1=setInterval("sh_iFrame1("+step+")",time)} function esh_iFrame1(){clearInterval(hs_iFrame1)} function sh_iFrame1(step) { scrollx=iFrame1.document.body.scrollLeft scrolly=iFrame1.document.body.scrollTop scrolly=scrolly+step iFrame1.window.scroll(scrollx,scrolly) } </script> Code: </td><td align="center" valign="middle" width="31"><img src="up.png" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(-3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(-1,20)" onMouseOver="bsh_iFrame1(-1,20)" onMouseOut="esh_iFrame1()"><br> <img src="down.png" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(1,20)" onMouseOver="bsh_iFrame1(1,20)" onMouseOut="esh_iFrame1()"> thanks in advance for any answers... I am trying to fix some datetime strings so I can convert form values into date objects so I can compare the dates in my validation process. the date time strings look like - 7/21/2011 8:00am for some reason the am is not being replaced by " am" . here's the function Code: function ampm(str){ str.replace(/am/gi," am") str.replace(/pm/gi," pm") return str } for example the result of ampm("8:00am") is 8:00am and not 8:00 am .. it seems so simple. hi all. im having problems with this ajax script i wrote: Code: function admin_adduser() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } user = document.getElementById('user_user').value; user = user.replace(/^\s+|\s+$/g, '');// trim whitespace //check if name is unique unique = 'false'; var params = "?user=" + escape(user); var url="_check_username.php"; url=url+params; ajaxedInner = ""; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { unique = xmlHttp.responseText.replace(/^\s+|\s+$/g, ''); //trims all whitespace! //alert(unique); } } } if(unique == 'true') { //alert("working: " + unique); password = document.getElementById('user_password').value; var params = "?user_user=" + escape(user) + "&user_password=" + escape(password); var url="_admin_add_user.php"; url=url+params; ajaxedInner = "users"; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); document.getElementById('user_password').value = ""; document.getElementById('user_user').value = ""; } else { alert('Please select a unique name for the new staff member\nadd a middle initial maybe?'); } } if i alert(unique) it tells me 'true' (string) but still doesnt go into the create part of the script, i just get the alert('Please select a unique name for the new staff member\nadd a middle initial maybe?'); any ideas? i know im probably missing something basic but its really annoying lol btw - the php for the _check_username.php is simple: PHP Code: <?php if(!isset($_SESSION)) {session_start();} if($_SESSION['authorised'] != true) { exit; } include 'config.php'; include 'opendb.php'; $user = $_REQUEST['user']; $query = "SELECT user FROM user WHERE user='$user'"; echo $query; $result = mysql_query($query) or die('false'); $row = mysql_fetch_array($result, MYSQL_ASSOC); if($row) { echo 'false'; } else { echo 'true'; } mysql_free_result($result); ?> Hi all. Can someone please help me make this code accurate so it counts the correct number of characters? when u click on the box, it should display 0. when u type in the box, it should count up by 1. when u click on the box, and u delete a character or characters, it subtracts that many code: Code: <form method="POST"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"> <textarea onkeyDown="count_it(this)" rows="12" name="charcount" cols="60" wrap="virtual"></textarea> </td> </tr> <tr> <td width="100%"><div align="right"><p> <input type="text" name="displaycount" size="20"></p> </div></td> </tr> </table> </form> <script language="JavaScript"> function count_it(what){ formcontent=what.form.charcount.value what.form.displaycount.value=formcontent.length } </script> I started on the following page (part of an asp.net solution), but the damned thing keeps reloading. Anyone able to spot the problem? Cheers! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> Untitled Page </title></head> <body> <form name="form1" method="post" action="jstest3.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMjYxNzg2NjFkZMc95XPGgLBVJLhpE9SpA+WIaf+s" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKUmIGgCgLs0bLrBgKM54rGBm+z7+T68pYhg8H9O6b/Ex0HpZ0A" /> </div> <div> <input name="TextBox1" type="text" id="TextBox1" /> <input type="submit" name="Button1" value="Button" id="Button1" /> <script language="javascript" type="text/javascript"> if (parent != null) { tb = parent.document.getElementById("TextBox"); tbLocal = document.getElementById('TextBox1'); if (tb != null) tbLocal.value = tb.value; btn = document.getElementById('Button1'); if (btn != null) btn.click(); } </script> </div> </form> </body> </html> Here is the link in question. I have created a small page with the isolated problem on it. http://frontendaudio.com/v/vspfiles/...pt_tester.html the javascript file that is referenced basically only does one thing. It searches for "> >" and then alerts us whether or not it's on the page. --- It pulls the innerHTML of the entire document --- the searches it - and indexes the string. I echoed the string out to a text area so you could see the string "> >" is clearly there after the word microphones in the link tag... </a> > < etc.. Any thoughts on how I can detect this string somehow? Thanks. Here is the code inside the javascript file. Code: var myStringDiscuss = 'microphones</a> >'; myStringDiscuss = myStringDiscuss.replace(/~/g,""); // unmunge function discussDetection(){ var str = document.getElementsByTagName('html')[0].innerHTML; str = str.toLowerCase(); // to make case insensitive var category_string = str.indexOf(myStringDiscuss); if (category_string == -1) { alert("not on this page"); } else { alert("IS on the page"); } } window.onload= discussDetection; Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) { steps = 1000; elem = document.getElementById(obj); function fadeIn() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ i +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration); } } function fadeOut() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration); } } /* One for Fade in and anything will be fade out*/ if(toggle == 1) { fadeIn(); } else { fadeOut(); } } Thanks, Jon W Hello again, I have written the following code: <script language="Javascript"> var win=0 </script> <Form name="Form"> <Input type="button" name="button" value="Click" onClick="Good()"> </form> <script language="Javascript"> function Good() { if (win=0) { alert('You win!') } else { alert("You lose!") } } </script> Based on the following, when I click the button it should say "You win!" as win=0 but it keeps saying "You lose!". Why is this happening? So here is the story I paid for some to create a slideshow, and it works fine in the orginial html document but when i copy and paste the code into my html document the scroller to the left of the image stops moving up and down I put the working file at this address: http://rusty813.comuv.com/ my files at this address where i am: http://rusty813.comuv.com/sample2.html the guy i paid to do work refuses to help even those i advertised the price in my ad and he wanted me to give it to pay him more to tell which code to change but go ahead take a look at the coding thanks alot for your guys help I know we've all seen those text fields where when you type in am HTML tag it changes color! Example: <div> blah blah blah blah </div> I know that there is no flash involved, so how does it work? Hi I'm doing some js online tutorials and am stuck at this piece of code. It's supposed to be a carousel that loops. It's supposed to have the main image in the middle and images on either side of it. Something similar to www.atlanticrecords.com. But my code doesn't make it slide. I'm a complete novice to javascript and am desparate for this to work. This is the code if anyone would like to show me my mistakes. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Interactive Carousel</title> <style type="text/css"> #feature_holder{position:relative; top:150px; overflow:hidden; height:400px; width:100%;} .feature{position:absolute; width:1000px; height:400px; top:0; z-index:1;} .arrow_right{right:20px;} .arrow_left{left:20px;} .arrow{height: 70px; width:70px; z-index:2; top:160px; position:absolute; background:#000;} #feature_1{background: #666666;} #feature_2{background: #225566;} #feature_3{background: #006600;} #feature_4{background: #ff0066;} #feature_5{background: #00ff00;} #feature_6{background: #0380ff;} </style> </head> <body> <div id="feature_holder"> <div class="arrow arrow_left"></div> <div class="arrow arrow_right"></div> <div class="feature" id="feature_1"></div> <div class="feature" id="feature_2"></div> <div class="feature" id="feature_3"></div> <div class="feature" id="feature_4"></div> <div class="feature" id="feature_5"></div> <div class="feature" id="feature_6"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> var BrowserWidth var FeatureCount var CurrentFeature = 1 var NextFeature var NextNextFeature var PrevFeature var PrevPrevFeature $(document).ready (function(){ setFeatureCount() getBrowserWidth() setClicks() setNextPrev() setFeaturePosition() }); setFeatureCount = function(){ FeatureCount = $('#feature_holder').children('.feature').length; } getBrowserWidth = function(){ BrowserWidth = $(window).width(); } setClicks = function(){ $('#feature_holder').children('.arrow_left').click(function(){ SlideInFeature(true); }); $('#feature_holder').children('.arrow_right').click(function(){ SlideInFeature(false); }); } setNextPrev = function(){ PrevFeature = (CurrentFeature-1); PrevPrevFeature = (CurrentFeature-2); NextFeature = (CurrentFeature+1); NextNextFeature = (CurrentFeature+2); if (CurrentFeature == 1){ PrevFeature = FeatureCount;} setFeaturePosition = function(){ $('#feature_holder').children('.feature').css('left', -9999); var CurrentPositioning = (BrowserWidth/2) - 500; $('#feature_'+CurrentFeature).css('left', CurrentPositioning); var NextPositioning = (BrowserWidth/2) + 500; $('#feature_' +NextFeature).css('left', NextPositioning); var PrevPositioning = (BrowserWidth/2) - 1500; $('#feature_'+PrevFeature).css('left', PrevPositioning); }} </script> </body> </html> Thanks Can somebody give me a bit of help with the below code. The problem is that it works fine for the first pop up box but not for the other(s). I think it has something to do with the script using the getelementbyid. Can anybody help? Code: <script type="text/javascript"> var appearance = "notShown" function show() { if (appearance == "notShown") { document.getElementById('P1').style.display = "inline"; appearance = "shown"; } } function remove() { document.getElementById('P1').style.display = "none"; appearance = "notShown"; } </script> <style type="text/css"> p#P1 { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; } p#P1 b { padding: 10px; float: left; } p#P1 span { width: 300px; float: left; padding: 10px;} button.close {float:right; margin: 5px; } </style> <a href="#" onclick="show()">box 1</a> <p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button> <span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span> </p> <br /><br /><br /><br /><br /><br /> <a href="#" onclick="show()">box 2</a> <p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button> <span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span> HI i have a form and submit bottom in my page . I've wrote a function that check the page element's value before submitting the form. my problem is this i couldn’t stop submitting the form before it has checked . Actually I want before the form submitted it has checked and if there was no problem then the function return true and submitted and if there was any problem, the function return false and the form stopped submitting I ‘ve added a function to the onclick of submit button and it call a function that check the values thanks Hi there! I'm completely new to javascript coding, but have suddenly found myself in need of using it. here's a little background (helps me keep track of where I am in my question). I've been "playing" with php for quite a while, and I decided I wanted to see how hard it would be to code a fairly simple forum. So far, everything is working out with very little need for bug fixes and some efficiency suggestins from a friend. I'm currently building the registration page, and wanted to have it compare the password and verification while the form is being filled. I found a code to do it after a few searches, but evidently I am missing something about how it works. This is the code I found: Code: <script type='text/javascript'> function comparePasswords() { if(document.getElementById('pass1').value != document.getElementById('pass2').value) { $('passwordShow').innerHTML = 'Passwords do not match'; } else { $('passwordShow').innerHTML = ''; } } </script> This is the full code for the form I am trying to use it in: Code: <?php echo "<script type='text/javascript'>\n function comparePasswords()\n {\n if(document.getElementById"; echo "('pass1').value != document.getElementById('pass2').value)\n {\n $('passwordShow').innerHTML"; echo " = 'Passwords do not match';\n }\n else\n {\n $('passwordShow').innerHTML = '';\n"; echo " }\n }\n</script> "; echo "<form action='index.php?pg=verify' method='post'>"; echo "<table align='center' style='color: #C0C0C0'>"; echo "<tr><td>Username:</td><td><input type='text' name='user' /></td></tr>"; echo "<tr><td>Password:</td><td><input type='password' name='pass1' /></td></tr>"; echo "<tr><td>Re-enter Password</td><td><input type='password' name='pass2' onkeyup='comparePasswords();' /></td></tr>"; echo "<tr><td>Email<br />(used for password recovery)</td><td><input type='text' name='email' /></td></tr>"; require ('questions.php'); echo "<input type='hidden' name='source' value='reg' />"; echo "<br><center><input type='submit'/></form>"; ?> What am I not understanding about this? hello, I found this script : http://roshanbh.com.np/2008/06/accor...ng-jquery.html I implemted this into my website http://test.tamarawobben.nl but as you can see it don't work. Can anyone help me figure out why the script does not work. Roelof So i got this to work once, but i can't get it to work now. I am trying to make it so when i clicked a radio button, i get the description of each object i click. Please help!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <head> <script type="text/javascript"> var vegetarian="lots of mushrooms" var hawaiian="overloaded with juicy" var meatlovers="loads of pepperoni" </script> </head> <body> <form name="pizzaList" action="" method="get"> <p> Click the buttons for a description of each pizza.</p> <p> <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=vegetarian" />Vegetarian <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=hawaiian" />Hawaiian <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=meatlovers" />MeatLovers </p> </form> <p> <textarea name="pizzaDesc"></textarea></p> <html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> |