JavaScript - Javascript/html Problem
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script language="javascript"> function send_onclick(frmName) { var bolSubmit; bolSubmit = true; if (frmName.email.value == "") { alert("You must enter an email address"); bolSubmit = false; } if (bolSubmit == true) { frmName.submit(frmName); } } </script> </head> <body> <form name="frmName" method="post" action="validate.asp"> Enter your name in the text box. If nothing is entered, a warning <br /> message will be displayed. Only when you enter something into the <br /> text box will the page be submitted. <br /><br /> Please enter your name : <input type="text" name="email" size="20" /><br /> <input type="button" name="butSent" value="Do it" onclick="return send_onclick(frmName)"> </form> </body> </html> Hi there, I would like to know the purpose of having var bolSubmit in the code above. Also, why is it that "form name" allows my code to work even though there is a warning stating that it is outdated, but when I change it from "form name" to "form id", it does not complain of the warning anymore, but instead my code does not work. Please advise. Similar TutorialsI have two versions of this document. The first version uses only JavaScript and the standard PROMPT(). It works very well, but I would like to insert the name prompt into the page using the input command. For some reason the variable loaded in the HTML statement doesn't get passed to the JavaScript. Any ideas would be appreciated! This is only a small test page. Sorry I don't know about the [code] tag... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Sat, 10 Sep 2011 19:40:31 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>Enter golfers name</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="script1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function GetPage(){ document.write("OK") var lab = ""; var result = fullname.toUpperCase(); var word=result.split(" "); fname = word[0] lname = word[1] alpha = lname.slice(0,1); lab = fname.concat("_") lab = lab.concat(lname) if(word[2]){ ext = word[2] lab = lab.concat("_") lab = lab.concat(ext) } var intro = "./Stats_"; page = intro.concat(alpha); page = page.concat("_golfers.html#"); page = page.concat(lab) document.write(page) <!-- window.location.pathname = page } </script> </head> <body> <center> <form action="form_action.asp" method="get"> You can enter the golfersname or select him from the above list.<br><br> <input type="text" name="fullname" /> <button type="submit" onclick="GetPage()">GO</button> </form> </center> <BR><BR><BR> This is the end </body> </html> i have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks Hello, I am nearing completion on the modification of a Javascript/Html Order Form. The problem arises when I click on 'Submit Order' after filling in details and choosing a product. For some reason, the pop up box shows the correct product, but it shows the $ Total from the previous box in the table. Thank you all for your time in looking into this: Code: <html> <head> <title>JS Order</title> <script language="JavaScript"> <!-- Start hiding from older browsers. // This function displays the nag screen when a field hasn't been filled in. function nag(form, field, x) { ufield=field.toUpperCase(); alert("Details missed " + ufield + "!" + "\n\nPlease fill in the field and submit the form again."); form.elements[x].focus(); } // This function is used to round the tax amount to the nearest hundreths. function roundPrice(price) { // save a copy of the price in case it is an even dollar amount. var workPrice = price; // Make the price a string by adding a string 0 to the end. workPrice += "0"; // Find out where the decimal point is. var pointIndex = workPrice.indexOf(".",0); // If there is a decimal point now check to see if it needs to be rounded up. if (pointIndex >= "0") { // Set an index for the thousands digit. var thousands = pointIndex +3; // if the third number past the decimal point is greater than or // equal to 5, then we need to round up the hundredth digit. if (workPrice.charAt(thousands) >= "5") { // Turn the price into a number. workPrice=parseFloat(price); // Round up the price. workPrice=workPrice + .01; // Turn it back into a string. workPrice=workPrice + "0"; // Cut off the thousands on down. rPrice = workPrice.substring(0,thousands); } else { // We didn't need to round the price up so cut off the // thousands on down and return the price rPrice = workPrice.substring(0,thousands); } // Its an even dollar amount so just put on the .00 on the end. } else { rPrice = price + ".00"; } // Now return the rounded price. return rPrice; } // This function calculates the form. function updatePrice() { // Reset the subtotal price var addPrice = 0; // Reset the running total prices. var nowPrice = 0; // Reset the nubmer of part ordered. var partcount = 0; // Step through each element in the form. for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++) { // If the form element has "qty" in the name then we need to process it. if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty') { // If the item has a quantity of not 0, then we need to process it. if (self.document.forms[0].elements[i].value != 0) { // Locate the cost costIndex = i + 1; // Increment the part counter. partcount++; // Get the actual value for the quantity. nowQty = eval(self.document.forms[0].elements[i].value); // Get the cost of the item. nowPrice = eval(self.document.forms[0].elements[costIndex].value); // Calculate the extended cost (i.e., quanty * cost). nowPrice = eval(nowPrice * nowQty); // Add to the subtotal. addPrice += nowPrice; } } } // Round off the subTotal price. subTotal=roundPrice(addPrice); // Put the sub total price into the form. self.document.forms[0].subtot.value = subTotal; // Figure the tax. tax = parseFloat(self.document.forms[0].taxrate.value * addPrice); // Round off the tax price. totalTax = roundPrice(tax); // Put the total tax into the form. self.document.forms[0].totaltax.value = totalTax; // Start figuring the total including tax. // Turn the price string into a number. subPrice = parseFloat(addPrice); // Turn the tax string into a number. addTax = parseFloat(totalTax); // Add the tax and subtotal to get the total price. totalPrice = (addTax + subPrice); // Round the total price. finalPrice = roundPrice(totalPrice); // Update the form with the total cost. self.document.forms[0].cost.value = finalPrice; // Update the form with the number of line items. self.document.forms[0].items.value = partcount; } function orderIt(form) { // If the order is zero, display a message. if (form.cost.value == "0.00") { alert("You have not ordered anything. Please select an item and re-submit your order.") } else { if (form.elements[0].value == "") { nag(form, form.elements[0].name,0) } else if (form.elements[1].value == "") { nag(form, form.elements[1].name, 1) } else if (form.elements[2].value == "") { nag(form, form.elements[2].name, 2) } else if (form.elements[4].value == "") { nag(form, form.elements[4].name, 4); } else if (form.elements[5].value == "") { nag(form, form.elements[5].name, 5); } else if (form.elements[6].value == "") { nag(form, form.elements[6].name, 6); } else if (form.elements[10].value == "") { nag(form, form.elements[10].name, 10); } else { var message = "You have ordered the following items:\n"; message = message + "Qty\tCost\tDescription\n"; // Step through each element in the form. for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++) { // If the form element has "qty" in the name then we need to process it. if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty' && self.document.forms[0].elements[i].value !=0) { // Get the quantity. qtyItem = self.document.forms[0].elements[i].value; costItem = self.document.forms[0].elements[i-2].value; // Get the description. descItem = self.document.forms[0].elements[i-1].value; // add the line item to the confirmation message. message = message + qtyItem + "\t" + costItem + "\t" + descItem + "\n"; } } message = message + "\nOrder total: $" + self.document.forms[0].cost.value if (confirm(message)) { self.document.forms[0].submit(); } } } } // end hiding from older browsers --> </script> </head> <body bgcolor="white" text="black" alink="red" vlink="purple" link="blue" background="images/bkgrd.gif"> <p> <table width=440> <tr><td> <p> <form name=options method=post action="/cgi-bin/order.cgi"> <table border="0" width="100%" id="table1"> <tr> <td width="109" align="right"><font face="Arial" size="2"> First Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=FirstName size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Last Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=LastName size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Address Line 1:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Address1 size=40 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Address Line 2:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Address2 size=40 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Suburb:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Suburb size=25 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">City:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=City size=25 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Postal Code:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=PostalCode size=15 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Country:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Country size=15 maxlength=40 value=NZ></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Home Phone:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=HomePhone size=20 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Mobile Phone:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=MobilePhone size=20 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">E-Mail Address:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=EmailAddress size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Domain Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=DomainName size=30 maxlength=40></font></td> </tr> </table><br> <font face="Arial" size="2">Enter a quantity of 1 into the package you require.<br><br> Monthly payments incur a $2 per month administration fee. Set up is <b>free</b> for all packages (for a limited time).</font><br><br> <table border=1 cellpadding=2 width="500" bordercolorlight="#808080"> <tr> <th><font face="Arial" size="2">Description</font></th> <th><font face="Arial" size="2">Qty</font></th> <th><font face="Arial" size="2">Total</font></th> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc1" value="Basic Monthly"> </font><font face="Arial" size="2">Basic Package <BR><B> Pay Monthly</B></font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty1" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost1" value="11.99"> </font><font face="Arial" size="2">$11.99</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc2" value="Basic PrePay 1 Year"> </font><font face="Arial" size="2">Basic Package - $9.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty2" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost2" value="109.89"> </font><font face="Arial" size="2">$109.89</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc3" value="Basic PrePay 2 Years"> </font><font face="Arial" size="2">Basic Package - $8.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty3" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost3" value="197.78"> </font><font face="Arial" size="2">$197.78</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc4" value="Basic PrePay 3 Years"> </font><font face="Arial" size="2">Basic Package - $7.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty4" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost4" value="263.67"> </font><font face="Arial" size="2">$263.67</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc13" value="Deluxe Monthly"> </font><font face="Arial" size="2">Deluxe Package<BR><B> Pay Monthly</B></font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty13" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost13" value="21.99"> </font><font face="Arial" size="2">$21.99</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc14" value="Deluxe PrePay 1 Year"> </font><font face="Arial" size="2">Deluxe Package - $19.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty14" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost14" value="219.89"> </font><font face="Arial" size="2">$219.89</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc15" value="Deluxe PrePay 2 Years"> </font><font face="Arial" size="2">Deluxe Package - $18.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty15" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost15" value="417.78"> </font><font face="Arial" size="2">$417.78</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc16" value="Deluxe PrePay 3 Years"> </font><font face="Arial" size="2">Deluxe Package - $17.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty16" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost16" value="593.67"> </font><font face="Arial" size="2">$593.67</font></td> </tr> </table> <font face="Arial" size="2"> <br> </font> <table border=1 cellpadding=2 width="500" bordercolorlight="#808080"> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc17" value="Blogging Software Installation Service"> </font><font face="Arial" size="2">Installation Service<BR><B> Blogging software (Wordpress etc)</B></font></td> <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty17" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost18" value="39.00"> </font><font face="Arial" size="2">$39.00</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc19" value="Shopping Cart Installation Service"> </font><font face="Arial" size="2">Installation Service<BR><B> Shopping Cart (ZenCart, osCommerce, Cubecart etc)</B></font></td> <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty19" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost19" value="349.00"> </font><font face="Arial" size="2">$349.00</font></td> </tr> </table> <p> <table width=500> <tr> <td align=right> <div align="left"> <table cellpadding=1 cellspacing=1> <tr> <td colspan=2 align=right><font face="Arial" size="2">Sub Total: $</font><font size="1" face="Arial"><input name=subtot value="0.00" size=10 maxlength=10 onChange="updatePrice()"></font></td> </tr> <tr> <td valign=bottom><font size="1" face="Arial"><input type=hidden value=".15" name=taxrate size=5 maxlength=5 onchange="updatePrice()"> </font></td> <td align=right><font face="Arial" size="2">GST: $</font><font size="1" face="Arial"><input type=text name=totaltax size=10 maxlength=10 value="0.00" onChange="updatePrice()"></font></td> </tr> <tr> <td colspan=2 align=right><font face="Arial" size="2">Total Order: $</font><font size="1" face="Arial"><input name="cost" type=text value="0.00" size=10 maxlength=10 onChange="updatePrice(this.form)"><input type=hidden maxlength=4 size=4 name=items></font></td> </tr> </table> </div> <p> <font size="1" face="Arial"> <input type=button value="Submit Order" onClick="orderIt(this.form);" style="float: left"></font><font face="Arial" size="2"> </font><font size="1" face="Arial"> <input type=reset value="Clear Order" style="float: left"><font face="Arial" size="2"> </form> </font></font> </center> </body> </html> Hi, I am new to javascript, Please help me with the issue below. My javascript code below should actually fetch the data from html table on button click. function displaymessage() { alert ("button pressed"); var table_cells = new Array(); var table7 = document.getElementById('Auth'); for (i=0,n=table7.rows.length; i < n ; i++) { var Rowdata = table7.rows[i]; table_cells[i] = new Array(); for(j=0,cols = Rowdata.cells.length; j < cols; j++) { table_cells[i,j] = Rowdata.cells[j].innerHTML; alert (table_cells[i,j]); } } alert (table_cells[1,1]); alert (table_cells[2,1]); alert (table_cells[3,1]); alert (table_cells[4,1]); alert (table_cells[5,1]); alert (table_cells[6,1]); alert (table_cells[7,1]); alert (table_cells[8,1]); } The problem with my code above is that the statement "alert (table_cells[i,j]);" executes properly and shows the correct value. But the other alert statements shows only the value of the last row of the table. i.e., my table has 9 rows. and all the alert statements shows 9th row's 2nd column's value outside the for loop. But inside the for loop it executes fine. I tried it in IE7. I seem to miss something. Could someone please help me out with this? Thanks in advance. favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks I got an index.php Code: <html> <form action="bacakomik.php" method='post'> <select name="kodekomik"> <option value='../komik1/|23'>Judul Komik1</option> <option value="../komik2/|20">Judul Komik2</option> <option value="../komik3/|10">Juduk Komik3</option> <option value="../komik4/|20">Judul Komik4</option> </select> <input type="submit" /> </form> <?php echo ('<select>'); echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>'); echo ('</select>'); ?> </html> As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php $dirkomik = $_POST['kodekomik']; $exploded = explode("|", $dirkomik); echo ($exploded[0]); //picture directory echo ("<br>"); echo ($exploded[1]); //total page in the comic $pagecount = (int)$exploded[1]; //Take last posted value, process it right away echo ('<FORM name="guideform"> '); echo ('<select name="guidelinks">'); $i=1; do { echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>'); $i= $i+1; }while($i <= $pagecount); //Printing option and select echo ("</select>"); ?> <input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM> <img src="img0.jpg" id="im"> With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... It's a sort of mad lib. I have written codes for both windows. I just don't know what code to write in, or outside the tellStory function to display the actual story once the other window is called open.... <html> <head> <title>Silly Storey About You</title> </head> <script> function tellStorey() { setupStoryWindow(); } function setupStoryWindow(name, contentString) { var header = "<head><title>" + name + " 's story</title><head>" + "<h1>" + name + " 's story</h1>"; var storyWindow = window.open('', 'storyWindow'); storyWindow.document.write(header); storyWindow.document.write(contentString); storyWindow.document.close(); storyWindow.focus(); } </script> <body> <h1>Tell Your Storey</h1> <form name="input" method="get"> <p>Your first name: <input type="text" name="yourFirstName" /></p> <p>Your gender: <select name=yourGenderList> <option value="girl">girl <option value="guy">guy </select></p> <p>City you'd like to visit some day: <input type="text" name="city"/></p> <p>A fruit (plural form): <input type="text" name="fruit"/></p> <p>Your favorite teacher's name: <input type="text" name="teacher" /></p> <p>Your best friend's name: <input type="text" name="friend" /></p> <p>Your favorite actor's name: <input type="text" name="actor" /></p> <p>A large animal: <input type="text" name="animal" /></p> <p><input type=button value="Tell a Storey" onclick='tellStorey();'</p> </form> </body> </html> //here's the story "One fine morning on valentine's day a" + yourGenderList + "named" + yourFirstName + "woke up so excited. For today was going to be a single's date night in" + city + ", which is well known for "+ fruit + "." + name + "'s friend" + friend + "recommended that I go because they ended up, curiously enough, meeting and marrying my high school teacher" + teacher + ". I'm just hoping to meet someone that looks like" + actor + ". I've had a crush on"+ actor + "for too many years now. Well, realistically, that probably won't happen, but as long as they look like a" + animal + ", then my night will be worth while!" I am making an webpage where you get two random photos and you click using the arrow keys which one you like best and that one stays and goes on the versus the next random photo. I got it so far when you start the page it sets two random pictures but i dont know how to do key inputs on html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Which Is better?</title> <h1 align = center>Which is better?</h1> <script language="JavaScript"> var theImages = new Array() var thePictures = new Array() thePictures[1] = 'untitled-1.jpg' thePictures[2] = 'untitled-2.jpg' thePictures[3] = 'untitled-3.jpg' thePictures[4] = 'untitled-4.jpg' thePictures[5] = 'untitled-5.jpg' thePictures[6] = 'untitled-6.jpg' thePictures[7] = 'untitled-7.jpg' thePictures[8] = 'untitled-8.jpg' thePictures[9] = 'untitled-9.jpg' thePictures[10] = 'untitled-10.jpg' thePictures[11] = 'untitled-11.jpg' thePictures[12] = 'untitled-12.jpg' thePictures[13] = 'untitled-13.jpg' thePictures[14] = 'untitled-14.jpg' thePictures[15] = 'untitled-15.jpg' thePictures[16] = 'untitled-16.jpg' thePictures[17] = 'untitled-17.jpg' thePictures[18] = 'untitled-18.jpg' thePictures[19] = 'untitled-19.jpg' thePictures[20] = 'untitled-20.jpg' thePictures[21] = 'untitled-21.jpg' thePictures[22] = 'untitled-22.jpg' thePictures[23] = 'untitled-23.jpg' thePictures[24] = 'untitled-24.jpg' thePictures[25] = 'untitled-25.jpg' thePictures[26] = 'untitled-26.jpg' thePictures[27] = 'untitled-27.jpg' thePictures[28] = 'untitled-28.jpg' thePictures[29] = 'untitled-29.jpg' thePictures[30] = 'untitled-30.jpg' thePictures[31] = 'untitled-31.jpg' thePictures[32] = 'untitled-32.jpg' thePictures[33] = 'untitled-33.jpg' thePictures[34] = 'untitled-34.jpg' thePictures[35] = 'untitled-35.jpg' thePictures[36] = 'untitled-36.jpg' thePictures[37] = 'untitled-37.jpg' thePictures[38] = 'untitled-38.jpg' thePictures[39] = 'untitled-39.jpg' thePictures[40] = 'untitled-40.jpg' thePictures[41] = 'untitled-41.jpg' thePictures[42] = 'untitled-42.jpg' thePictures[43] = 'untitled-43.jpg' thePictures[44] = 'untitled-44.jpg' thePictures[45] = 'untitled-45.jpg' thePictures[46] = 'untitled-46.jpg' thePictures[47] = 'untitled-47.jpg' thePictures[48] = 'untitled-48.jpg' thePictures[49] = 'untitled-49.jpg' thePictures[50] = 'untitled-50.jpg' thePictures[51] = 'untitled-51.jpg' thePictures[52] = 'untitled-52.jpg' thePictures[53] = 'untitled-53.jpg' thePictures[54] = 'untitled-54.jpg' thePictures[55] = 'untitled-55.jpg' thePictures[56] = 'untitled-56.jpg' thePictures[57] = 'untitled-57.jpg' thePictures[58] = 'untitled-58.jpg' thePictures[59] = 'untitled-59.jpg' thePictures[60] = 'untitled-60.jpg' thePictures[61] = 'untitled-61.jpg' thePictures[62] = 'untitled-62.jpg' thePictures[63] = 'untitled-63.jpg' thePictures[64] = 'untitled-64.jpg' thePictures[65] = 'untitled-65.jpg' thePictures[66] = 'untitled-66.jpg' thePictures[67] = 'untitled-67jpg' thePictures[68] = 'untitled-68.jpg' thePictures[69] = 'untitled-69.jpg' thePictures[70] = 'untitled-70.jpg' thePictures[71] = 'untitled-71.jpg' thePictures[72] = 'untitled-72.jpg' thePictures[73] = 'untitled-73.jpg' thePictures[74] = 'untitled-74.jpg' thePictures[75] = 'untitled-1.jpg' thePictures[76] = 'untitled-2.jpg' thePictures[77] = 'untitled-77.jpg' thePictures[78] = 'untitled-78.jpg' thePictures[79] = 'untitled-79.jpg' thePictures[80] = 'untitled-80.jpg' thePictures[81] = 'untitled-81.jpg' thePictures[82] = 'untitled-82.jpg' thePictures[83] = 'untitled-83.jpg' thePictures[84] = 'untitled-84.jpg' thePictures[85] = 'untitled-85.jpg' thePictures[86] = 'untitled-86.jpg' thePictures[87] = 'untitled-87.jpg' thePictures[88] = 'untitled-88.jpg' thePictures[89] = 'untitled-89.jpg' thePictures[90] = 'untitled-90.jpg' thePictures[91] = 'untitled-91.jpg' thePictures[92] = 'untitled-92.jpg' thePictures[93] = 'untitled-93.jpg' thePictures[94] = 'untitled-94.jpg' thePictures[95] = 'untitled-95.jpg' thePictures[96] = 'untitled-96.jpg' thePictures[97] = 'untitled-97.jpg' thePictures[98] = 'untitled-98.jpg' thePictures[99] = 'untitled-99.jpg' thePictures[100] = 'untitled-100.jpg' thePictures[101] = 'untitled-101.jpg' thePictures[102] = 'untitled-102.jpg' thePictures[103] = 'untitled-103.jpg' thePictures[104] = 'untitled-104.jpg' thePictures[105] = 'untitled-105.jpg' thePictures[106] = 'untitled-106.jpg' thePictures[107] = 'untitled-107.jpg' thePictures[108] = 'untitled-108.jpg' thePictures[109] = 'untitled-109.jpg' thePictures[110] = 'untitled-110.jpg' thePictures[111] = 'untitled-111.jpg' thePictures[112] = 'untitled-112.jpg' thePictures[113] = 'untitled-113.jpg' thePictures[114] = 'untitled-114.jpg' thePictures[115] = 'untitled-115.jpg' thePictures[116] = 'untitled-116.jpg' thePictures[117] = 'untitled-117.jpg' thePictures[118] = 'untitled-118.jpg' thePictures[119] = 'untitled-119.jpg' thePictures[120] = 'untitled-120.jpg' thePictures[121] = 'untitled-121.jpg' thePictures[122] = 'untitled-122.jpg' thePictures[123] = 'untitled-123.jpg' thePictures[124] = 'untitled-124.jpg' thePictures[125] = 'untitled-125.jpg' thePictures[126] = 'untitled-126.jpg' thePictures[127] = 'untitled-127.jpg' thePictures[128] = 'untitled-128.jpg' thePictures[129] = 'untitled-129.jpg' thePictures[130] = 'untitled-130.jpg' thePictures[131] = 'untitled-131.jpg' thePictures[132] = 'untitled-132.jpg' thePictures[133] = 'untitled-133.jpg' thePictures[134] = 'untitled-134.jpg' thePictures[135] = 'untitled-135.jpg' thePictures[136] = 'untitled-136.jpg' thePictures[137] = 'untitled-137.jpg' thePictures[138] = 'untitled-138.jpg' thePictures[139] = 'untitled-139.jpg' thePictures[140] = 'untitled-140.jpg' thePictures[141] = 'untitled-141.jpg' thePictures[142] = 'untitled-142.jpg' thePictures[143] = 'untitled-143.jpg' thePictures[144] = 'untitled-144.jpg' thePictures[145] = 'untitled-145.jpg' thePictures[146] = 'untitled-146.jpg' thePictures[147] = 'untitled-147.jpg' thePictures[148] = 'untitled-148.jpg' thePictures[149] = 'untitled-149.jpg' thePictures[150] = 'untitled-150.jpg' theImages[1] = 'untitled-1.jpg' theImages[2] = 'untitled-2.jpg' theImages[3] = 'untitled-3.jpg' theImages[4] = 'untitled-4.jpg' theImages[5] = 'untitled-5.jpg' theImages[6] = 'untitled-6.jpg' theImages[7] = 'untitled-7.jpg' theImages[8] = 'untitled-8.jpg' theImages[9] = 'untitled-9.jpg' theImages[10] = 'untitled-10.jpg' theImages[11] = 'untitled-11.jpg' theImages[12] = 'untitled-12.jpg' theImages[13] = 'untitled-13.jpg' theImages[14] = 'untitled-14.jpg' theImages[15] = 'untitled-15.jpg' theImages[16] = 'untitled-16.jpg' theImages[17] = 'untitled-17.jpg' theImages[18] = 'untitled-18.jpg' theImages[19] = 'untitled-19.jpg' theImages[20] = 'untitled-20.jpg' theImages[21] = 'untitled-21.jpg' theImages[22] = 'untitled-22.jpg' theImages[23] = 'untitled-23.jpg' theImages[24] = 'untitled-24.jpg' theImages[25] = 'untitled-25.jpg' theImages[26] = 'untitled-26.jpg' theImages[27] = 'untitled-27.jpg' theImages[28] = 'untitled-28.jpg' theImages[29] = 'untitled-29.jpg' theImages[30] = 'untitled-30.jpg' theImages[31] = 'untitled-31.jpg' theImages[32] = 'untitled-32.jpg' theImages[33] = 'untitled-33.jpg' theImages[34] = 'untitled-34.jpg' theImages[35] = 'untitled-35.jpg' theImages[36] = 'untitled-36.jpg' theImages[37] = 'untitled-37.jpg' theImages[38] = 'untitled-38.jpg' theImages[39] = 'untitled-39.jpg' theImages[40] = 'untitled-40.jpg' theImages[41] = 'untitled-41.jpg' theImages[42] = 'untitled-42.jpg' theImages[43] = 'untitled-43.jpg' theImages[44] = 'untitled-44.jpg' theImages[45] = 'untitled-45.jpg' theImages[46] = 'untitled-46.jpg' theImages[47] = 'untitled-47.jpg' theImages[48] = 'untitled-48.jpg' theImages[49] = 'untitled-49.jpg' theImages[50] = 'untitled-50.jpg' theImages[51] = 'untitled-51.jpg' theImages[52] = 'untitled-52.jpg' theImages[53] = 'untitled-53.jpg' theImages[54] = 'untitled-54.jpg' theImages[55] = 'untitled-55.jpg' theImages[56] = 'untitled-56.jpg' theImages[57] = 'untitled-57.jpg' theImages[58] = 'untitled-58.jpg' theImages[59] = 'untitled-59.jpg' theImages[60] = 'untitled-60.jpg' theImages[61] = 'untitled-61.jpg' theImages[62] = 'untitled-62.jpg' theImages[63] = 'untitled-63.jpg' theImages[64] = 'untitled-64.jpg' theImages[65] = 'untitled-65.jpg' theImages[66] = 'untitled-66.jpg' theImages[67] = 'untitled-67.jpg' theImages[68] = 'untitled-68.jpg' theImages[69] = 'untitled-69.jpg' theImages[70] = 'untitled-70.jpg' theImages[71] = 'untitled-71.jpg' theImages[72] = 'untitled-72.jpg' theImages[73] = 'untitled-73.jpg' theImages[74] = 'untitled-74.jpg' theImages[75] = 'untitled-75.jpg' theImages[76] = 'untitled-76.jpg' theImages[77] = 'untitled-77.jpg' theImages[78] = 'untitled-78.jpg' theImages[79] = 'untitled-79.jpg' theImages[80] = 'untitled-80.jpg' theImages[81] = 'untitled-81.jpg' theImages[82] = 'untitled-82.jpg' theImages[83] = 'untitled-83.jpg' theImages[84] = 'untitled-84.jpg' theImages[85] = 'untitled-85.jpg' theImages[86] = 'untitled-86.jpg' theImages[87] = 'untitled-87.jpg' theImages[88] = 'untitled-88.jpg' theImages[89] = 'untitled-89.jpg' theImages[90] = 'untitled-90.jpg' theImages[91] = 'untitled-91.jpg' theImages[92] = 'untitled-92.jpg' theImages[93] = 'untitled-93.jpg' theImages[94] = 'untitled-94.jpg' theImages[95] = 'untitled-95.jpg' theImages[96] = 'untitled-96.jpg' theImages[97] = 'untitled-97.jpg' theImages[98] = 'untitled-98.jpg' theImages[99] = 'untitled-99.jpg' theImages[100] = 'untitled-100.jpg' theImages[101] = 'untitled-101.jpg' theImages[102] = 'untitled-102.jpg' theImages[103] = 'untitled-103.jpg' theImages[104] = 'untitled-104.jpg' theImages[105] = 'untitled-105.jpg' theImages[106] = 'untitled-106.jpg' theImages[107] = 'untitled-107.jpg' theImages[108] = 'untitled-108.jpg' theImages[109] = 'untitled-109.jpg' theImages[110] = 'untitled-110.jpg' theImages[111] = 'untitled-111.jpg' theImages[112] = 'untitled-112.jpg' theImages[113] = 'untitled-113.jpg' theImages[114] = 'untitled-114.jpg' theImages[115] = 'untitled-115.jpg' theImages[116] = 'untitled-116.jpg' theImages[117] = 'untitled-117.jpg' theImages[118] = 'untitled-118.jpg' theImages[119] = 'untitled-119.jpg' theImages[120] = 'untitled-120.jpg' theImages[121] = 'untitled-121.jpg' theImages[122] = 'untitled-122.jpg' theImages[123] = 'untitled-123.jpg' theImages[124] = 'untitled-124.jpg' theImages[125] = 'untitled-125.jpg' theImages[126] = 'untitled-126.jpg' theImages[127] = 'untitled-127.jpg' theImages[128] = 'untitled-128.jpg' theImages[129] = 'untitled-129.jpg' theImages[130] = 'untitled-130.jpg' theImages[131] = 'untitled-131.jpg' theImages[132] = 'untitled-132.jpg' theImages[133] = 'untitled-133.jpg' theImages[134] = 'untitled-134.jpg' theImages[135] = 'untitled-135.jpg' theImages[136] = 'untitled-136.jpg' theImages[137] = 'untitled-137.jpg' theImages[138] = 'untitled-138.jpg' theImages[139] = 'untitled-139.jpg' theImages[140] = 'untitled-140.jpg' theImages[141] = 'untitled-141.jpg' theImages[142] = 'untitled-142.jpg' theImages[143] = 'untitled-143.jpg' theImages[144] = 'untitled-144.jpg' theImages[145] = 'untitled-145.jpg' theImages[146] = 'untitled-146.jpg' theImages[147] = 'untitled-147.jpg' theImages[148] = 'untitled-148.jpg' theImages[149] = 'untitled-149.jpg' theImages[150] = 'untitled-150.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } var j = 0 var p = thePictures.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = thePictures[i] } var whichPicture = Math.round(Math.random()*(p-1)); function showPicture(){ document.write('<img src="'+thePictures[whichPicture]+'"align = right >'); } // End --> </script> </head> <body> <script language="JavaScript"> showImage(); </script> <script language="JavaScript"> showPicture(); </script> <h4 align = center> Click Left or Right arrow key to select which one is better. </h4> </body> </html> Help with JavaScript in HTML? Okay, I have done everything that I can to try and figure this one out...I am stumped. I need to display the flag of the specific country when the radio button of that flag is clicked. The book states: Create a Web Page that contains a table with two columns in a single row. In the first column, create a list of radio buttons that contains the name of each of the 10 countries. In the second column, display the flag of the selected country in an anchor element. Use onclick even handlers to display the flag image for each selected country. When the page first loads, the image should be blank. Here is my code: Code: <!DOCTYPE HTML> <!--My Name--> <!--Chapter 8 Page 478--> <!--October 28, 2011--> <html> <head> <title>Country Flags</title> <script type="text/javascript"> /* <![CDATA[ */ var argentina = "argentina.jpg" var australia = "australia.jpg" var bolivia = "bolivia.jpg" var cuba = "cuba.jpg" var finland = "finland.jpg" var france = "france.jpg" var italy = "italy.jpg" var peru = "peru.jpg" var syria = "syria.jpg" var tunisia = "tunisia.jpg" /* ]] */ </script> </head> <body> <form name="flags" action=" " method="get"> <table style="border: 1; width: 100%"> <tr valign="top"> <td> <input type="radio" name="flags" onclick= "document.argentina.jpg" /> Argentina <input type="radio" name="flags" onclick= "document.flags.country.value=austra… /> Australia <input type="radio" name="flags" onclick= "document.flags.country.value=bolivi… /> Bolivia <input type="radio" name="flags" onclick= "document.flags.country.value=cuba" /> Cuba <input type="radio" name="flags" onclick= "document.flags.country.value=finlan… /> Finland <input type="radio" name="flags" onclick= "document.flags.country.value=france… /> France <input type="radio" name="flags" onclick= "document.flags.country.value=italy" /> Italy <input type="radio" name="flags" onclick= "document.flags.country.value=peru" /> Peru <input type="radio" name="flags" onclick= "document.flags.country.value=syria" /> Syria <input type="radio" name="flags" onclick= "document.flags.country.value=tunisi… /> Tunisia </td> </p> <td> <textarea name="country" cols="75" rows="20" style="background-color: Transparent; border: none; overflow: hidden"></textarea> </td> </tr> </table> </form> </p> </body> </html> Can someone please help me out here. Thanks Ok, problem has been solved! ^^
Two things: I'm making a website for my online portfolio for Uni... 1. I want to make a prev|next (preferably with the numbers after too if possible) to flick through my work so I don't have to scroll around the page. 2. I want to create a slide down menu that stays open when an option is selected. Hope I've explained it well! Thanks in advance Hey guys, I use a newsletter service called Aweber to handle my blog's subscription service. What I have right now is a simple HTML form that I can have pass its variables through to a thank you page, so I can add customization there. The web form looks like this: Name: ________________ Email: ________________ Choose a free gift!: drop down list with "gift1" "gift2" or "gift3" as the choices. When a user submits the form, it will bring them to a custom thank you page, which I have made as "thank-you.php". On the "thank you" page, there is a javascript code that was given by Aweber which basically loads up all the variables... you can then CALL all of the variables in the page like this: <script type="text/javascript">formData.display("name")</script> ========================== So what's my question? I wanted there to be a display on the bottom that would allow users to download a different gift based on whether they chose gift 1, 2 or 3. I would also love to have there be an image of the ebook next to the download link depending on which book they chose. Is there a way I can pass variables through into an html <img> tag? (i.e. src="http://www.website.com/formData.display("gift").jpg" ... or something like that). Building off this, how would I generate a different download link based on the choice they made in the web form? (i.e. <a href="http://www.website.com/formData.display("gift").pdf"> or similar) Hopefully this all makes sense, let me know if you can help! Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work. Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/) To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now). Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left. Thanks for any help I have an input box with an I.D. of "q" on my website... By entering javascript into the URL bar I can change the place holder text (client side) to say "test" javascript:void(document.getElementById('q').value='test'); Now if I wanted to make it say test (but in bold with html) how would I do that?? I tried: javascript:void(document.getElementById('q').value='<b>test'); But that won't work.. it's a string! I don't know much javascript... Thanks all! hi whats wrong with this? <!DOCTYPE HTML> <HEAD> <script type="text/javascript"> //-- function onLoad() { document.GetElementById("login").innerHTML = "hello"; } --// </script> <TITLE>Steve's FS.</TITLE> <style type="text/css"></HEAD> <BODY onload="onLoad()"> no effect no errors using google chrome and javascript is enabled is it a html 5 thing im not jet aware of? i have done this a million times???? Hi I want to use the javascript variable value in html , for example <script > var alignment = "Right"; </script> <html> <p align = alignment > Hi </p> </html> How can i do like this ! Hello I am working on a site for work and on the page http://www.australianvisitor.co.uk/holidayfinder.htm I have a box with several options for the customer to tick to filter a selection of holidays according to destination. With thanks to thecssguy I found some code to do so. The only problem I have is that all the options are ticked by default, resulting in all holidays being displayed. It would be easier if they were all unticked by default allowing the customer to start from scratch so to speak. If i remove the line 'checked=checked' from the input box then: in firefox - the options are unticked but all results are still displayed in ie - the option box itself disappears. Does anyone have any suggestions? Thanks for taking the time to read this. |