JavaScript - Javascript Subscription Form Advice
Hi,
I need to create a subscription form with a pop up window. I would like to re-do the following html code so that it works with a JavaScript pop-up: Code: <form style="border:1px solid #ccc;padding:3px;text-align:center;" method="post" rel="nofollow" target="popupwindow" action="http://feedburner.google.com/fb/a/mailverify" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PinkPigeon', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/><input type="hidden" value="PinkPigeon" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></p><p>Pink Pigeon Feed</p></form> if anyone can help that would be great thanks Will Similar TutorialsHey folks, I hope everyone is having a good day. I'm in need of some code that will allow people to subscribe to multiple email lists. I would like for there to be a check box per choice and an input box where the email address would be entered. That way they can subscribe to one or the other, or both at the same time. I did a Google search and wasn't receiving what I needed. Any help would be much appreciated. Thanks!! gabe I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post"> <table cellspacing="5" style="border: 2px solid black;"> <tr> <td valign="top"> <table cellspacing="5"> <tr> <td>*First name</td> <td align="right"><span id="valid_one"></span></td> <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td> </tr> <tr> <td align="left">*Last name</td> <td align="right"><span id="valid_two"></span></td> <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td> </tr> <tr> <td align="left">*Email address</td> <td align="right"><span id="result"></span></td> <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td> </tr> <tr> <td align="left">*Phone number</td> <td align="right"><span id="valid_three"></span></td> <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td> </tr> <tr> <td align="left">*City/Town</td> <td align="right"><span id="valid_four"></span></td> <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td> </tr> <tr> <td></td> <td></td> <td> <select name="s"> <option value="AL">Alabama <option value="AK">Alaska <option value="AZ">Arizona <option value="AR">Arkansas <option value="CA">California <option value="CO">Colorado <option value="CT">Connecticut <option value="DE">Delaware <option value="FL">Florida <option value="GA">Georgia <option value="HI">Hawaii <option value="ID">Idaho <option value="IL">Illinois <option value="IN">Indiana <option value="IA">Iowa <option value="KS">Kansas <option value="KY">Kentucky <option value="LA">Louisiana <option value="ME">Maine <option value="MD">Maryland <option value="MA">Massachusetts <option value="MI">Michigan <option value="MN">Minnesota <option value="MS">Mississippi <option value="MO">Missouri <option value="MT">Montana <option value="NE">Nebraska <option value="NV">Nevada <option value="NH">New Hampshire <option value="NJ">New Jersey <option value="NM">New Mexico <option value="NY">New York <option value="MC">North Carolina <option value="ND">North Dakota <option value="OH">Ohio <option value="OK">Oklahoma <option value="OR">Oregon <option value="PA">Pennsylvania <option value="RI">Rhode Island <option value="SC">South Carolina <option value="SD">South Dakota <option value="TN">Tennessee <option value="TX">Texas <option value="UT">Utah <option value="VT">Vermont <option value="VA">Virginia <option value="WA">Washington <option value="WV">West Virginia <option value="WI">Wisconsin <option value="WY">Wyoming </select> </td> </tr> <tr> <td> <br> </td> </tr> <tr> <td></td> <td></td> <td><span id="error"></span></td> </tr> <tr> <td valign="top">*Anti-Spam Verification</td> <td></td> <td id="reCaptcha"></td> </tr> </table> </td> <td valign="top"> <table cellspacing="5"> <tr> <td align="left">*Affiliation</td> <td align="right"><span id="valid_five"></span></td> <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td> </tr> <tr> <td align="left">*Research Area:</td> <td align="right"><span id="valid_six"></span></td> <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td> </tr> <tr> <td valign="top" align="left">*Research Overview</td> <td align="right"><span id="valid_seven"></span></td> <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td> </tr> <tr> <td></td> <td></td> <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td> </tr> <tr> <td align="left">*Talk Availability</td> <td></td> <td> <input type="radio" name="ta" value="In person">In person <input type="radio" name="ta" value="Online">Online <input type="radio" name="ta" value="Both" checked>Both </td> </tr> <tr> <td align="left" valign="top">Links</td> <td></td> <td> <table id="linkTable" border="0"> <td><input type="text" style="width: 320px;" name="link"></td> <td><div id="result"></div></td> </table> </td> <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td> </tr> <tr> <td></td> <td><span style="color: red;"></span></td> </tr> </table> </td> </tr> </table> <br /> <input type="submit" id="submit" name="submit" value="Submit Form"> </form> Javascript file: Code: /* * script.js - ajax and table functions */ var xmlHttp; // global instance of XMLHttpRequest var xmlHttp2; // second for captcha functions var validAjax = new Boolean(); var validCaptcha = new Boolean(); var valid_one = new Boolean(); var valid_two = new Boolean(); var valid_three = new Boolean(); var valid_four = new Boolean(); var valid_five = new Boolean(); var valid_six = new Boolean(); var valid_seven = new Boolean(); function init() { showRecaptcha('reCaptcha'); // Separate booleans for AJAX funcs validAjax = false; validCaptcha = false; // Booleanse for fields that don't require servlet validation valid_one = false; valid_two = false; valid_three = false; valid_four = false; valid_five = false; valid_six = false; valid_seven = false; } function showRecaptcha(element) { Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field}); } function validate_form() { if (valid_one && valid_two && valid_three && valid_four && validEmail) { startCaptchaRequest(); if (validCaptcha) { return true; } } else { alert("Submission contains errors. Please fill out all required fields before submitting."); return false; } } function validate_one() { if (document.getElementById("fn").value == 0) { valid_one = false; document.getElementById("valid_one").innerHTML = "No"; } else { valid_one = true; document.getElementById("valid_one").innerHTML = ""; } } function validate_two() { if (document.getElementById("ln").value == 0) { valid_two = false; document.getElementById("valid_two").innerHTML = "No"; } else { valid_two = true; document.getElementById("valid_two").innerHTML = ""; } } function validate_three() { if (document.getElementById("pn").value == 0) { valid_three = false; document.getElementById("valid_three").innerHTML = "No"; } else { valid_three = true; document.getElementById("valid_three").innerHTML = ""; } } function validate_four() { if (document.getElementById("c").value == 0) { valid_four = false; document.getElementById("valid_four").innerHTML = "No"; } else { valid_four = true; document.getElementById("valid_four").innerHTML = ""; } } function validate_five() { if (document.getElementById("affl").value == 0) { valid_five = false; document.getElementById("valid_five").innerHTML = "No"; } else { valid_five = true; document.getElementById("valid_five").innerHTML = ""; } } // //function validate_six() { // if (document.getElementById("ra").value == 0) { // valid_six = false; // document.getElementById("valid_six").innerHTML = "No"; // } // else { // valid_six = true; // document.getElementById("valid_six").innerHTML = ""; // } //} // //function validate_seven() { // if (document.getElementById("ro").value == 0) { // valid_seven = false; // document.getElementById("valid_seven").innerHTML = "No"; // } // else { // valid_seven = true; // document.getElementById("valid_seven").innerHTML = ""; // } //} function addLink(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.name = "link" + rowCount; element1.style.width = "320px"; cell.appendChild(element1); } function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } function createXmlHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } function startRequest() { createXmlHttpRequest(); var param1 = document.getElementById('mailfield').value; if (param1 == "") { validEmail = false; document.getElementById("result").innerHTML = "Blank"; } else { xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true) xmlHttp.onreadystatechange = handleStateChange; xmlHttp.send(null); } } function handleStateChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var message = xmlHttp.responseXML .getElementsByTagName("valid")[0] .childNodes[0].nodeValue; if (message == "Unregistered") { validEmail = true; document.getElementById("result").style.color = "green"; } else { validEmail = false; document.getElementById("result").style.color = "red"; } document.getElementById("result").innerHTML = message; } else { alert("Error checking e-mail address - " + xmlHttp.status + " : " + xmlHttp.statusText); } } } function createCaptchaRequest() { if(window.ActiveXObject) { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp2=new XMLHttpRequest(); } } function startCaptchaRequest() { alert('made it to captcha requeswt'); createCaptchaRequest(); var param1 = Recaptcha.get_challenge(); var param2 = Recaptcha.get_response(); xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true) xmlHttp2.onreadystatechange = handleStateChangeCaptcha; xmlHttp2.send(null); } function handleStateChangeCaptcha() { if(xmlHttp2.readyState==4) { if(xmlHttp2.status==200) { var message = xmlHttp2.responseXML .getElementsByTagName("result")[0] .childNodes[0].nodeValue; if (message == "Valid") { alert("captcha valid"); validCaptcha = true; } else { document.getElementById("error").innerHTML = message; validCaptcha = false; } } else { alert("Error checking captcha validity - " + xmlHttp2.status + " : " + xmlHttp2.statusText); } } } Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html> <head> <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", theme : "simple" }); </script> <script language="javascript"> function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } function err_check(){ var email = document.getElementById('to_email').value; if(email.length==0){ alert('Please Enter Email Address'); return false; } var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } email = document.getElementById('cc_email').value; if(email.length != 0){ var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } } var answer = confirm ("Send E-Mail?"); if (!answer){ return false; } } </script> <!-- /TinyMCE --> <style type="text/css"> body, table, td, th{ background-color:#CCCCCC; font-family: Arial; font-size:14px; } .que{ font-weight:bold; } </style> </head> <body> <form method="post" enctype="multipart/form-data"> <?php include 'library/database.php'; include 'library/opendb.php'; $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error()); $row = mysql_fetch_row($query); $from_email = $row[0]; $from_person = $row[1]; $from_mobile = $row[2]; $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error()); $row = mysql_fetch_row($query); $cusid = $row[0]; $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error()); $row = mysql_fetch_row($query); $toer = $row[0]; include 'library/closedb.php'; ?> <table width="100%" border="0"> <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%"> <?php echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; ?> </textarea> </td></tr> </table> </form> </body> </html> I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!=""); That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()"> </body> <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> Loading... </div> </html> formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Hello! I have recently begun the creation of my online web designers portfolio and I have come across a small, yet easily correctable (I'm praying!) problem. The main problem is that when my site is visited for the first time, the site takes to long to load/create the cache! I have done things such as kept everything in external stylesheets etc, but one thing I believe is the cause is the images, there are so many so its understandable, what I was wondering is if its possible to create a preloading page, that will create the cache for the entire website?? Bearing in mind I have only four pages! okay, so im planning on starting an online retail business and im fairly new to coding. i want to be able to sort the items for sale and then display them in order. i just need some help on where to start. i was thinking of using a server side script or xml or something to give the items values like rating=some number and then sort them from highest to lowest, then have the web page display the items in order. am i going about this in the right way? any suggestion would help
I currently have php site with a system of loading up 5 iframes on a page that target part of another website with recaptcha's so all 5 iframes auto scroll to the recaptcha box's. Now, my question is, is there any way to have it auto select the next iframe ready to type into the recaptcha box? Like, i have a list of 5 iframes & in iframe1 i type in the recaptcha words & press enter, then i want it to auto jump to the next iframe ready to type without having to click the text area box, is this possible & how? On my home page, I have a video area. I have a Jquery script that adds a curtain overlay to the video and then draws the curtains open to reveal the video behind it. It works fine in Firefox, but not in IE or Safari, not sure about other browsers. Can someone help me fix this so it works in those browsers please? http://billboardfamily.com/?theme=DeepFocus Thanks. Hi, I have been downloading and examining "gallery building" software and I find none of it links to an e-commerce option. Does anyone out there know the quickest way I can create a truly simple sales website which supplies a payment procedure for photos in an online gallery, thereby allowing javascript to #1 display a larger hover on mousover and #2 (on mouseclick) link photos (my gallery material) to an e-commerce component which offers a "payment procedure" to people visiting my gallery, specifically "bank transfer, credit card, check, PayPal etc." and will allow them to purchase my photos. The photos would be not the "large hover" ones watermarked with my own logo, but would be #3 the (presumably cached) clean, downloadable photos of a higher resolution represented by the watermarked photos and intended for sale. This would I assume then include a "download photo" page as part of the e-commerce "payment procedure" allowing non-watermarked photos cached safely outside the viewable gallery to be purchased. It sounds like such a breeze, (#1,#2,#3) and I find javascripting with little fragments of these codes, (have even been admiring the free code offered by several programmers which opens thumbnails on hover etc.) but none of it (#1,#2,#3) all stitched together. Anyone capable of this? Hello New here and not a programmer by any stretch of the imagination .. need some help with the following code .. rather lots of help .. I apologise if this is ugly code .. but I don't know much yet. Code: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function addNumbers() { var val1 = parseInt(document.getElementById("value1").value); var val2 = parseInt(document.getElementById("value2").value); var val3 = parseInt(document.getElementById("value3").value); var val4 = parseInt(document.getElementById("value4").value); var ansD = document.getElementById("answer"); ansD.value = val1 + val2 + val3 + val4; } function calc() { var val5 = parseInt(document.getElementById("value5").value); var val6 = parseInt(document.getElementById("value6").value); var val7 = parseInt(document.getElementById("value7").value); var ansD = document.getElementById("answer2"); ansD.value = (val5 + val6 + val7)*100/(100-10); } function calc2() { var val8 = parseInt(document.getElementById("value8").value); var val9 = parseInt(document.getElementById("value9").value); var val10 = parseInt(document.getElementById("value10").value); var ansD = document.getElementById("answer3"); ansD.value = (val8 + val9 + val10)*100/(100-20); } function addNumbers1() { var val11 = parseInt(document.getElementById("answer").value); var val12 = parseInt(document.getElementById("answer2").value); var val13 = parseInt(document.getElementById("answer3").value); var ansD = document.getElementById("answer4"); ansD.value = (val11 + val12 + val13); } </script> <HEAD> <BODY <FORM NAME="Calc"> <TABLE BORDER=1> <TR> <TD> INCOME (GROSS) <br> Income = <input type="text" id="value1" name="value1" value=""/><br> Income = <input type="text" id="value2" name="value2" value=""/><br> Income = <input type="text" id="value3" name="value3" value=""/><br> Income = <input type="text" id="value4" name="value4" value=""/><br> <input type="button" name="Sumbit" value="TOTAL (GROSS)"onClick="javascript:addNumbers()"/> = <input type="text" id="answer" name="answer" value=""/> <br> <br> INCOME (NET) 10% <br> Income = <input type="text" id="value5" name="value5" value=""/><br> Income = <input type="text" id="value6" name="value6" value=""/><br> Income = <input type="text" id="value7" name="value7" value=""/><br> <input type="button" name="Sumbit" value="TOTAL GROSSED (@ 10%)" onClick="javascript:calc(2)"/> = <input type="text" id="answer2" name="answer2" value=""/> <br> <br> INCOME (NET) 20% <br> Income = <input type="text" id="value8" name="value8" value=""/><br> Income = <input type="text" id="value9" name="value9" value=""/><br> Income = <input type="text" id="value10" name="value10" value=""/><br> <br> <input type="button" name="Sumbit2" value="TOTAL GROSSED (@ 20%)"onClick="javascript:calc2()"/> = <input type="text" id="answer3" name="answer3" value=""/> <br> <br> <input type="button" name="TOTAL STATUTORY INCOME" value="TOTAL STATUTORY INCOME"onClick="javascript:addNumbers1()"/> = <input type="text" id="answer4" name="answer4" value=""/> <br> <br> </TD> </TR> </TABLE> </FORM> </BODY> <HTML> The first issue ... (as simply as possible .. remember very new to all this) how can I limit decimals to 2 places.. and prevent rounding. The second issue .. how can I get the TOTAL buttons to calculate without having to fill in numbers into each entry box... If it don't put "0s" it gives NaN. Ideally by the automatic entry of "0s" when the TOTAL button is pressed. Further issues as the coding progresses... Thanks.. Hey, Im really new to Java and ideally i would love a java guru to have a quick look at this and help me. I am using this script i found he http://www.javascriptkit.com/script/...ownpanel.shtml It is a real good script and have set it up on my site fine. However, i am using it for a login portal. But when the user clicks on anything on the page that has been brought down, it pops back up and away. Obviously this is not good for a login box. So i need to limit the expand/contract feature to the button only. Rather than the whole box. Now im sure its just re-shifting code around or add/removing a few lines of code. Ive spent the past 2 hours trying to look at this and still no look, so im calling for an expert to have a look. This is in my jkpanel.js file: Code: //Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com var jkpanel={ controltext: 'Login', $mainpanel: null, contentdivheight: 0, openclose:function($, speed){ this.$mainpanel.stop() //stop any animation if (this.$mainpanel.attr('openstate')=='closed') this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'}) else this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'}) }, init:function(file, height, speed){ jQuery(document).ready(function($){ jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext,+'</div></div>').prependTo('body') kpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)}) var $contentdiv=jkpanel.$mainpanel.find('.contentdiv') var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'}) $contentdiv.load(file, '', function($){ var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px' $contentdiv.css({height: heightattr}) jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight) jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed') $controldiv.css({cursor:'hand', cursor:'pointer'}) }) }) } } //Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration) jkpanel.init('../ajaxexamples/login.html', '210px', 300) This in in my made .html page. Code: <script type="text/javascript" src="../ajaxexamples/jquery-1.2.2.pack.js"></script> <style type="text/css"> #dropdownpanel{ /*Outermost Panel DIV*/ position: absolute; width: 100%; left: 0; top: 0; visibility:hidden; } #dropdownpanel .contentdiv{ /*Div containing Ajax content*/ background: url(../images/sitestructure/dropdownbackup.png); background-repeat: repeat; color: white; padding: 20px; } #dropdownpanel .control{ /*Div containing panel button*/ border-top: 5px solid black; color: white; font-weight: normal; text-align: center; background: transparent url("../ajaxexamples/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/ padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */ height: 21px; /* 21px + 3 px should equal height of "panel.gif" */ line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */ } </style> <script type="text/javascript" src="../ajaxexamples/jkpanel.js"> /*********************************************** * Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script> Thanks, Hello; I'll begin like so many others before me, and apologize now if this post is in the wrong place, but since I don't exactly know what type of code I need, I'm not sure where to post this query. Let me preface this request by stating the obvious; I have almost no knowledge of coding. I've been watching tutorials for help with building a site for my small service-type business. I need coding that will allow my visitors to input their zip code to see if they reside in my service area. After they enter the zip and click the submit button, a page should pop up with one of two messages when they either are or are not in my service area. (I would undoubtedly need to list [somewhere in the coding] all the zip codes that are within my service area, and any zip codes not listed would bring up a message that the visitor is outside my service area.) I hope this makes sense, and someone can point me in the right direction. Thank you, in advance to any and all who respond, and keep in mind that you may have to dumb-down your responses for me to be able to understand. I'm new to programming in general and have had trouble deciding on a good starter project. I've decided to start with something that is (hopefully) pretty simple. I have about a dozen boxes full of vinyl records and would like to write a program to catalogue everything alphabetically by artist using prompts to ask for Album Title, Artist Title, and year. My question at this point is, is JavaScript a good way to do this? I have a fundamental knowledge of HTML, CSS, JavaScript and Ruby. I assumed JS would be the best way (that I know at this point) to do this project, but if I'm wrong, would love to hear it. What I don't understand at this point is how to output the information to a text file, or how to set up an interface to run the scripts. Any advice is very much appreciated. Hey All, I've got the following site that loads great in FF and Chrome (no surprise), but is terribly slow in IE7. It's even quick in IE6, but not 7. Here's the site: http://www.hanshawengines.com/ Now I'm using JQuery in a couple places, but it's by no means nothing crazy. The page is fairly simple. I thought of preloading the main content images, but even after they are loaded in the cycle, the loading time is still slow. Any suggestions on how I could improve this would be greatly appreciated. Thanks. Is there a way to make it so JavaScript can pre-set a FORM value? Something like this: Code: <?php $country = $_SESSION['country']; ?> <SCRIPT type="text/javascript"> function SomeFunctionForm() { document.forms["form"]["country"].value=="<?php echo $country; ?>) { } } </SCRIPT> <FORM> <SELECT name="country"> <OPTION>Afghanistan</OPTION> <OPTION>Albania</OPTION> <OPTION>Algeria</OPTION> </SELECT> </FORM> I can't just drop the PHP Code: <?php $country = $_SESSION['country']; ?> into the SELECT value because it will brake the alphabetical listing, which is why I am wondering if JavaScript can do it this way, as this way wouldn't brake the alphabetical listing? I have the following form function goto(form) { var index=form.select.selectedIndex if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} //--> </script> </p> <form name="form1"> <p><select onchange="goto(this.form)" name="select" style="font-size: 10pt;"> <option>----- Choose Wholesaler ------ </option><option value="travl.com.au/social-passport-profiles.html">A1 Classic Holidays </option><option value="web_development.htm">AAT Kings </option><option value="html_codes.htm">Abercrombie & Kent </option><option value="html_codes_chart.htm">Adventure Associates </option><option value="javascript_codes.htm">Adventure Destinations </option><option value="index.htm">Adventure World </option><option value="web_development.htm">African Wildlife Safaris </option><option value="html_codes.htm">Albatross Travel Group </option><option value="html_codes_chart.htm">Amazing Vacations </option><option value="javascript_codes.htm">Asiaquest Tours </option><option value="216_color_chart.htm">ATI Tours </option><option value="index.htm">Australian Pacific Tours </option><option value="web_development.htm">Beachcomber Tours </option><option value="html_codes.htm">Bench International </option><option value="html_codes_chart.htm">Bentours </option><option value="javascript_codes.htm">Beyond Travel Group </option><option value="216_color_chart.htm">Broome & The Kimberley Holidays </option><option value="index.htm">Bunnik Tours </option><option value="web_development.htm">Cathay Pacific Holidays </option><option value="html_codes.htm">CBT Holidays </option><option value="html_codes_chart.htm">Chat Tours </option><option value="javascript_codes.htm">CIT Holidays </option><option value="216_color_chart.htm">Club Med Australia </option><option value="216_color_chart.htm">Contiki Holidays for 18-35's </option><option value="216_color_chart.htm">Contours Travel </option><option value="index.htm">Cosmos </option><option value="web_development.htm">Creative Holidays </option><option value="html_codes.htm">Destination Canada </option><option value="html_codes_chart.htm">Eastern Europe Travel </option><option value="javascript_codes.htm">Elegant Resorts & Villas </option><option value="216_color_chart.htm">Explore Holidays </option><option value="index.htm">Freestyle Holidays </option><option value="web_development.htm">French Travel Connection </option><option value="html_codes.htm">Garuda Orient Holidays </option><option value="html_codes_chart.htm">Global Getaway </option><option value="javascript_codes.htm">Globus </option><option value="216_color_chart.htm">Go See Touring </option><option value="216_color_chart.htm">Greece & Mediterranean Travel </option><option value="216_color_chart.htm">Handpicked Holidays </option><option value="index.htm">Helen Wong's Tours </option><option value="web_development.htm">HIS Travel </option><option value="html_codes.htm">Holidays On Location </option><option value="html_codes_chart.htm">Honeymoon Worldwide Holidays </option><option value="javascript_codes.htm">Ibertours </option><option value="216_color_chart.htm">Icon Holidays </option><option value="index.htm">Inca Tours </option><option value="web_development.htm">Insight Vacations </option><option value="html_codes.htm">Intrepid Travel </option><option value="html_codes_chart.htm">Japan Experience Tours </option><option value="javascript_codes.htm">JTB Australia </option><option value="216_color_chart.htm">Kumuka Worldwide </option><option value="216_color_chart.htm">Made Easy Tours </option><option value="216_color_chart.htm">Nordic Travel </option><option value="index.htm">Northern Gateway </option><option value="web_development.htm">Orient Pacific Holidays </option><option value="html_codes.htm">Peregrine Adventures </option><option value="html_codes_chart.htm">Qantas Holidays </option><option value="javascript_codes.htm">Rosie Holidays </option><option value="216_color_chart.htm">Royal Orchid Holidays </option><option value="index.htm">Sachi Tours </option><option value="web_development.htm">Scenic Tours </option><option value="html_codes.htm">Selective Tours </option><option value="html_codes_chart.htm">Singapore Airlines Holidays </option><option value="javascript_codes.htm">Southern Italian Tours </option><option value="216_color_chart.htm">Sportsnet Holidays </option><option value="216_color_chart.htm">Sun Island Tours </option><option value="216_color_chart.htm">Sundowners Overland </option><option value="index.htm">Talpacific Holidays </option><option value="web_development.htm">Tasmania's Temptation Holidays </option><option value="html_codes.htm">Tempo Holidays </option><option value="html_codes_chart.htm">Temptation Tours </option><option value="javascript_codes.htm">Territory Discoveries </option><option value="216_color_chart.htm">The Imaginative Traveller </option><option value="index.htm">Trafalgar Tours </option><option value="web_development.htm">Travel IndoChina </option><option value="html_codes.htm">Travel Makers </option><option value="html_codes_chart.htm">United Vacations </option><option value="javascript_codes.htm">Venture Holidays </option><option value="216_color_chart.htm">Wendy Wu Tours </option><option value="216_color_chart.htm">Wildlife Safari Australia </option></select> </p></form> and i would like to make some of the option values auto redirect to an external website address. It seems this form code I have only allows for page redirects within my own website. I would be grateful if anybody could assist with how I can make some changes to this form to allow me to do this. Thank you in advance. Hi there I have created a php form (which i inserted into wordpress site) www.lookinside.co.za/wp - under "Conferences" tab... This form is working well, I just have a couple of changes which I would like to make, and am not sure how. if someone could perhaps maybe even help with one of the items on here I would be extremely grateful please :-) Changes: 1. is it possible to have a "print" button to appear on the page that comes up after submitting the quote? 2. Can we insert a "date" field possibly with a calendar popup to select a date for the conference? 3. Can images and other text appear on the "after submission" page? that will then also print, ie: info about the conference rooms, images? 4. Can the no. of people box be shorter in length? (the outline of the box) 5. when the submitted form is emailed through / and viewed, is it possible to include the title of the duration? ie at the moment it shows as: "Duration: R200", can we make it "Duration: Full Day - R200" or something? THe same for the "menu selection" php: PHP Code: <?php if(isset($_POST['action']) && $_POST['action'] == "submit_post"): ?> <?php $string = "Customer Name: ". $_POST['name']. "\n"; $string .= "Company: ". $_POST['company']. "\n"; $string .= "Conference Name: ". $_POST['field-36b58f8c5142ff3']. "\n"; $string .= "Telephone Number: ". $_POST['field-7c496d0fb21abfd']. "\n"; $string .= "Duration: ". $_POST['field-385963a5c9a4ef9']. "\n"; $string .= "Number of People: ". $_POST['field-5af722f60ee2f9b']. "\n"; $string .= "Menu: ". $_POST['menu']. "\n"; $string .= "Overhead Projector: ". $_POST['field-73cf21adf8b52d5']. "\n"; $string .= "Email: ". $_POST['field-3f92f5a7876cd50']. "\n"; $string .= "Sub Total: ". $_POST['totalcost']. "\n"; print "<p>". nl2br($string) ."</p>"; $to = $_POST['field-3f92f5a7876cd50'] . ", "; //This is the users email address $to .= "melissafleetwood@yahoo.com" . ", "; //Put your first email here $to .= "melissa@run-time.co.za"; //Put your second email here $subject = "Reciept confirmation"; $headers = "From: melissa@lookinside.co.za"; mail($to, $subject, $string, $headers); ?> <?php else: ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Contact Form Test</title> </head> <body> <form action="" method="post"> <div> <input type="hidden" name="action" id="acctid" value="submit_post" /> </div> <table cellspacing="5" cellpadding="5" border="0"> <td valign="top"> <strong>Name of Contact Person:</strong> </td> <td valign="top"> <input type="text" name="name" id="name" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Company:</strong> </td> <td valign="top"> <input type="text" name="company" id="company" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Official Name Of Conference</strong> </td> <td valign="top"> <input type="text" name="field-36b58f8c5142ff3" id="field-36b58f8c5142ff3" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Tel No Of Contact Person:</strong> </td> <td valign="top"> <input type="text" name="field-7c496d0fb21abfd" id="field-7c496d0fb21abfd" size="40" value="" /> </td> </tr> <tr> <td valign="top"> <strong>Duration:</strong> </td> <td valign="top"> <input type="radio" name="field-385963a5c9a4ef9" id="game4" value="220.00" onclick="UpdateCost()"> Full Day R220.00<br/> <input type="radio" name="field-385963a5c9a4ef9" id="game5" value="200.00" onclick="UpdateCost()"> Half Day R200.00<br/> </td> </tr> <tr> <td valign="top"> <strong>No Of People</strong> </td> <td valign="top"> <input type="text" name="field-5af722f60ee2f9b" id="field-5af722f60ee2f9b" size="40" value="" onchange="UpdateCost()"/> </td> </tr> <tr> <td valign="top"> <strong>Please select a menu:</strong> </td> <td valign="top"> <input type="radio" name="menu" id='game0' value="60.00" onclick="UpdateCost()">Menu A (60.00)<br> <input type="radio" name="menu" id='game1' value="90.00" onclick="UpdateCost()">Menu B (90.00)<br> <input type="radio" name="menu" id='game2' value="120.00" onclick="UpdateCost()">Menu C (120.00)<br> <input type="radio" name="menu" id='game3' value="150.00" onclick="UpdateCost()">Braai/Barbeque (150.00)<br> </td> </tr> <tr> <td valign="top"> <strong>Overhead Projector</strong> </td> <td valign="top"> <input type="checkbox" name="field-73cf21adf8b52d5" id="game6" value="650.00" onclick="UpdateCost()">R650.00 <br/> </td> </tr> <tr> <td valign="top"> <strong>Email of Contact Person: </strong> </td> <td valign="top"> <input type="text" name="field-3f92f5a7876cd50" id="field-3f92f5a7876cd50" size="40" value="" /> </td> <tr> <td valign="top"> <strong>Sub Total: </strong> </td> <td valigh="top"> <input type="text" id="totalcost" name="totalcost" size="40" value=""> </td> <tr> <td colspan="2" align="center"> <input type="submit" value=" Submit Form " /> </td> </tr> </form> JAVASCRIPT Code: <script type="text/javascript"> function UpdateCost() { var sum = 0; var gn, elem, totalAmmount, peopleNum; for (i=0; i<7; i++) { gn = 'game'+i; if(gn != 'game6'){ elem = document.getElementById(gn); if (elem.checked == true) { sum += Number(elem.value); } } peopleNum = document.getElementById('field-5af722f60ee2f9b').value; if(isNaN(peopleNum ) || peopleNum==''){ totalAmmount = sum; } else{ totalAmmount = sum * peopleNum; } } if(document.getElementById('game6').checked == true) { totalAmmount += Number(document.getElementById('game6').value); } document.getElementById('totalcost').value = totalAmmount.toFixed(2); } </script> <script type="text/javascript"> var value=""; var numPeople=document.getElementById("field-5af722f60ee2f9b") numPeople.onkeydown=function(e){ value = this.value + e; } numPeople.onkeyup=function(e) { this.value=this.value.replace(/[^\d]/,''); if(this.value != value) { UpdateCost(); } } </script> </body> </html> <?php endif; ?> Javascript: /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */ function UpdateCost() { var sum = 0; var gn, elem, totalAmmount, peopleNum; for (i=0; i<7; i++) { gn = 'game'+i; if(gn != 'game6'){ elem = document.getElementById(gn); if (elem.checked == true) { sum += Number(elem.value); } } peopleNum = document.getElementById('field-5af722f60ee2f9b').value; if(isNaN(peopleNum ) || peopleNum==''){ totalAmmount = sum; } else{ totalAmmount = sum * peopleNum; } } if(document.getElementById('game6').checked == true) { totalAmmount += Number(document.getElementById('game6').value); } document.getElementById('totalcost').value = totalAmmount.toFixed(2); } Thank you so much Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header { z-index:100; position:relative; display: block; background-color: #272727; height:100px;} #contentBody { min-height:48em;} footer { position:relative; display: block; background-color: #272727; height:168px; } #aboutPage { display:none;} #productPage { display:none;} #contactPage { display:none;} .aniIn { z-index:0; -webkit-animation-name: ANIMATEin; -webkit-animation-duration: 0.25s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; } @-webkit-keyframes ANIMATEin { from { margin-top:-4000px; } to { margin-top:0px; } } .aniOut { -webkit-animation-name: ANIMATEout; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in; } @-webkit-keyframes ANIMATEout { from { margin-top:0px; } to { margin-top:3000px; } } Script: Code: function $_(IDS) { return document.getElementById(IDS); } function ani(){ document.getElementById(classID).className ='aniOut'; } function checkPage(classID, url){ var tmp = ''; var sel = document.getElementsByTagName('section'); for (var i=0; i<sel.length; i++){ if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' } $_(classID).className ='aniIn'; sel[i].style.display = tmp;} $_(classID).style.display = 'block'; loadContent(classID, url); } function loadContent (classID, url){ var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(classID).innerHTML=xmlhttp.responseText;}} xmlhttp.open("GET","content/"+url,true); xmlhttp.send();} HTML: Code: <!-- Header Areas: (Constent visual)--> <header> <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li> <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li> <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li> </header> <!-- Content Areas: (Variable visual)--> <div id="contentBody"> <section id="aboutPage"></section> <section id="productPage"></section> <section id="contactPage"></section> </div> <!-- Footer Area: (Constant visual)--> <footer></footer> Hi all, I'm currently building a new search engine that will search around 15,000 products and would like some general advice as to the best way to approach it. I want to offer instant results, so the user will click an icon and the results change, no submit buttons or postbacks. My database is MS SQL and my frontend is ASP.Net, but for this I'm looking to develop the majority of the search functionality in JavaScript. What I'm asking really is what people recommend for the best way to approach providing instant results. My current thinking is an initial database query loads the data into XML, then use JavaScript and XSLT to filter the XML and display the results, then as filters change these can be handled by the JavaScript and XSLT rather than going back to the database. Does anyone have any general advice on the best performing way to provide this sort of functionality that ultimately will give the quickest results? Thanks in advance! |