Handling Forms with JavaScript
Topics
function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } http://edison.seattlecentral.edu/~dw.../testform2.htm http://edison.seattlecentral.edu/~dw...ude/util-dw.js Could someone check js and tell me how I can get the form to validate it hangs up on password. just wondering why my form validation isn't working?! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Add Member</title> <link href="css/popup.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function validateForm() { var member=document.forms["members"]["member"].value if (member==null || member=="") { alert("Please enter a member name!"); return false; } } </script> </head> <body style="margin:0px; background:none;"> <div class="popupheader"> Locum 8</div> <form action="add_member_script.php" name="members" method="post" onsubmit="return validateForm();"> <fieldset> <legend>Add Member</legend> <table align="center" width="360" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="124" align="right">Member Name: </td> <td width="236"><input type="text" name="first_name" class="smallInput small" /></td> </tr> <tr> <td width="124" align="right">Member Surname: </td> <td width="236"><input type="text" name="second_name" class="smallInput small" /></td> </tr> <tr> <td colspan="2" height="10"></td> </tr> <tr> <td> </td> <td><a href="javascript:document.members.submit();" class="button"><span>Add Member</span></a></td> </tr> <tr> <td colspan="2" height="10"></td> </tr> </table> </fieldset> </form> </body> </html> so I made this pizza order form for my ap comp sci class with javascript and html...teacher didnt realy teach javascript so i got most of javascript from online. the problem is that i have a price for everything but wen i hit the place order button, it would just reset the form...so i made it a reset button instead. heres the code: <html> <head> <title>Pizza Planet</title> <script language="javascript"> var pizzasize; function emptyField(textObj) { if(textObj.value.length == 0) return true; for(var i=0; i<textObj.value.length;i++) { ch = textObj.value.charAt(i); if(ch != ' ' && ch != '\t') return false; } return true; } function basecost(radioObj) { pizzasize = 1; if(radioObj[0].checked) cost = 5.00; // small if(radioObj[1].checked) { cost = 7.00; // medium pizzasize = 2; } if(radioObj[2].checked) { cost = 9.00; // large pizzasize = 3; } return cost; } function toppingscost(selectObj) { tcost = 0.0; for(var i=0;i<selectObj.length;i++) if(selectObj[i].selected) tcost += 0.50*pizzasize; return tcost; } function extrascost(selectObj) { ecost = 0; if(selectObj[0].selected) ecost += 0.00; //no extras if(selectObj[1].selected) ecost += 1.00; // Coke if(selectObj[2].selected) ecost += 5.00; // Hot wing 12 if(selectObj[3].selected) ecost += 3.00; // hot wing 6 if(selectObj[4].selected) ecost += 4.00; // bread sticks 12 if(selectObj[5].selected) ecost += 2.50; //bread sticks 6 return ecost; } function deliverycost(selectObj) { if(selectObj[0].selected) Dcost = 5.00; else if(selectObj[1].selected) Dcost = 0; return Dcost; } function confirmPizza(formObj) { if(emptyField(formObj.customer) ) { alert("Please enter your name"); return false; } if(emptyField(formObj.address) ) { alert("Please enter an address"); return false; } if(emptyField(formObj.email) ) { alert("Please enter your e-mail address"); return false; } if(emptyField(formObj.phone) ) { alert("Please enter your phone number"); return false; } total = basecost(formObj.p_size); total +=toppingscost(formObj.tops); total +=extrascost(formObj.xtra); total +=deliverycost(formObj.deliv); return confirm("The cost is " + total + ", place order?"); } </script> </head> <body> <h1>Pizza Planet</h1> <h3><b>Pizza size</h3> <form name="pizzaform" onSubmit= "return confirmPizza(pizzaform)" > </b> Small (5.00)<input type="radio" name="p_size" value="sma"> Medium (7.00)<input type="radio" name="p_size" value="med"> Large (9.00)<input type="radio" name="p_size" value="lar"> <br> <h3>Toppings 1</h3> <select name="tops" size="3" multiple> <option selected>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <h3>Toppings 2 (+.50)</h3> <select name="tops" size="3" multiple> <option selected>None</option> <option>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <h3>Toppings 3 (+.50)</h3> <select name="tops" size="3" multiple> <option selected>None</option> <option>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <br> <h3>Extras <h3> <select name="xtra" size="6" multiple> <option selected>None</option> <option>Coca-Cola (2-liter) (1.00)</option> <option>Hot Wings (12) (5.00)</option> <option>Hot Wings (6) (3.00)</option> <option>Bread Sticks (12) (4.00)</option> <option>Bread Sticks (6) (2.50)</option> </select> <br> <br> <h3>Is this delivery or carryout?</h3> <select name="del" size="2" multiple> <option>Delivery</option> <option>Carryout</option> </select> <hr /> Name <input type="text" size="20" maxlength="50" name="customer"> Address <textarea name="address" cols="40" rows="3"> </textarea> Email <input type="text" size="20" maxlength="50" name="email"> Phone <input type="text" size="20" maxlength="20" name="phone"> <hr> <input type="reset" value="Reset"> </form> <hr> Thank you for ordering at Pizza Planet. </body> </html> so i have this code i am working on(this is a dumbed down version of it) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#Submit").click(function(){ for (i=0;i<=50;i++) { $.ajax({ url:"process.php", type:"get", data:$("form").serialize(), success:function(response){ var obj = jQuery.parseJSON( response ); var success = obj.success; var actionsNumber = obj.number; $("#result").html('There have been '+actionsNumber+' loops completed'); } }) } }) }) </script> </head> <body> <form action="" method="post"> <p> <label><strong>Number of Loops</label> </p> <input name="count" type="text" value = "1"/> </p> <p> <input id="Submit" type = "button" value = "Send"> </p> </form> <p id="result">There have been 0 loops completed</p> </body></html> so you see this for loop for (i=0;i<=50;i++) I want it to be able to be like for (i=0;i<=count;i++) so that it will loop the number of times inputted also(though i dont know if this is something that i need to use js for) On my full code there are other textboxes that need to be sent to process.php each time that it is run. How can i achieve this? also before anyone asks i have googled this and searched around yet i havent been able to figure this out, everything i have tried hasnt worked and here is the process.php PHP Code: <?php session_start(); // process the form data here //::::::::: // if(!isset($_SESSION['number'])){ $_SESSION['number'] = 0; } $number = $_SESSION['number']++; // output json response echo'{"success":"true","number":"'.$number.'"}'; ?> Hello, I've been having a maddening issue with a CAPTCHA javascript math problem validation blocking the correct information from going to my contact form. I feel like I am overlooking something obvious. Basically I just want to create a simple javascript function that when the incorrect CAPTCHA code is entered an alert comes up saying "incorrect code" and then the form is not sent. The way it is working now, the form is passing through (due to document.write) but it is NOT allowing the PHP script to execute correctly, probably because document.write is bypassing the fields somehow. When I remove "return false;" the form goes through all the time, even after the alert comes up. When I keep "return false;" it goes through but the message is not sent correctly. Is there an easy way to make this work? Here is the javascript code: Code: <script type="text/javascript"> var a = Math.ceil(Math.random() * 10); var b = Math.ceil(Math.random() * 10); var c = a + b; function DrawBotBoot() { document.write("What is "+ a + " + " + b +"? "); document.write(" <input type='text' id='BotBootInput' name='Math' style='background-image: url(images/main/footer_math_problem_bknd.gif); width: 32px; height: 18px; padding: 5px; border: none; color: #fff;' /> "); } function ValidBotBoot(){ var d = document.getElementById('BotBootInput').value; if (d == c) { window.location = "sendmail.php";} else { alert("Incorrect CAPTCHA code"); } } </script> And here is the HTML form: Code: <form method="POST" action="sendmail.php"> <label for="FirstName"><p style="width: 120px; line-height: 0.4em;">Name:</p> </label> <input type="text" id="FirstName" name="FirstName" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <label for="Emailaddress"><p style="width: 120px; line-height: 0.4em;">Email:</p></label> <input type="text" id="Emailaddress" name="Emailaddress" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <legend><p style="line-height: 0.4em;">Your Message:</p></legend> <textarea name="QuestionComment" id="txt" style="background-image: url(images/main/footer_text_area.gif); width: 211px; height: 73px; padding: 5px; color: #fff; border: none;"></textarea><br /> <p style="width: 221px;"><script type="text/javascript">DrawBotBoot()</script> <input type="image" name="submit" id="submit" value="Submit" src="images/main/footer_submit.gif" height="28" align="right" onclick="ValidBotBoot(); return false;" /> </p> </form> I am trying implement some javascript and having a hard time getting it into my form. Might be a silly issue, I am not an advanced programmer. Any help would be greatly appreciated. -Lance form is here... http://forms.infogeniuz.com/igz-test/ Code: <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <title>iGz-test | iGz :: Forms</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="http://forms.infogeniuz.com/wp-content/themes/twentyten/style.css" /> <link rel="pingback" href="http://forms.infogeniuz.com/xmlrpc.php" /> <meta name='robots' content='noindex,nofollow' /> <!-- Form Script for Google Analytics Cookie --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>"); </script> <script type='text/javascript'> var pageTracker = _gat._getTracker("UA-1-1"); pageTracker._trackPageview(); // // This is a function that I "borrowed" from the urchin.js file. // It parses a string and returns a value. I used it to get // data from the __utmz cookie // function _uGC(l,n,s) { if (!l || l=="" || !n || n=="" || !s || s=="") return "-"; var i,i2,i3,c="-"; i=l.indexOf(n); i3=n.indexOf("=")+1; if (i > -1) { i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; } c=l.substring((i+i3),i2); } return c; } // // Get the __utmz cookie value. This is the cookies that // stores all campaign information. // var z = _uGC(document.cookie, '__utmz=', ';'); // // The cookie has a number of name-value pairs. // Each identifies an aspect of the campaign. // // utmcsr = campaign source // utmcmd = campaign medium // utmctr = campaign term (keyword) // utmcct = campaign content // utmccn = campaign name // utmgclid = unique identifier used when AdWords auto tagging is enabled // // This is very basic code. It separates the campaign-tracking cookie // and populates a variable with each piece of campaign info. // var source = _uGC(z, 'utmcsr=', '|'); var medium = _uGC(z, 'utmcmd=', '|'); var term = _uGC(z, 'utmctr=', '|'); var content = _uGC(z, 'utmcct=', '|'); var campaign = _uGC(z, 'utmccn=', '|'); var gclid = _uGC(z, 'utmgclid=', '|'); // // The gclid is ONLY present when auto tagging has been enabled. // All other variables, except the term variable, will be '(not set)'. // Because the gclid is only present for Google AdWords we can // populate some other variables that would normally // be left blank. // if (gclid !="-") { source = 'google'; medium = 'cpc'; } // Data from the custom segmentation cookie can also be passed // back to your server via a hidden form field var csegment = _uGC(document.cookie, '__utmv=', ';'); if (csegment != '-') { var csegmentex = /[1-9]*?\.(.*)/; csegment = csegment.match(csegmentex); csegment = csegment[1]; } else { csegment = '(not set)'; } // // One more bonus piece of information. // We're going to extract the number of visits that the visitor // has generated. It's also stored in a cookie, the __utma cookis // var a = _uGC(document.cookie, '__utma=', ';'); var aParts = a.split("."); var nVisits = aParts[5]; function populateHiddenFields(f) { f.source.value = input_10; f.medium.value = input_11; f.term.value = input_12; f.content.value = input_13; f.campaign.value = input_14; f.segment.value = input_15; f.numVisits.value = input_16; alert('source='+f.source.value); alert('medium='+f.medium.value); alert('term='+f.term.value); alert('content='+f.content.value); alert('campaign='+f.campaign.value); alert('custom segment='+f.segment.value); alert('number of visits='+f.numVisits.value); return false; } </script> <!-- END Form Script for Google Analytics Cookie --><link rel="alternate" type="application/rss+xml" title="iGz :: Forms » Feed" href="http://forms.infogeniuz.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="iGz :: Forms » Comments Feed" href="http://forms.infogeniuz.com/comments/feed/" /> <link rel='stylesheet' id='gforms_css-css' href='http://forms.infogeniuz.com/wp-content/plugins/gravityforms/css/forms.css?ver=1.5.2.1' type='text/css' media='all' /> <script type='text/javascript' src='http://forms.infogeniuz.com/wp-includes/js/l10n.js?ver=20101110'></script> <script type='text/javascript' src='http://forms.infogeniuz.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://forms.infogeniuz.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://forms.infogeniuz.com/wp-includes/wlwmanifest.xml" /> <link rel='index' title='iGz :: Forms' href='http://forms.infogeniuz.com/' /> <link rel='prev' title='infogeniuz' href='http://forms.infogeniuz.com/infogeniuz/' /> <meta name="generator" content="WordPress 3.1.2" /> <link rel='canonical' href='http://forms.infogeniuz.com/igz-test/' /> </head> <body class="page page-id-42 page-template page-template-default logged-in"> <div id="wrapper" class="hfeed"> <div id="header"> <div id="masthead"> <div id="branding" role="banner"> <div id="site-title"> <span> <a href="http://forms.infogeniuz.com/" title="iGz :: Forms" rel="home">iGz :: Forms</a> </span> </div> <div id="site-description">Just another WordPress site</div> <img src="http://forms.infogeniuz.com/wp-content/themes/twentyten/images/headers/inkwell.jpg" width="940" height="198" alt="" /> </div><!-- #branding --> <div id="access" role="navigation"> <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> <div class="menu"><ul><li ><a href="http://forms.infogeniuz.com/" title="Home">Home</a></li><li class="page_item page-item-42 current_page_item"><a href="http://forms.infogeniuz.com/igz-test/" title="iGz-test">iGz-test</a></li><li class="page_item page-item-5"><a href="http://forms.infogeniuz.com/infogeniuz/" title="infogeniuz">infogeniuz</a></li></ul></div> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> <div id="container"> <div id="content" role="main"> <div id="post-42" class="post-42 page type-page status-publish hentry"> <h1 class="entry-title">iGz-test</h1> <div class="entry-content"> <div class='gform_wrapper' id='gform_wrapper_1' ><form method='post' enctype='multipart/form-data' id='gform_1' action='http://forms.infogeniuz.com/igz-test/' onsubmit='populateHiddenFields(this);'> <div class='gform_body'> <ul id='gform_fields_1' class='gform_fields right_label'><li id='field_1_3' class='gfield' ><label class='gfield_label' for='input_1_3.3'>Name<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container' id='input_1_3'><span id='input_1_3_3_container' class='ginput_left'><input type='text' name='input_3.3' id='input_1_3.3' value='' tabindex='1' /><label for='input_1_3.3'>First</label></span><span id='input_1_3_6_container' class='ginput_right'><input type='text' name='input_3.6' id='input_1_3.6' value='' tabindex='2' /><label for='input_1_3.6'>Last</label></span></div></li><li id='field_1_2' class='gfield' ><label class='gfield_label' for='input_1_2'>Email<span class='gfield_required'>*</span></label><div class='ginput_complex ginput_container' id='input_1_2_container'><span id='input_1_2_1_container' class='ginput_left'><input type='text' name='input_2' id='input_1_2' value='' tabindex='3' /><label for='input_1_2'>Enter Email</label></span><span id='input_1_2_2_container' class='ginput_right'><input type='text' name='input_2_2' id='input_1_2_2' value='' tabindex='4' /><label for='input_1_2_2'>Confirm Email</label></span></div></li><li id='field_1_4' class='gfield' ><label class='gfield_label' for='input_1_4'>Subject<span class='gfield_required'>*</span></label><div class='ginput_container'><input name='input_4' id='input_1_4' type='text' value='' class='medium' tabindex='5' /></div></li><li id='field_1_5' class='gfield' ><label class='gfield_label' for='input_1_5'>Message<span class='gfield_required'>*</span></label><div class='ginput_container'><textarea name='input_5' id='input_1_5' class='textarea medium' tabindex='6' rows='10' cols='50'></textarea></div></li><li id='field_1_6' class='gfield' ><label class='gfield_label' for='input_1_6'>Captcha</label><script type='text/javascript'>var RecaptchaOptions = {theme : 'red', lang : 'en'}; if(parseInt('7') > 0) {RecaptchaOptions.tabindex = 7;}</script><div class='ginput_container' id='input_1_6'><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Ld4psQSAAAAAKl_xPu4zSh8nUams3f0MptaFRN_"></script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ld4psQSAAAAAKl_xPu4zSh8nUams3f0MptaFRN_" height="300" width="500" frameborder="0"></iframe><br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/> </noscript></div></li><li id='field_1_7' class='gfield gform_hidden' ><input name='input_7' id='input_1_7' type='hidden' class='gform_hidden' value='99.117.218.223' /></li><li id='field_1_8' class='gfield gform_hidden' ><input name='input_8' id='input_1_8' type='hidden' class='gform_hidden' value='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.68 Safari/534.24' /></li><li id='field_1_9' class='gfield gform_hidden' ><input name='input_9' id='input_1_9' type='hidden' class='gform_hidden' value='http://forms.infogeniuz.com/' /></li><li id='field_1_10' class='gfield gform_hidden' ><input name='input_10' id='input_1_10' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_11' class='gfield gform_hidden' ><input name='input_11' id='input_1_11' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_12' class='gfield gform_hidden' ><input name='input_12' id='input_1_12' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_13' class='gfield gform_hidden' ><input name='input_13' id='input_1_13' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_14' class='gfield gform_hidden' ><input name='input_14' id='input_1_14' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_15' class='gfield gform_hidden' ><input name='input_15' id='input_1_15' type='hidden' class='gform_hidden' value='' /></li><li id='field_1_16' class='gfield gform_hidden' ><input name='input_16' id='input_1_16' type='hidden' class='gform_hidden' value='' /></li> </ul></div> <div class='gform_footer right_label'> <input type='submit' id='gform_submit_button_1' class='button gform_button' value='Submit' tabindex='8' /><div class='gform_edit_link'><a href='http://forms.infogeniuz.com/wp-admin/admin.php?page=gf_edit_forms&id=1'>Edit this form</a></div> <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='1' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='4ddba7c61866a' /> <input type='hidden' class='gform_hidden' name='state_1' value='YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiIyYWFmYzdkODRkNWYwMTc2YWVjNGJmNTg2NTE4YTU3OSI7fQ==' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div> <span class="edit-link"><a class="post-edit-link" href="http://forms.infogeniuz.com/wp-admin/post.php?post=42&action=edit" title="Edit Page">Edit</a></span> </div><!-- .entry-content --> </div><!-- #post-## --> <div id="comments"> <p class="nocomments">Comments are closed.</p> </div><!-- #comments --> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="search-2" class="widget-container widget_search"><form role="search" method="get" id="searchform" action="http://forms.infogeniuz.com/" > <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></li><li id="recent-comments-2" class="widget-container widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></li><li id="archives-2" class="widget-container widget_archive"><h3 class="widget-title">Archives</h3> <ul> </ul> </li><li id="categories-2" class="widget-container widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li>No categories</li> </ul> </li><li id="meta-2" class="widget-container widget_meta"><h3 class="widget-title">Meta</h3> <ul> <li><a href="http://forms.infogeniuz.com/wp-admin/">Site Admin</a></li> <li><a href="http://forms.infogeniuz.com/wp-login.php?action=logout&_wpnonce=77e10f5046">Log out</a></li> <li><a href="http://forms.infogeniuz.com/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://forms.infogeniuz.com/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> </li> </ul> </div><!-- #primary .widget-area --> </div><!-- #main --> <div id="footer" role="contentinfo"> <div id="colophon"> <div id="site-info"> <a href="http://forms.infogeniuz.com/" title="iGz :: Forms" rel="home"> iGz :: Forms </a> </div><!-- #site-info --> <div id="site-generator"> <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress.</a> </div><!-- #site-generator --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> HI there.. Can you please give me code in JavaScript to create a student request form for book request from issue section of college Library.. Please help with code... Thanx in advance... Regards, Hi guys I am trying to build a webpage quotation form that collects the relevant data then outputs the calculated quote details to a table for an assignment. I know how to build the form and the table so they can be filled filled but i am stuck big time trying to work out best way to output the data on to the table and hide the original form in the process. thank you to anyone who can save my *** morgan hello guys! I need help setting up a form, I want to do some pretty neat things: It will say: What countries do you want to visit? [FIELD] Part 1: I want that when a user starts typing into the field, it will suggest under things that match what you have typed so far, sort of like facebook search does. So I would need a list of recognized country names. Now for example imagine I was using this, and I typed in M, it would list under a max of 5 valid entries begining with M, if I typed in Me, it would list the ones begining with Me, if I typed in Mex, it would show Mexico. Now the user would have to click this drop down suggestion to choose it. Part2: I want once a user clicks on a suggestion, it will "pop under" the input box or somewhere, with a "x" beside it to remove it. The user can now type in another country, and when it is clicked it too appears as a sort of "icon" under the input box or somewhere, with an "x" beside it. Clicking the x removes the country from the current list of countries. Once he is done, he goes on to other fields and the selected countries remain visible. Once a user submits the form, I want to get only the countries that were visible to him. **An alternative idea, if this one is too complicated, would be to have a drop list with all countries in it, and once a person clicks one, it will remain and a "+" sign will appear under it. When pressed, another dropdown menu will appear so the person can choose another country from the second drop down, etc. OFC all selected countries can have an X to remove them. Idk how to do this either.. I need help guys I have no clue how to do something like this, where do you recommend I start? Any ideas? I tried searching but I'm not sure what to call this so I couldn't find anything in the search. Thanks for your help so much!! I have problem with my javascript form validation... Validation works only on last question and I can't understand why it doesn't work on other questions.. Html code : 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> <script type="text/javascript" src="script.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Questionaire</title> <link href="oneColLiqCtrHdr19.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { background-color: #FFF; background-image: url(images/aa.jpg); } --> </style></head> <body class="oneColLiqCtrHdr"> <div id="container"> <div id="header"> <h1> </h1></div> <!-- forms --> <form action="http://projects.knord.dk/interaction/saveforminfo.aspx" method="post" onsubmit="return checkform(this);" > <input type="hidden" name="surveyid" value="knjuku2" /> <input type="hidden" name="usecookie" value="true" /> <input type="hidden" name="landingpage" value="h---.html" /> <p align="center"><b>This survey was made for Business Academy Copenhagen North project not for FDIM.</b></p> <p> <b>Please enter your personal information</b> </p> <p><b>Your Occupation:</b> <input type="text" name="occupation" /> </p> <p><b>Age Group:</b> <select name="age"> <option value="under 18">less then 18</option> <option value="18-25">18-25</option> <option value="26-35">26-35</option> <option value="over 35">more then 35</option> </select> </p> <p><b>Status:</b> <select name="status"> <option value="single">Single</option> <option value="single with children">Single with children</option> <option value="in relationship">In relationship</option> <option value="married">Married</option> <option value="divorced">Divorced</option> </select> </p> <p><b>Gender:</b> <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female </p> <p><b>Do you have a job?</b> <input type="radio" name="job" value="yes" />Yes <input type="radio" name="job" value="no" />No </p> <p> </p> <p> <!-- 1 vopros --> </p> <p><b>1. Why do You use online social media?</b> </p> <p> <input type="radio" name="bla" value="To chat with friends" /> To chat with friends<br></br> <input type="radio" name="bla" value="To read news" /> To read news<br></br> <input type="radio" name="bla" value="To write blogs" /> To write blogs<br></br> <input type="radio" name="bla" value="Other" /> Other<br></br> </p> <p> <!-- 2 vopros --> <b>2. What online social media do You use more often?</b> </p> <p> </p> <p> <select name="more"> <option value="MySpace">MySpace</option> <option value="Twitter">Twitter</option> <option value="Facebook">Facebook</option> <option value="LinkedIn">LinkedIn</option> </select> </p> <p> </p> <!-- 3 vopros --> <b>3. When do You use it?</b> <p> <input type="radio" name="use" value="1" /> At home<br></br> <input type="radio" name="use" value="2" /> At work<br></br> <input type="radio" name="use" value="3" /> At school<br></br> <input type="radio" name="iuse" value="4" /> In the bus/train<br></br> <input type="radio" name="use" value="5" /> Other<br></br> </p> <p><b>4. How much hours approximately do You spend on social media?</b> </p> <select name="hours"> <option value="less than 2 hours">less than 2 hours a day</option> <option value="2-4 hours">2-4 hours a day</option> <option value="4-8 hours">4-8 hours a day</option> <option value="8-12 hours">8-12 hours a day</option> <option value="more than 12 hours">more than 12 hours a day</option> </select> <p> </p> <p> <!-- 5 vopros --> <b>5. Do You use social media often?</b></p> <p> <input type="radio" name="often" value="Yes" /> Yes <input type="radio" name="often" value="No" /> No <!-- 6 vopros --> </p> <p><b>6. Social Media website to which You usually upload</b></p> <p> <input type="radio" name="upload" value="Youtube" /> Youtube<br></br> <input type="radio" name="upload" value="Flickr" /> Flickr<br></br> <input type="radio" name="upload" value="Photobucket" /> Photobucket<br></br> <input type="radio" name="upload" value="Slideshare" /> Slideshare<br></br> <input type="radio" name="upload" value="Other" /> Other </p> <!-- 7 vopros --> <b>7. Where do You chat with Your friends</b> <select name="chatting"> <option value="Msn">Msn</option> <option value="Skype">Skype</option> <option value="Yahoo!">Yahoo!</option> <option value="Other">Other</option> </select> <p> </p> <!-- 8 vopros --> <b>8. You use social media for</b> <select name="using"> <option value="Personal reasons">Personal reasons</option> <option value="Professional reasons">Professional reasons</option> <option value="Don't use it">Don't use it</option> </select> <p> </p> <p> <!-- 9 vopros --> <b>9. You prefer to obtain the information You need at</b> <select name="information"> <option value="Yahoo!">Yahoo!</option> <option value="Google">Google</option> <option value="Wikipedia">Wikipedia</option> <option value="Ask">Ask</option> <option value="Other">Other</option> </select> </p> <!-- 10 vopros --> <b>10. What do You prefer to do being online</b>? <select id="drop" name="online"> <option value="Read blogs">Read blogs</option> <option value="Chat with friends">Chat with friends</option> <option value="Watch videos">Watch videos</option> <option value="Read news">Read news</option> <option value="Other">Other</option> </select> <!-- konec voprosov --> <!-- button-submit --> <p align="center"> <input type="submit" value="Submit" /> </p> </form> <!-- end #container --> </div> </body> </html> Javascript validation Code: //Javascript Document function checkform ( form ) { if (form.occupation.value == "") { alert( "Please enter your occupation." ); form.occupation.focus(); return false ; } return true ; } function checkform(f) { for (var i=0; i<f.elements("gender").length; i++) { var radio = f.elements("gender")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Choose your gender!"); f.elements("gender")[0].focus(); return false; } function checkform(f) { for (var i=0; i<f.elements("job").length; i++) { var radio = f.elements("job")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Choose if you have a job!"); f.elements("job")[0].focus(); return false; } function checkform(f) { for (var i=0; i<f.elements("bla").length; i++) { var radio = f.elements("bla")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Answer question number 1"); f.elements("bla")[0].focus(); return false; } function checkform(f) { for (var i=0; i<f.elements("use").length; i++) { var radio = f.elements("use")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Answer question number 3!"); f.elements("use")[0].focus(); return false; } function checkform(f) { for (var i=0; i<f.elements("often").length; i++) { var radio = f.elements("often")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Answer question number 5!"); f.elements("often")[0].focus(); return false; } function checkform(f) { for (var i=0; i<f.elements("upload").length; i++) { var radio = f.elements("upload")[i]; if (radio.checked) { return true; } } // no checked radio button found window.alert("Answer question number 6!"); f.elements("upload")[0].focus(); return false; } Where is my mistake? And how to solve it to make javascript validation work properly? Hi, My webpage can work normally in IE but not in Safari(e.g. when I clicked on some buttons like 'Delete' button, the page opened in Safari stays the same while it should delete the object chosen). When I tried debugging on Safari, after clicking the 'update' button, this message error appeared: "TypeError: Result of expression 'this.form.fireEvent' [undefined] is not a function". I believe this code makes the incompatability between the 2 browser: Code: function DeleteClick() { var frmSWO = document.getElementById("form"); var answer = confirm("Do you really want to delete?") if (answer != 0) { frmSWO.action = "/domsWeb/mtd/doms/web/operation/eDepotMNR/controller/manageWorkOrder/DeleteJobOrImage.do"; frmSWO.method = "post"; this.form.fireEvent('onsubmit'); frmSWO.submit(); } } Any suggest how should I amend the script for it to work on 2 browser concurrently? Thanks all! I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; I am having trouble getting this code to work correctly. What I am trying to do is on my site i will have a button that will open this popup window with a login form and what i would like it to do is when the form is submitted i want the window to close and the main page to redirect to whatever page i would like it sent to. And if the login information is wrong i would like the popup window to stay open and say that it is wrong in red letters at the top. Here is the code for the popup window: PHP Code: <?php if($target == "LogIn") { if($view == "Form") { echo ' <script language="JavaScript" src="window.js"> </SCRIPT> <style type="text/css"> <!-- body { background-color: #000000; } --> </style> <FORM action="index.php?act=Login&CODE=50" onSubmit="javascript:login();" method="post" name="mlogin"> <p> <font face="verdana" color="#76a5d5" size="1"><B> Username: </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="username" size="25" name="username" value="Username"/> <br> <FONT face="verdana" color="#76a5d5" size="1"><B> Password: </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="password" size="25" name="password" value="*******"/> <INPUT type="image" src="images/login.jpg" ALT="Click Here to Login!" BORDER="0" ALIGN="middle" value="submit" name="submit"> </p> </form>'; } } ?> Code for the javascript: PHP Code: //Open up a new window with specific dimensions function info(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=100,left = 300,top = 500');"); } <!-- function login() { setTimeout('window.close()',2000); opener.location.href='/main/index.php'; } //--> Any help would be greatly appreciated Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){ //original field values var field_values = { //id : value 'name' : 'your name', 'email' : 'email', 'phone' : '(555) 123-4567', 'other' : 'other', 'detail' : 'project overview' }; //inputfocus $('input#name').inputfocus({ value: field_values['name'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('input#phone').inputfocus({ value: field_values['phone'] }); $('input#other').inputfocus({ value: field_values['other'] }); $('input#detail').inputfocus({ value: field_values['detail'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% Complete'); //first_step $('form').submit(function(){ }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields1 = $('#first_step input[type=text]'); var error = 0; fields1.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#first_step').slideUp(); $('#second_step').slideDown(); } else return false; }); $('#back_second').click(function(){ //update progress bar $('#progress_text').html('0% Complete'); $('#progress').css('width','0px'); //slide steps $('#second_step').slideUp(); $('#first_step').slideDown(); }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var fields2 = $('#second_step input[textarea]'); var error = 0; fields2.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#second_step').slideUp(); $('#third_step').slideDown(); } else return false; }); $('#back_third').click(function(){ //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#third_step').slideUp(); $('#second_step').slideDown(); }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('75% Complete'); $('#progress').css('width','255px'); //prepare the fourth step var fields3 = new Array( $('#time').val(), $('#budget').val() ); var fields2half = new Array( $('#detail').val() ); var fields2 = new Array( $('#other').val(), $('#pages').val() ); var fields1 = new Array( $('#name').val(), $('#email').val(), $('#phone').val(), $('#contact').val(), $('#url').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]); $(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]); $(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]); $(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]); }); //slide steps $('#third_step').slideUp(); $('#fourth_step').slideDown(); }); $('#back_fourth').click(function(){ //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#fourth_step').slideUp(); $('#third_step').slideDown(); }); $('#submit_fourth').click(function(){ //send information to server //update progress bar $('#progress_text').html('100% Complete'); $('#progress').css('width','339px'); //slide steps $('#fifth_step').slideUp(); $('#fourth_step').slideDown(); if(error <= 0) { return true } else{ return false } }); }); I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT $(function(){ //original field values var field_values = { //id : value 'name' : 'your name', 'email' : 'your email', 'yourmessage' : 'I would like to inquire about' }; //inputfocus $('input#name').inputfocus({ value: field_values['name'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] }); //form validation $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation $('#submit').click(function(){ //remove classes $('#sendamessage input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields1 = $('#sendamessage input[type=text],#sendamessage textarea'); var error = 0; fields1.each(function(){ var value = $(this).val(); if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); // css class $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); // css class } }); if(!error) { // this is where I get confused. How do I make this send the form? alert('Data sent'); }); } }); }); // END JAVASCRIPT <form method="post" action="" onsubmit="return validateForm()" > <input type="hidden" name="ccf_customhtml" value="1" /> <input type="hidden" name="success_message" value="Thank you for filling out our form!" /> <input type="hidden" name="destination_email" value="dauidus@gmail.com" /> <input type="hidden" name="required_fields" value="" /> <label for="name">Name</label> <input type="text" name="name" id="name" value="your name" /> <label for="email">Email</label> <input type="text" name="email" id="email" value="your email" /> <label for="yourmessage">Your Message</label> <textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea> <input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " /> </form> I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected. To Reiterate The way I want it to work... 1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc. ...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total. 1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc. If some kind soul can give their advice or point me in the right direction I would appreciate it. Code: <script type="text/javascript" src="_inc/orderform04.js"></script> <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> <form id="frmOrder"> <p> <input type="checkbox" id="chk0" /> Black Hair Clips $<span id="txtPrice0">10</span> <select id="sel0"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> <option value="val3">3</option> </select> </p> <p> <input type="checkbox" id="chk1" /> Red Hair Clips $<span id="txtPrice1">10</span> <select id="sel1"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> <option value="val3">3</option> </select> </p> <p> <input type="text" id="txtTotal" size="8" /> </p> </form> orderform04.js is located he http://www.mredkj.com/javascript/orderform04.js I have written some code below which hopefully changes teh value of the flag using JavaScript, I now want to request the value of the flag to see if it's a 1 or a 2? Code: <script> function collatedata() { document.f1.flag.value=1; document.f1.submit(); } function generateinvoices() { document.f1.flag.value=2; document.f1.submit(); } </script> <input type="hidden" name="flag" id="flag" /> <a href="javascript:collatedata();" class="button"><span>Collate</span></a> <a href="javascript:generateinvoices();" class="button"><span>Generate</span></a> What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript"> function showInfo() { var elem = document.getElementById('verify'); if(document.forms[0].menu.value == "verify"){ elem.style.display="inline";} else{ elem.style.display="none";} } </script> </head> <body> <form action="#" method="post"> <select name="menu" onchange="showInfo()"> <option value="none">Select an option</option> <option value="email">Email</option> <option value="verify">Verify</option> </select> <div id="verify" style="display:none;"> <input type="text" value="Username" > <input type="password" value="password" > </div> </form> But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. I am using the same java script to help add shipping costs for paypal in my html. I have worked very long and hard to get to this point. Since everything is very similar and having conflicts I have saved and named each java script for it's form. However, when there are more then one on the html page it always calculates the last form giving me the wrong price per quantity on the first. I have not found a way to differentiate or id and separate. <script src="nineEnvelope.js" type="text/javascript"> </script> <form rel="nofollow" target="paypal" style="position:absolute; left:500px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value=""> <table> <tr><td> <input type="hidden" name="on0" value="#9 Envelope">#9 Envelope <input type="hidden" name="amount" value=""> <input type="hidden" name="shipping" value=""> <input type="hidden" name="shipping2" value=""> <input type="hidden" name="item_number" value=""> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="add" value="1"> </td></tr><tr><td> <select name="os0"> <option value="250 qty">250 qty $95.00</option> <option value="500 qty">500 qty $125.00</option> <option value="1,000 qty">1,000 qty $200.00</option> <option value="2,500 qty">2,500 qty $450.00</option> <option value="5,000 qty">5,000 qty $638.00</option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="250 qty" /> <input type="hidden" name="option_amount0" value="95.00" /> <input type="hidden" name="option_select1" value="500 qty" /> <input type="hidden" name="option_amount1" value="125.00" /> <input type="hidden" name="option_select2" value="1,000 qty" /> <input type="hidden" name="option_amount2" value="200.00" /> <input type="hidden" name="option_select3" value="2,500 qty" /> <input type="hidden" name="option_amount3" value="450.00" /> <input type="hidden" name="option_select4" value="5,000 qty" /> <input type="hidden" name="option_amount4" value="638.00" /> <input type="hidden" name="option_index" value="0" /> --> <tr> <td> <input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1"> <option value="no window">no window </option> <option value="window (right)">window (right) </option> <option value="window (left)">window (left) </option> <option value="double window (left)">double window (left) </option> </select> </td></tr> </table> <input onclick=CalculateOrder(this.form) type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </body> </html> <html> <head> <div> <script type="text/javascript" src="nine_envelope_sec_src.js"> </script> <form rel="nofollow" target="paypal" style="position:absolute; left:700px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value=""> <table> <tr><td> <input type="hidden" name="on0" value="#9 Envelope w/ Security Tint">#9 Envelope w/ Security Tint <input type="hidden" name="amount" value=""> <input type="hidden" name="shipping" value=""> <input type="hidden" name="shipping2" value=""> <input type="hidden" name="item_number" value=""> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="add" value="1"> </td></tr><tr><td> <select name="os0"> <option value="250 qty">250 qty $110.00</option> <option value="500 qty">500 qty $140.00</option> <option value="1,000 qty">1,000 qty $215.00</option> <option value="2,500 qty">2,500 qty $475.00</option> <option value="5,000 qty">5,000 qty $678.00</option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="250 qty" /> <input type="hidden" name="option_amount0" value="110.00" /> <input type="hidden" name="option_select1" value="500 qty" /> <input type="hidden" name="option_amount1" value="140.00" /> <input type="hidden" name="option_select2" value="1,000 qty" /> <input type="hidden" name="option_amount2" value="215.00" /> <input type="hidden" name="option_select3" value="2,500 qty" /> <input type="hidden" name="option_amount3" value="475.00" /> <input type="hidden" name="option_select4" value="5,000 qty" /> <input type="hidden" name="option_amount4" value="678.00" /> <input type="hidden" name="option_index" value="0" /> --> <tr> <td><input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1"> <option value="no window">no window </option> <option value="window (right)">window (right) </option> <option value="window (left)">window (left) </option> <option value="double window (left)">double window (left) </option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="no window" /> <input type="hidden" name="option_amount0" value="0" /> <input type="hidden" name="option_select1" value="window (right)" /> <input type="hidden" name="option_amount1" value="0" /> <input type="hidden" name="option_select2" value="window (left)" /> <input type="hidden" name="option_amount2" value="0" /> <input type="hidden" name="option_select3" value="double window (left)" /> <input type="hidden" name="option_amount3" value="0" /> --> </table> <input onclick=CalculateOrder(this.form) type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </head> </html> nineEnvelope.js function CalculateOrder(form) { if (form.os0.value == "250 qty") { form.amount.value = 95.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "500 qty") { form.amount.value = 125.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "1,000 qty") { form.amount.value = 200.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "2,500 qty") { form.amount.value = 450.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; } if (form.os0.value == "5,000 qty") { form.amount.value = 638.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00";} } nine_envelope_sec_src.js function CalculateOrder(form) { if (form.os0.value == "250 qty") { form.amount.value = 110.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "500 qty") { form.amount.value = 140.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "1,000 qty") { form.amount.value = 215.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "2,500 qty") { form.amount.value = 475.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; } if (form.os0.value == "5,000 qty") { form.amount.value = 678.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00"; } } Hi ! i sometimes are able to alter simple javascript, but i need help with the following. MaxMind.com has a javascript or geotargetting. It displays the country where ur at. I need this output in a form, so i can store it in a database. this is the script i use: <script language="JavaScript" src="http://j.maxmind.com/app/country.js"></script> <br>Country Code: <script language="JavaScript">document.write(geoip_country _code());</script> <br>Country Name: <script language="JavaScript">document.write(geoip_country _name());</script> How can i get the country name to be displayed in an input field ? something like: <form name="xx" action="somepage.htm" method="post"> <input type="Text" size="50" name="country" value="country name"> </form> Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) { var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr'); var irows = oRows.length ; if (confirm("Are you sure you want Submit?")) { for(k=1; k<=irows; k++) { if(document.getElementById("list"+k).selectedIndex == 0) { document.getElementById("list"+k).selectedIndex = 1; document.getElementById("list"+k).options[1].style.backgroundColor = "green"; } } Saver(); document.getElementById("HTMLTable1").disabled = true; } else{ alert("Submit cancelled!"); } } But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil Hello! coding forums gals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next line down and all other lines below if the user wants to schedule more than one trip at a time? basically what logic and programming structure do I need in my function that will know when the first line in the invoice is filled and will add data in the next line down. after I have successfully placed an order, and I want to make another one, how do I get javascript to output data on the second line? Code: <html> <head> </head> <script type="text/javascript"> function addit() { var f = document.myform; var cost = 0; var percentage = 0; switch(f.destination.selectedIndex) { case 0: document.myform.trip1.value="Mt. Kilimanjaro"; cost="2600"; break; case 1: document.myform.trip1.value="Denali"; cost="2000"; break; case 2: document.myform.trip1.value="Mt. Everest"; cost="3500"; break; case 3: document.myform.trip1.value="Maui"; cost="2700"; break; case 4: document.myform.trip1.value="Machu-Pichu"; cost="3100"; break; } for(i=0;i<f.travelers.length;i++) { if(f.travelers[i].checked) f.num1.value=f.travelers[i].value; } f.cost1.value=parseInt(f.num1.value) * parseInt(cost); switch(document.myform.accomodation.selectedIndex) { case 0: percentage="0.00"; break; case 1: percentage="0.05"; break; case 2: percentage="0.15"; break; case 3: percentage="0.22"; break; } f.accom1.value=f.cost1.value * parseFloat(percentage); f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value); } </script> <body> <form name="myform"> <table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0"> <tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr> <tr><td align="center"><select name="destination" id="Select1" size="4"> <option>Mt. Kilimanjaro</option> <option>Denali</option> <option>Mt. Everest</option> <option>Maui</option> <option>Machu-Pichu</option> </select></td> <td align="center">1<input type="radio" name="travelers" value="1"></br>2<input type="radio" name="travelers" value="2"/></br>3<input type="radio" name="travelers" value="3"/></br>4<input type="radio" name="travelers" value="4"/></br>5<input type="radio" name="travelers" value="5"/></br>6<input type="radio" name="travelers" value="6"/></td> <td align="center"> <select name="accomodation" id="Select2" size="3"> <option value=0>Tents</option> <option>Yurts</option> <option>Hostels</option> <option>Hotels</option> </select></td> <td><table width="90%" align="center" cellpadding="2"> <tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr> <tr><td><input type="text" name="trip1" readonly></td><td><input type="text" name="num1" size="1" readonly></td><td><input type="text" name="cost1" readonly></td><td><input type="text" name="accom1" readonly></td><td><input type="text" name="total1" readonly></td></tr> <tr><td><input type="text" name="trip2" readonly></td><td><input type="text" name="num2" size="1" readonly></td><td><input type="text" name="cost2" readonly></td><td><input type="text" name="accom2" readonly></td><td><input type="text" name="total2" readonly></td></tr> <tr><td><input type="text" name="trip3" readonly></td><td><input type="text" name="num3" size="1" readonly></td><td><input type="text" name="cost3" readonly></td><td><input type="text" name="accom3" readonly></td><td><input type="text" name="total3" readonly></td></tr> <tr><td><input type="text" name="trip4" readonly></td><td><input type="text" name="num4" size="1" readonly></td><td><input type="text" name="cost4" readonly></td><td><input type="text" name="accom4" readonly></td><td><input type="text" name="total4" readonly></td></tr> </table></td></tr> </tr> <tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear"/></td><td><input type="button" value="Buy Now"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr> </table></form> </body> </html> Hi, I'm using the following to ensure all forms are submitting when any link on the page is clicked using Code: onclick="submitWithHref(this); Code: function submitWithHref(obj) { var theHref = obj.href; document.form2.action = theHref; document.form2.submit(); } All works well, except if I click logout, it tries to submit the form but the session is destroyed before that happens. Any pointers of what I should be looking for to ensure the form finishes submitting? my heads mashed lol. Just a thought maybe use javascript to do a countdown you will be logged out in 10 seconds, 9 etc??? IGNORE THIS THREAD PLS Sorry i interpreted another error for a simpler one which i've fixed now, so when I find out what the other error is the cause off I might start a new thread but only after i've had a sleep this time. Sorry guys trax Basically I can't get it to work. I'm following this tutorial and I'm not able to hide the error messages, or just get the form to submit. I could really use some direction. Here is the page I am working on: http://www.mustlovepink.com/public_html/contact.php All, I currently have a form on my page and I found this on the jQuery website: Code: $.post("test.php", $("#testform").serialize()); However, I want to do something after the results are posted so I think I need a hybrid of the one above and this one: Code: $.post("test.php", function(data) { alert("Data Loaded: " + data); }); Any help would be greatly appreciated. My form id is saveCrop, not sure if that makes a difference or not. Thanks in advance! Hey all, New here and looking for a bit of help. I am playing around with coding a binary translator but am not able to quite get it working right. Following is my html code and .js code: Code: <script type="text/javascript" src="/crypto/binary.js"></script> <form name="cryptoform"> <div id="inputside"> Text I/O: <textarea rows="30" cols="50" name="inputinfo" id="inputinfo" onKeyUp="encrypted();" onkKeyPress="encrypted();"></textarea><br /><br /> <input type="button" value="Clear Fields" onClick="formReset()" /> </div> <div id="outputside"> Binary I/O: <textarea rows="30" cols="50" name="outputinfo" id="outputinfo"></textarea><br /><br /> <input type="button" value="Binary to Text" onClick="decrypted()" /><br /><br /><br /> </div> </form> Code: function encryption(usertext) { var bin = "00000000" + usertext.toString(2); bin = bin.substr(bin.length-8,8); return bin; } function encrypted() { var bnrychar, bnrycnvrt = "", rawinput; rawinput = document.getElementById("inputinfo").value; for (i = 0; i < rawinput.length; i++) { bnrychar = encryption(rawinput.charCodeAt(i)); bnrychar += " "; bnrycnvrt += bnrychar; } document.getElementById("outputinfo").innerHTML = bnrycnvrt; } function decrypted() { var textchar, textcnvrt="", bnryinput; textchar = document.getElementById("outputinfo").value.replace(/[^01]/g, ""); bnryinput = textchar.length-(textchar.length%8); for (z = 0; z < bnryinput; z += 8) { textcnvrt += String.fromCharCode(parseInt(textchar.substr(z,8),2)); } document.getElementById("inputinfo").innerHTML = textcnvrt; } function formReset() { document.getElementById("inputinfo").reset(); document.getElementById("outputinfo").reset(); } I am having two problems. The first is that <input type="button" value="Clear Fields" onClick="formReset()" /> does not seem to be working and I am not quite sure why. If I just use a reset button it works. Also, if I use a button to just set the value of the two textareas to "" that works as well, but does not reset the Binary textarea until I click inside the text area. Second, if I translate from Binary to text, going from text to binary stops working. I am not sure what is causing the function to stop working there. Any ideas are welcome! ck Hi, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! I'm a newbie to scripting who needs help. The situation is as follows: I'm running Joomla 1.5.23 and I've been trying to get validation on a component's form fields. In the header section, I'm properly loading the validator.js file, which contains the following: Code: //function to check empty fields function isEmpty(strfield1, strfield2) { strfield1 = document.forms[0].firstname.value strfield2 = document.forms[0].lastname.value //firstname field if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ') { alert("\"firstname\" is a mandatory field.\nPlease amend and retry.") return false; } //lastname field if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ') { alert("\"lastname" is a mandatory field.\nPlease amend and retry.") return false; } } return true; } //function to check valid email address function isValidEmail(strEmail){ validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i; strEmail = document.forms[0].email.value; // search email text for regular exp matches if (strEmail.search(validRegExp) == -1) { alert('A valid e-mail address is required.\nPlease amend and retry'); return false; } return true; } //function that performs all functions, defined in the onsubmit event handler function check(form)){ if (isEmpty(form.firstname)){ if (isEmpty(form.lastname)){ if (isValidEmail(form.email)){ return true; } } } return false; } I'm invoking this in this way: Code: <form action="index.php?option=com_pbbooking&task=save" method="POST" onsubmit="return check(this);"> My problem is that even if all fields are empty it will go to the next step. Thanks in advance, twdk01. Hi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help If my php variable, (which is retrieved from a mysql table in the php code, not shown) is equal to "1", that means the member is not eligible to submit the form, so I want an alert() to say "member not eligible!". Else, I want it to continue to submit the form. Here is my code (which I can't seem to get to work): <head> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ismaxlength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length>mlength) obj.value=obj.value.substring(0,mlength) } //this first script is for something else, to check the max length of characters in a text area </script> //here is the script in question <script type="text/javascript"> <!-- var mem_eligible = "<?= $is_mem_eligible ?>"; if (mem_eligible == "1") { function MoveOn() { alert('You are not yet eligible, please try again tomorrow!'); } } --> </script> </head> <form name="myform" action="postform.php" method="post" enctype="multipart/form-data"> <div> <input type="submit" name="Submit2" value="Submit Entries" onclick="MoveOn()"/> </div> </form> Please help, thanks! June I need help in a form so that a radio button input sets 2 NAME values like NAME="name1" and NAME="name2" Since I don't think this is possible, I would by happy to copy the value of name1 to name2 via a script/vb/java, etc. Here's the code snippet I have that needs help. <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="business" value="99999999999"> <table border="0"> <tr><td><input type="radio" name="name1" value="25.00">Donate $25 <tr><td><input type="radio" name="name1" value="90.00">Donate $90 <td><td><input type="radio" name="name1" value="Other">Other Amount</td><td> <td>$</td><td><input type="text" name="name1"> </table> [Now, I need code to auto set NAME="name2" to always be the same value as "name1" above even if user re-selects choice] .. .. .. </form> Thanks Dave From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. I'm sure this is a simple one. I have a results page, pulled from a mysql database using _GET variables from a form. On this page is a second form to refine the results by reloading the page. I want each form element item to remember/prepopulate with what it's related $_get variable is.
Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. I created a submission form for users when they log in to my website they can submit their info . when they fill the form and click on submit button is not sending the info to my email .............................please help here is my my codes please take a look at it Thanks 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"> <meta name="verify-v1" content="N1J6LLa/OdGf52xzkbegP/YFAD+RaeKa9FQ2/8UJfKo="> <title>southernfiremag.co.za</title> <link href="southernfiremag.co.za_files/webstyle.css" rel="stylesheet" type="text/css"> <link href="southernfiremag.co.za_files/balloontip.css" rel="stylesheet" type="text/css"> <script src="southernfiremag.co.za_files/balloontip.js" type="text/javascript"></script><style media="screen" type="text/css">#FLheader {visibility:hidden}</style><style media="screen" type="text/css">#subFlash {visibility:hidden}</style><style media="screen" type="text/css"> #footer {visibility:hidden}.style1 {color: #FFFFFF} body { background-color: #000000; } </style></head><body class="sIFR-active"><div id="dhtmltooltip"></div> <script src="southernfiremag.co.za_files/gen_validatorv2.js" type="text/javascript"></script> <div id="container"> <script type="text/javascript"> var flashvars = { dater:'', }; var params = {}; params.menu = "false"; params.wmode = "transparent"; params.bgcolor = "#1A1A1A"; var attributes = {}; swfobject.embedSWF("/header.swf", "FLheader", "977", "145", "8.0.0", false, flashvars, params, attributes); </script> <div id="maincontent"> <script type="text/javascript"> var flashvars = { }; var params = {}; params.menu = "false"; params.wmode = "transparent"; params.bgcolor = "#1A1A1A"; var attributes = {}; swfobject.embedSWF("/subHeader.swf", "subFlash", "963", "167", "8.0.0", false, flashvars, params, attributes); </script> <div class="textArea"> <div id="crumbsBar"><b><a href="http://www.southernfiremag.co.za/">SOUTHERN FIRE MAG</a></b> >> <a href="http://www.southernfiremag.co.za/submissions/model_submission.php">MODEL SUBMISSION </a> >> Submit to modelsubmission@southernfiremag.co.za</div> <div id="adPanel"> <img src="southernfiremag.co.za_files/become_Southern Fire Girl.png" border="0" height="258" width="292"><br> <!-- <a href="/join/"><img src="/images/membershipPrice.jpg" alt="" width="186" height="117" border="0" /></a><br />--> <img src="southernfiremag.co.za_files/index_20.jpg" alt="" height="258" width="292"><br> <img src="southernfiremag.co.za_files/ban_secure.jpg" alt="" height="120" width="186"><br> <img src="southernfiremag.co.za_files/ban_updates.jpg" alt="" height="120" width="186"><br> <br> <br class="clear"> </div> <div id="mainPanel"> <h1 style="" class="sIFR-replaced"> </h1> <h2 class="sIFR-replaced" style="width: 460px;"> </h2> </div> <br class="clearLeft"> <div style="width: 400px; float: left;"> <p><span class="style1">Fill out this form with your pics. Be sure to include head-shots, commercial fashion, glamour/swim and beauty. </span></p> <div> <form action="index.htm" method="post" enctype="multipart/form-data" name="SOUTHERN FIRE MAG" id="SOUTHERN FIRE MAG"> <table class="tableBK" border="0" cellpadding="3" cellspacing="1" width="400px"> <!--DWLayoutTable--> <tbody><tr> <td colspan="2" height="35"></td> </tr> <tr> <td width="141" height="24"><b class="formfont"><span style="color: red">*</span><span class="style1"> Name: </span></b></td> <td width="242"><input name="name" id="name" size="25" type="text"> </td> </tr> <tr> <td height="24"><b><span style="color: red">*</span><span class="style1"> Email:</span></b></td> <td><input name="email" id="email" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">Address:</span></td> <td><input name="address" id="address" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">City:</span></td> <td><input name="city" id="city" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">State:</span></td> <td><input name="state" id="state" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">Zip:</span></td> <td><input name="zip" id="zip" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">Phone:</span></td> <td><input name="phone" id="phone" size="25" type="text"> </td> </tr> <tr> <td height="29"> </td> <td> </td> </tr> <tr> <td height="24"><span style="color: red">*</span><span class="style1"> Stage Name:</span></td> <td><input name="alias" id="alias" size="25" type="text"> </td> </tr> <tr> <td height="24"><span class="style1">Age:</span></td> <td class="tdGrey2"><input name="age" id="age" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Ethnicity:</span></td> <td class="tdGrey2"><input name="ethnicity" id="ethnicity" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Height:</span></td> <td class="tdGrey2"><input name="height" id="height" size="25" type="text"></td> </tr> <tr> <td height="25"><span class="style1">Weight:</span></td> <td class="tdGrey2"><select name="weight"> <option selected="selected" value="85-99">85-99</option> <option value="100-110">100-110</option> <option value="111-115">111-115</option> <option value="116-125">116-125</option> <option value="126-135">126-135</option> <option value="136-145">136-145</option> <option value="146-155">146-155</option> <option value="156-165">156-165</option> <option value="Other">Other</option> </select></td> </tr> <tr> <td height="24"><span class="style1">Bust:</span></td> <td class="tdGrey2"><input name="bust" id="bust" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Waist:</span></td> <td class="tdGrey2"><input name="waist" id="waist" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Hip:</span></td> <td class="tdGrey2"><input name="hip" id="hip" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Shoe:</span></td> <td class="tdGrey2"><input name="shoe" id="shoe" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Dress:</span></td> <td class="tdGrey2"><input name="dress" id="dress" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Agency:</span></td> <td class="tdGrey2"><input name="agency" id="agency" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Personal Website:</span></td> <td class="tdGrey2"><input name="website" id="website" size="25" type="text"></td> </tr> <tr> <td height="29"> </td> <td> </td> </tr> <tr> <td height="45" colspan="2"><span class="style1">We have several different photographers that we work with in the following Country. Please select which Country you are willing to meet with our photographers if selected for a test shoot? </span></td> </tr> <tr> <td height="25"><span class="style1">Country:</span></td> <td><!--<input name="location" type="text" id="location" size="25" value="" > --> <select name="location"> <option selected="selected" value="SOUTH AFRCA">SOUTH AFRICA</option> <option value="USA">USA</option> <option value="DRC CONGO">DRC CONGO</option> <option value="ANGOLA">ANGOLA</option> <option value="MOZABIQUE">MOZABIQUE</option> <option value="MILAN">MILAN</option> <option value="OTHERS">OTHERS</option> </select></td> </tr> <tr> <td colspan="2" height="2"></td> </tr> <tr> <td height="32" colspan="2"><span style="color: red;">Image upload is required.</span> <span class="style1">Please upload 1 or up to 4 images below. Each image size must be below 1MB</span></td> </tr> <tr> <td colspan="2" height="2"></td> </tr> <tr> <td height="27"><span style="color: red">*</span><span class="style1"> Image 1</span></td> <td><label><span class="td1"> <input name="fileatt[]" type="file"> </span></label> </td> </tr> <tr> <td height="27" valign="top"><span class="style1">Image 2 </span></td> <td><label><span class="td1"> <input name="fileatt[]" type="file"> </span></label></td> </tr> <tr> <td height="27" valign="top"><span class="style1">Image 3 </span></td> <td><label><span class="td1"> <input name="fileatt[]" type="file"> </span></label></td> </tr> <tr> <td height="27" valign="top"><span class="style1">Image 4 </span></td> <td><label><span class="td1"> <input name="fileatt[]" type="file"> </span></label></td> </tr> <tr> <td height="29"> </td> <td> </td> </tr> <tr> <td height="24"><span class="style1">Myspace<b>:</b></span></td> <td><input name="myspace" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">ModelMayhem<b>:</b></span></td> <td><input name="mayhem" size="25" type="text"></td> </tr> <tr> <td height="24"><span class="style1">Facebook<b>:</b></span></td> <td><input name="facebook" size="25" type="text"></td> </tr> <tr> <td height="8" colspan="2"> <hr> </td> </tr> <tr> <td height="24"><span class="style1">Twitter<b>:</b></span></td> <td><input name="twitter" size="25" type="text"></td> </tr> <tr> <td height="32" colspan="2"> <span class="style1">Have a twitter account? If so, let us know your account and we'll post your tweets here. </span></td> </tr> <tr> <td height="8"></td> <td></td> </tr> <tr> <td height="87" valign="top"><span class="style1">TV</span></td> <td> <textarea name="tv" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Film</span></td> <td> <textarea name="film" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Commercial</span></td> <td> <textarea name="commercial" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Advertising</span></td> <td> <textarea name="advertising" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Editorial</span></td> <td> <textarea name="editorial" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Music Video</span></td> <td> <textarea name="music" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Web</span></td> <td> <textarea name="web" cols="45" rows="6"></textarea> </td> </tr> <tr> <td height="26" valign="top"><span class="style1">Tattoos?</span></td> <td> <input name="tyn" value="yes" type="radio"> Yes <input name="tyn" value="no" checked="checked" type="radio"> No<br> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Give more details about your tattoos...</span></td> <td> <textarea name="tattoos" cols="45" rows="6" id="tattoos"></textarea> </td> </tr> <tr> <td height="87" valign="top"><span class="style1">Why are you the right girl for SOUTHERN FIRE...</span></td> <td><textarea name="description" cols="45" rows="6" id="description"></textarea> </td> </tr> <tr> <td height="24" valign="top"><span class="style1">3 + 4 =?</span></td> <td> <!-- <img src="/submissions/random_code/code.php" alt="" /><br /> --> <input name="code" type="text"> </td> </tr> <tr> <td colspan="2" class="tablebar" height="2"></td> </tr> <tr> <td height="41" colspan="2" align="center" class="tdGrey2"> <input name="action" id="action" value="sendform" type="hidden"> <input name="Submit" src="southernfiremag.co.za_files/confrim.gif" value="SUBMIT" type="image"> </td> </tr> <tr> <td colspan="2" class="tdGrey" height="5"></td> </tr> </tbody></table> </form> <script language="JavaScript" type="text/javascript">//You should create the validator only after the definition of the HTML form var frmvalidator = new Validator("SOUTHERN FIRE MAG"); frmvalidator.addValidation("email","maxlen=50"); frmvalidator.addValidation("email","req","Please enter your email address"); frmvalidator.addValidation("email","email"); frmvalidator.addValidation("name","req","Please enter your name"); frmvalidator.addValidation("alias","req","Please enter your alias"); </script> </div> </div> <div style="width: 250px; float: left; text-align: left; margin-left: 10px;"> <!-- right side - inner content --> <!-- <img src="/images/extra/041410/bmd1.jpg" alt="" /><br /><br /> <img src="/images/extra/041410/bmd2.jpg" alt="" /><br /><br /> <img src="/images/extra/041410/bmd3.jpg" alt="" /><br /> --> </div> <br class="clear"> </div> <br class="clear"> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script><script src="southernfiremag.co.za_files/ga.js" type="text/javascript"></script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-589703-16"); pageTracker._trackPageview(); } catch(err) {} </script> </body></html> Thank you for your reply. With the code I had to acknowledge nothing had been inserted,(that is, still spaces, it was working. When I added the code to only accept alpha chars etc., I inserted numbers, nothing worked, with no error message. Would you, or can I send the whole code through for the form. I noticed that the form tags had been changed so I altered them as well according to your message. I have a form with two text input boxes. I want to limit the text typed into the boxes as follows: 1. Either box can have the number 2 typed in, but the other box must remain empty OR 2. Each box can have the number 1 typed into Is this possible with JS and, if so, how do I do it?? hello cant get my head around this..i had a form posting data to my sql database but it would show the thank you using {if} ect so created java vaildation script what points it to ?action=registered showing thank you message but it not submitting to sql or sending notification email?? can any one help me? thanks dan thanks Hello fellow programmers, I am having some trouble with my javascript doing what I want it to, which is returning values (true/false || 1/0). I haven't used much javasript but I am experienced with C#, Java, Python etc so this is sort of new to me syntax wise. Here is what I have so far: http://jsfiddle.net/HpSyJ/1/ note: for some reason css doesn't like jsfiddle :S, the error messages are hidden in my Notepad++ & firefox combo though Really all I want is when I hit submit, it runs an alert or changes the error message to visible. Can someone please have a quick read over and see if anything jumps out at them? Thanks in advance, Andrew Hi, I am trying to make a form check two fields (using regular expressions) and then submit. So far I have created my expressions but i cant get the form to validate correctly! I seem to get the error associated with the loyalty card rather than the postcode check. Any help would be appreciated My code is: <script type="text/javascript"> function validate(postalCode) { var re = new RegExp(/^([a-zA-Z]{2}[0-9]{1,2})|([0-9]{2}[a-zA-Z]{1,2})$/); var str = postalCode.value; if (re.test(str)) return true; else { alert("That is not a valid postcode. Please verify your input."); return false; } } function validate(cardNumber) { var re = new RegExp(/^([a-zA-Z]{1}[a-zA-Z0-9]{4})([a-zA-Z0-9]{5})([a-zA-Z0-9]{3})([0-9]{1}[!&@?]{1})$/); var str = cardNumber.value; if (re.test(str)) return true; else { alert("That is not a valid card number. Please verify your input."); return false; } } </script> <html> <form id="order" action= "" method="post" > <table cellpadding="5"> <tr> <td>Postal Code</td> <td><input type="text" name="postalCode" maxlength= "30" /></td> </tr> <tr> <td>Loyalty card</td> <td><input type="text" name="cardNumber" maxlength= "30" /></td> </tr> <input id = "submit" type="submit" value="Submit" onclick="validate(postalCode); validate(cardNumber)" /> </td> </form> </html> I am trying to set up a looping structure that tests to see if the user enters a value. If the textbox is null then a global variable is false otherwise a checkbox is checked and the global variable is true. below is what i have done so far, please assist me. var isValid = false; window.onload = startForm; function startForm() { document.forms[0].firstName.focus(); document.forms[0].onsubmit = checkEntries; alert("You have been added to the list") } function checkEntries() { var menus = new Array(); var formObject = document.getElementsByTagName('*'); for (var i=0; i < formObject.length; i++){ if (formObject[i] == "myform") menus.push(formObject[i]); if (document.forms[0].firstName.value.length==0 || document.forms[0].firstName.value.length == null){ isValid= false; alert("Please enter a first name"); } else (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].lastName=="" || document.forms[0].lastName== null){ alert("Please enter a last name"); isValid = false; } else (document.forms[0].check1.checked=true); isValid=true; if (document.forms[0].email=="" || document.forms[0].email== null) { alert("Please enter a valid email"); } else return (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].bDate=="" || document.forms[0].bDate== null) { isValid=false; alert("please make sure you enter a valid birth date."); } else (document.forms[0].check0.checked=true); isValid=true; } } here is the form html... <form name="myform" > <input type="checkbox" name="check0" class="check0" id="check0" > First: <input type="text" name="firstName" id="firstName"> <BR> <input type="checkbox" name="check1" class="check1" id="check1" > Last: <input type="text" name="lastName" id="lastName" ><BR> <input type="checkbox" name="check2" class="check2" id="check2" > E-Mail: <input type="text" name="email" id="email"> <BR> <input type="checkbox" name="check3" class="check3" id="check3" > Birthday (mm/dd/yyyy): <input type="text" name="bDate" id="bDate"> <BR> <input type="submit" value="Join our mailing List" /> </form> Pardon me for asking a basic question. I basically need a pointer to an example or ways to learn this -- including an editor I should use for scripting. I would like to do the following: Divide a window into 3 panes; Display & manage messages in one pane; Each message has a unique subject line; Each message can be opened or deleted or forwarded. Thanks. ok ive searched everywhere online for a webform that is in 2 or more parts... example: (not asking for contact info yet) page 1: name age gender "start request button" (continued application) page 2: email address phone number best time to contact, etc... "submit button" saves info for next page to submit all info from both pages of application to a server etc. I know its possible, i just need to be put on the path... any help is much appreciated! Hi, I am trying to only allow a person to enter alpha characters in this field and if they try to enter a number a pop up box will tell them they can only enter alpha characters. Can this be done? Here is my code: How would you like us to address you? ("Dear Pat" Dear <input name="SALUT" type="text" id="address2" style="color: #000000; border-left: 0px solid #008000; border-right: 0px solid #254D78; border-top: 0px solid #008000; border-bottom: 2px solid #0033CC; background-color: #EBE1BE" tabindex="5" size="15" maxlength="50" onFocus="if(this.value=='SALUT')this.value='';"> Any help would be greatly appreciated. Thanks Hello all, I am building a service that other developers will use. As part of this, they need to embed a form on their website. This form will be hosted on my server, be updated periodically, etc. We'd been trying to create a Javascript file that would use JQuery to load the form, but we're running into issues from the Same Origin Policy, where Ajax requests cannot be made across different domains. Does anyone have an idea of how to fix this? We thought about using an iframe, but that solution will not suffice. Thanks! I have an order form that takes different computers and adds different accessories and grabs all the prices and adds them together for a subTotal price. Tax is figured as well. The problem is when I try to add the taxAmt to the subTotal. Let's say the subTotal is 600.00 and tax is 30.00, the total would show 600.0030.00 instead of 630.00. Here is my calcPrice function: Code: function calcPrice() { var subTotal; //chesk to see which computer is selected in the selection list if (document.forms[0].compType[0].checked == true) { subTotal=parseFloat(document.forms[0].compType[0].value); } else if (document.forms[0].compType[1].checked == true) { subTotal=parseFloat(document.forms[0].compType[1].value); } else if (document.forms[0].compType[2].checked == true) { subTotal=parseFloat(document.forms[0].compType[2].value); } //gets the optical drive selection and price product = document.getElementById("optical"); optPrice = parseFloat(product.options[product.selectedIndex].value); //adds optical drive selction to the subtotal price subTotal = subTotal + optPrice; //checks all checkboxes for checked and adds the value to the subtotal if (document.forms[0].accType[0].checked == true) { subTotal = subTotal + parseFloat(document.forms[0].accType[0].value); } if (document.forms[0].accType[1].checked == true) { subTotal = subTotal + parseFloat(document.forms[0].accType[1].value); } if (document.forms[0].accType[2].checked == true) { subTotal = subTotal + parseFloat(document.forms[0].accType[2].value); } //calculate tax amount taxAmt = (subTotal * .06).toFixed(2); //adds the subtotal and tax amounts to get total cost totalAmt = subTotal + taxAmt; //displays the amounts in the text boxes document.getElementById("sub").value = subTotal; document.getElementById("tax").value = taxAmt; document.getElementById("tot").value = totalAmt; One more thing is that I validate a phone number as well. Would I just setup an if statement saying if re.test=false then show alert? Code: //validates phone number var re = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/ return re.test(phoneNumber); Thanks for the help <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> Code: <script type='text/javascript'> <!-- function writeSummary() { var desiredquantity = document.orders.value; if (desiredquantity='') { alert('Please enter a value for the desired quantity'); return false; } else if (desiredquantity='value<0') { alert('Please enter a value for the desired quantity that is greater than 0'); return false; } else (desiredquantity='value>0') { alert('Thank you for your order!'); return true; } } //--> </script> </head> <body> <form name="Orders"; action=""; onSubmit="return writeSummary();"> <table width="80%" align="center"> <tbody> <tr> <td><<img SRC = "nwlogo.jpg" img align="right" style="width:200px; height:174px" height="174" width="200"></td> <td><big><b> 3-Season Tent</big></b></td> </tr> </tbody> </table> <p> <table width="80%" border="5" cellspacing="3" cellpadding="5" align="center"> <tbody> <tr> <th width="20%">Selection</th> <th width="20%">Size</th> <th width="20%">Color</th> <th width="20%">Price</th> <th width="20%">In Stock?</th> </tr> <tr> <td align="middle"></td> <td align="middle">Rectangular</td> <td align="middle">Blue</td> <td align="middle">259.99</td> <td align="middle">Yes</td> </tr> </tbody> </table> </p> <p> <table width="80%" cellspacing="3" cellpadding="5" align="center"> <tbody> <tr> <td width="70%"><big>Desired Quantity</big><input type="text" name="userid" size="20"></td> <td align="right" width="15%"><input type="button" name="subbtn" value="Submit"/></td> </tr> </tbody> </table> </p> <p> <table width="80%" align="center" border="" id="Table1"> <tbody> <tr> <td align="right">Subtotal: <input type="text" name="userid" size="20"></td> <td></td> </tr> <tr> <td align="right">Tax: <input type="text" name="userid" size="20"></td> <td></td> </tr> <tr> <td align="right">Order Total: <input type="text" name="userid" size="20"></td> <td></td> </tr> </tbody> </table> </p> </form> </body> </html> Need help with the javascript coding portin of the web page. Need it to use the pop up alerts that have been input above and also to calculate the order upon entering a correct amount showing subtotal, tax, and total. |