JavaScript - Can't Get Concatenation To Work?
I'm pretty new to Javascript programming. I have this function I created that is basically pretty simple. It does edit checks, however, at the end of my script, I display an error message using an alert statement and at the end of the first sentence, the word "undefined" shows up before the line break. The only thing I can think of that is causing it is the "+" sign. Here is my code below:
Code: function CheckEdits() { var msg; ok = true; if (document.getElementById("txtName").value == '') { msg = msg + '\nName'; ok = false; } if (document.getElementById("txtOrganization").value == '') { msg = msg + '\nOrganization'; ok = false; } if (document.getElementById("txtSubject").value == '') { msg = msg + '\nSubject'; ok = false; } if (document.getElementById("txtNote").value == '') { msg = msg + '\nNote'; ok = false; } if (msg != '') { var msg2; msg2 = "Please provide the following:\n" + msg; alert(msg2); } } What am I doing wrong? Thanks! Similar TutorialsNew to javascript and not familiar with the variable concatenation or for/next loop procedures. The following code works, but I am adding 50 more division id's numbered 'c3' to 'c52' and need to know how to simplify this function. Thanks for your help! Code: <script type="text/javascript"> <!-- function collapseAll() { var el = document.getElementById('c1'); if ( el.style.display = 'none' ) {el.style.display != "none";} else {el.style.display = '';} var el = document.getElementById('c2'); if ( el.style.display = 'none' ) {el.style.display != "none";} else {el.style.display = '';} } </script> Code: var purchasePrice = window.prompt("Please enter the purchase price:", 0); function calculateTotalCost () { if (purchasePrice <= 25) { purchasePrice = purchasePrice + 1.50; } else { purchasePrice = purchasePrice + (purchasePrice * 0.10); } window.alert("Your total price is $ " + purchasePrice); } I am still getting the same error, concatenation instead of addition, i can't figure out why. (i.e input 50, result 505 instead of 55.) I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so: PHP Code: $my_list .= ' <form action="#" method="post"> <textarea class="commentbox" name="comment" id="comment"></textarea> <input type="hidden" name="post_id" id="post_id" value=' . $post_id . ' /> <input type="hidden" name="member_id" id="member_id" value=' . $id . ' /> <input type="submit" class="submit' . $post_id . '" value="Comment " /> </form> ' . $comment_list . ' // existing comments queried from the db <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments '; ?> Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id). So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function. Code: <head> <script type="text/javascript"> $(function() { $(".submit<?php echo $post_id; ?>").click(function() { var post_id = $("#post_id").val(); // this is the unique id for each story, in a hidden input var member_id = $("#member_id").val(); // this is a member for the commenter, in a hidden input var comment = $("#comment").val(); // this is the comment from the input box var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment; if(comment=='') { alert('Please enter a valid comment'); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>'); $.ajax({ type: "POST", url: "commentajax.php", data: dataString, cache: false, success: function(html){ $("#update<?php echo $post_id; ?>").append(html); $("#update<?php echo $post_id; ?> li:last").fadeIn("slow"); document.getElementById('post_id').value=''; document.getElementById('member_id').value=''; document.getElementById('comment').value=''; $("#comment").focus(); $("#flash").hide(); } }); } return false; }); }); </script> </head> 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 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'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 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> 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 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? 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 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? 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 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've been working for some time trying to get XMLHTTPRequests to work. Nothing doing. The code seems simple enough, but I can't duplicate it on my own. I have two pages on the same PC. Code to follow. Please help me see the problem: Page One - Originator <code> <html> <head> <title>Origination</title> <script type='text/javascript'> function ajaxRequest(){ var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE if (window.ActiveXObject){ //Test for support for ActiveXObject in IE //first (as XMLHttpRequest in IE7 is broken) for (var i=0; i<activexmodes.length; i++){ try{ return new ActiveXObject(activexmodes[i]); } catch(e){ //suppress error } } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc return new XMLHttpRequest(); else return false; } //Usage: //new ajaxRequest() function getStuff() { var getdata = new ajaxRequest(); if (getdata.readyState==4){ if (getdata.status==200){ var htmldata=getdata.responseText var txtfields = htmldata.getElementsByTagName('input'); alert(txtfields); } else{ alert('An error has occured making the request'); } } getdata.open('POST', 'test.html', true); getdata.send(null); } </script> </head> <body> <h5>Origination</h5> <form <form action="file:///test.html" method="post" enctype="text/plain"> <input type='text' name='homepage' value=''/> <input type='button' name='getit' value='GetSome' onclick='getStuff()'/> </form> </body> </html> </code> Page Two - The Target Page: <code> <html> <head><title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"/> <style type="text/css"> html {font-family: arial; font-size: 0.8em; } </style> </head> <body> <div id="wrapper"> <form action="file:///eyec.html" method="post" enctype="text/plain"> <input type='text' name='first' value='First Field'/> <input type='text' name='second' value='Second Field'/> <input type='text' name='third' value='Thrird Field'/> <input type='text' name='fourth value='Fourth Field'/> </form> </div> <!-- wrapper --> </body> </html> </code> I'd deeply appreciate correction. Thanks. Hi, I could not get the radio to work. I need to be able tot select the different radio buttons in which it will produce different rates for calculation. But after reaching here, am not sure what is wrong with the coding as there are no error msgs, and it only uses the 18/0.18 rates, even when 25/0.28 rates are selected. Could someone advise me? Thanks Code as show below- Code: <a name="A"></a> <script language="JavaScript"> function stocks(form) { shares = form.shares.value * 1; buyprice = form.buyprice.value * 1; sellprice = form.sellprice.value * 1; dividends = form.dividends.value * 1; buyoption = form.buyoption.value * 1; selloption = form.selloption.value * 1; //Checking Buy Commission if (buyoption>24) { bco1=25; bco2=0.28; } else { bco1=18; bco2=0.18; } //Checking Sell Commission if (selloption>24) { sco1=25; sco2=0.28; } else { sco1=18; sco2=0.18; } //Calc Buying Cost ba1=shares*buyprice; ba2=bco1; ba3=(shares*buyprice)/100*0.04; ba4=(shares*buyprice)/100*0.0075; ba5=(ba2+ba3+ba4)/100*7; baf=Math.round((ba1+ba2+ba3+ba4+ba5)*100)/100; bb1=shares*buyprice; bb2=(shares*buyprice)/100*bco2; bb3=(shares*buyprice)/100*0.04; bb4=(shares*buyprice)/100*0.0075; bb5=(bb2+bb3+bb4)/100*7; bbf=Math.round((bb1+bb2+bb3+bb4+bb5)*100)/100; //Compare Cost if (baf>bbf) { bc=baf; } else { bc=bbf; } //Calc Selling Cost sa1=shares*sellprice; sa2=sco1; sa3=(shares*sellprice)/100*0.04; sa4=(shares*sellprice)/100*0.0075; sa5=(sa2+sa3+sa4)/100*7; saf=Math.round((sa1-(sa2+sa3+sa4+sa5))*100)/100; sb1=shares*sellprice; sb2=(shares*sellprice)/100*sco2; sb3=(shares*sellprice)/100*0.04; sb4=(shares*sellprice)/100*0.0075; sb5=(sb2+sb3+sb4)/100*7; sbf=Math.round((sb1-(sb2+sb3+sb4+sb5))*100)/100; //Compare Returns if (saf<sbf) { tr=saf; } else { tr=sbf; } //Calc Break Even Price bepwod1=(bc/shares); bepwd1=((bc-dividends)/shares); bepwod=bepwod1.toFixed(3); bepwd=bepwd1.toFixed(3); //Calc Profit and Loss plwod1=tr-bc; plwd1=tr+dividends-bc; plwod=plwod1.toFixed(3); plwd=plwd1.toFixed(3); //Returning Values bought = bc; // Total Cost sold = tr; // Total Returns form.buycost.value = "$ " + bought; form.sellcost.value = "$ " + sold; form.breakevenpricewod.value = "$ " + bepwod; form.breakevenpricewd.value = "$ " + bepwd; form.profitlosswod.value = "$ " + plwod; form.profitlosswd.value = "$ " + plwd; } </script> <center> <form name='stockform'> <table border=0> <tr> <td align=left>* No. of Shares</td> <td>:</td> <td><input type="text" name="shares" /></td> <td align=left>Total Cost</td> <td>:</td> <td><input type="text" readonly="readonly" name="buycost" /></td> </tr> <tr> <td align=left>* Buying Price</td> <td>:</td> <td><input type="text" name="buyprice" /></td> <td align=left>Total Returns</td> <td>:</td> <td><input type="text" readonly="readonly" name="sellcost" /></td> </tr> <tr> <td align=left>* Selling Price</td> <td>:</td> <td><input type="text" name="sellprice" /></td> <td align=left>Break Even Price w/o Dividends</td> <td>:</td> <td><input type="text" readonly="readonly" name="breakevenpricewod" /></td> </tr> <tr> <td align=left>* Dividends</td> <td>:</td> <td><input type="text" name="dividends" /></td> <td align=left>Break Even Price w Dividends</td> <td>:</td> <td><input type="text" readonly="readonly" name="breakevenpricewd" /></td> </tr> <tr> <td align=left>Buy @ Commission</td> <td>:</td> <td><input type="radio" name="buyoption" value="18" checked>$18/0.18%<br> <input type="radio" name="buyoption" value="25">$25/0.28%<br></td> <td align=left>Profit & Loss w/o Dividends</td> <td>:</td> <td><input type="text" readonly="readonly" name="profitlosswod" /></td> </tr> <tr> <td align=left>Sell @ Commission</td> <td>:</td> <td><input type="radio" name="selloption" value="18">$18/0.18%<br> <input type="radio" name="selloption" value="25" checked>$25/0.28%<br></td> <td align=left>Profit & Loss w Dividends</td> <td>:</td> <td><input type="text" readonly="readonly" name="profitlosswd" /></td> </tr> <tr> <td colspan=3 align=center> <input type="button" name="calc" value="Calculate" onclick="javascript:stocks(this.form)" /> </td> <td align=left></td> <td></td> <td></td> </tr> </table> </form> </center> This is a script which has a window slide down on the page and a user can choose yes/no to continue. It works in all browsers other than IE...any help please? If you need more info, please let me know. Thanks. <script language="JavaScript" type="text/javascript"> <!-- var allowpop=1; function popWin(){ var ppl="popLayer";var objppl=findObj(ppl); if (objppl==null){return;}// if the layer does not exist, do nothing. var args=arguments,movetoX=parseInt(args[0]),movetoY=parseInt(args[1]),movespeed=parseInt(args[2]); var cycle=10,pxl=""; if(!document.layers){objppl=objppl.style;} if(objppl.tmofn!=null){clearTimeout(objppl.tmofn);} var pplcoordX=parseInt(objppl.left),pplcoordY=parseInt(objppl.top); var xX=movetoX,yY=movetoY;if((pplcoordX!=movetoX)||(pplcoordY!=movetoY)){ var moveX=((movetoX-pplcoordX)/movespeed),moveY=((movetoY-pplcoordY)/movespeed); moveX=(moveX>0)?Math.ceil(moveX):Math.floor(moveX);movetoX=pplcoordX+moveX; moveY=(moveY>0)?Math.ceil(moveY):Math.floor(moveY);movetoY=pplcoordY+moveY; if((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1) && (!window.opera)) {pxl="px";} if (moveX!=0){eval("objppl.left='" + movetoX + pxl + "'");} if (moveY != 0) {eval("objppl.top = '" + movetoY + pxl + "'");} var sFunction = "popWin(" + xX + "," + yY + "," + movespeed+ ")"; objppl.tmofn = setTimeout(sFunction,cycle); } } function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if((p = theObj.indexOf("?")) > 0 && parent.frames.length) {theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p);} if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } function hideLayer(layername){ layer=findObj(layername); if(layer.style){layer=layer.style;} layer.visibility='hidden'; } // --> </script> Code: <html> <script type="text/javascript"> var x=200; function update() { document.getElementById('health').innerHTML=x; } function attack() { x=x-10; } if (x<10) { document.write("You Won") } </script> <body onload="update()"> <div id="health"> </div> <input type="button" value="Attack" onclick="attack()" /> </body> </html> I don't see that x loses 10 what's the problem. function paymentmeth() { for (i = 0; i < document.merch.payway.length; i++){ if (document.merch.payway[i].checked == true){ //a loop that is used to determine the paymethod and checks to see if data has been entered method = document.merch.payway[i].value } } if (method == false) { alert("You forgot to select Pay Method.") } } I am terrible at this. I want to get this functionality seen here http://davidlynch.org/js/maphilight/docs/demo_usa.html (image map areas highlighting on mouseover) to work on this here http://scratchitrich.com/test/ can anybody walk me through how to make this work? Thanks! |