|
HTML - Urgent Form, Button Help
Hi guys, I'm currently making a simple website for a coffee website and am currently working on the order page, which is a form and uses javascript. After trying to make the 'help' button open a new page, pretty much everything stuffed up and i'm in need of urgent help.
Any help would be greatly appreciated. Here is the HTML: HTML 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=ISO-8859-1" />
<title>Order Coffee</title>
<script language="JavaScript" type="text/javascript" src="../javascript/order.js"> </script>
<link rel="Stylesheet" href="../CSS/coffee.css" type="text/css" />
</head>
<body>
<!-- The whole page is a form -->
<form name="payment" action="" onClick="return goTohelp();" onSubmit="return validateOrder();">
<h1> Elmilio's Cafe </h1>
<br /> At Elmilio's Cafe we like to ensure that our deliveries are fast and on time
<br /> <b> Please fill in all the boxes to complete your order </b>
<table border= "0" cellspacing= "5">
<tr align="left">
<td> First Name: </td>
<td><input name="firstName" type="text" value="" /></td>
<td> Surname: </td>
<td><input name="surname" type="text" value="" /></td>
</tr>
<tr>
<td> Address: </td>
<td><input name="address" type="text" value="" /></td>
</tr>
<tr>
<td> Suburb: </td>
<td><input name="suburb" type="text" value="" /></td>
<td> State: </td>
<td> <select name="state">
<option value="0">South Australia</option>
<option value="1">Victoria</option>
<option value="2">New South Wales</option>
<option value="3">Queensland</option>
<option value="4">Northern Territory</option>
<option value="5">Western Australia</option>
<option value="6">Tasmania</option>
</select>
</td>
<td> Postcode: </td>
<td><input name="postcode" type="text" value="" /></td>
</tr>
<tr>
<td> Email: </td>
<td><input name="email" type="text" value="" /></td>
<td> Contact Number: </td>
<td><input name="contactNumber" type="text" value="" /></td>
</tr>
</table>
<hr />
Enter your coffee order:
<br />
<textarea name="comments" cols="40" rows="5">
Enter your coffee order here...
</textarea><br />
<hr />
Please enter method of payment
<p>
<input name="r" type="radio" value="creditcard" onclick="creditcard()"/> Credit Card <input name="r" type="radio" value="paypal" onclick="paypal()"/> Paypal <input name="r" type="radio" value="onlinebanking" onclick="onlinebanking()"/> Online Banking
<div id="creditcard">
<hr />
<img src="../images/creditcard.jpg" alt="Credit card options"/>
<table border= "0">
<tr align="left">
<th>Type of Credit Card</th>
<th>Name on the Card</th>
<th>Card Number</th>
<th>Expiry Date</th>
</tr>
<tr>
<td><select name="">
<option value="0">Visa</option>
<option value="1">Mastercard</option>
<option value="2">American Express</option>
</select></td>
<td><input name="nameonCard" type="text" value="" /></td>
<td><input name="cardNumber" type="text" value="" /></td>
<td><select name="">
<option value="0">01</option>
<option value="1">02</option>
<option value="2">03</option>
<option value="3">04</option>
<option value="4">05</option>
<option value="5">06</option>
<option value="6">07</option>
<option value="7">08</option>
<option value="8">09</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
</select> / <td> <select name="">
<option value="0">2010</option>
<option value="1">2011</option>
<option value="2">2012</option>
<option value="3">2013</option>
</select> </td></tr>
</table>
</p> Place your order <input type="submit" value="Submit" /> <input type="submit" value="Clear Form" /> <input type="submit" value="Help" onClick="goTohelp()"/>
</div>
<div id="paypal">
<hr /> <a href="https://www.paypal.com"/> <img src="../images/Paynow.jpg" alt="Pay now" border="0"/> </a href>
</p>
<br /> <input type="submit" value="Clear Form" /> <input type="submit" value="Help" />
</div>
<div id="onlinebanking">
<hr />
<b> Account Name: </b> Elmilio's Cafe
<br> <b> Bank: </b> Westpac Bank
<br> <b> BRB: </b> 28 5265
<br> <b> Account No.: </b> 8276 1736
<br> Please give us the reference number, given
<br> Place your order
<br> <input type="submit" value="Submit" /> <input type="submit" value="Clear Form" /> <input type="submit" value="Help" />
</div>
<div id = "bottom_links2"> <hr /> <a href="contact.html"> Contact Us </a>| <a href="privacy.html"> Privacy </a>| <a href="copyright.html"> Copyright </a>
<br /> <a href="mailto:williamdickeson@yahoo.com.au?subject=Coffee Query"> Contact the Web Administrator </a> </div>
</div>
</form>
</body>
</html>
Here is the javascript: PHP Code: //This will display the Credit Card div when the Credit Card radio button is selected function creditcard(){ document.getElementById("creditcard").style.display = "block"; document.getElementById("paypal").style.display = "none"; document.getElementById("onlinebanking").style.display = "none"; } //This will display the Paypal div when the Paypal radio button is selected function paypal(){ document.getElementById("paypal").style.display = "block"; document.getElementById("creditcard").style.display = "none"; document.getElementById("onlinebanking").style.display = "none"; } //This will display the Online Banking div when the Online Banking radio button is selected function onlinebanking(){ document.getElementById("onlinebanking").style.display = "block"; document.getElementById("creditcard").style.display = "none"; document.getElementById("paypal").style.display = "none"; } //Check if email is entered correctly function validateOrder() { var email= new String(document.payment.email.value); if (email == "" || email.indexOf("@") == -1) { alert ("Your email address is not valid"); } //Check if first name is entered var firstName= new String(document.payment.firstName.value); if (firstName == "") { alert ("You have not entered your first name"); } //Check if surname is entered var surname= new String(document.payment.surname.value); if (surname == "") { alert ("You have not entered your surname"); } //Check if address is entered var address= new String(document.payment.address.value); if (address == "") { alert ("You have not entered your address"); } //Check if suburb is entered var suburb= new String(document.payment.suburb.value); if (suburb == "") { alert ("You have not entered your suburb"); } //Check if postcode is entered var postcode= new String(document.payment.postcode.value); if (postcode.length != "4") { alert ("Your postcode must have four digits"); } //Check if contactNumber is entered var contactNumber= new String(document.payment.contactNumber.value); if (contactNumber == "") { alert ("You have not entered your contact number"); } //Check if nameonCard is entered var nameonCard= new String(document.payment.nameonCard.value); if (nameonCard == "") { alert ("You have not entered your name on your credit card"); } //Check if cardNumber is entered var cardNumber= new String(document.payment.cardNumber.value); if (cardNumber == "") { alert ("You have not entered your card number"); } function goTohelp() { var window.location = "http://javascript.internet.com/new"; } } } Similar TutorialsHello, I would like to move my button or <FORM> to different position than at the default location. How can I do that? Ok. This is my coding for my form button. The opacity changes, when hovered over, in my editor and in IE - but it doesnt work in Netscape - any suggestions or ideas???? <input type="image" src="buttons.jpg" onmouseover="this.style.Opacity=1.0[1];this.filters.alpha.opacity=100" onmouseout="this.style.Opacity=0.7[1];this.filters.alpha.opacity=70" style="filter:alpha(opacity=70);opacity:0.7.[1]" size="25" value="Find password" /> Hi everyone, Is it possible to have a form without a submit button. I know you can use links etc to submit a form but can you just have nothing, so the user just hits the enter key and the form submits ? cheers Hello, I have done a search form in HTML (with something in Javascript), and a reset button that works perfectly. The search results are published on the same page of search form, but once its searched the reset button no longer works. So, once the form is submited, reset button stops working ... someone knows how can I fix it? Thank you very much and best regards to all! i have a form that returns the user upon a number of errors (of course) - i'm able to retain the text input data (value="<?php echo $_POST['em_name'] ?>") upon return, but i don't know how to retain the radio button or checkbox data so that they don't have to recheck it if necessary. it's in html/php... can someone help? much appreciated... GN I want to make a form that when you type in it it doesnt show what you are typing, i want it to show "Albert please answer the following question" and then you type a semi colon it goes into another box (irrelevant) but when you type a ? in the second box the actual phrase that you typed in the first box (the one that was hidden by my phrase) to come up under the whole thing, and then when you hit the "new question" button it should reset itself. i figured that the way you could do this is by connecting the first box with the answer box but i cant figure out how to make this happen iwhtout using php. I think the title says it all. I want to submit the information from a form to 2 different pages: one page is an external page (so it starts with action=http://www.otherserver.com/somescript.php), and the other is internal (so it starts with action=myscript.php). And all that is done with a click of a button, so don't tell me to use 2 buttons The reason why I want to do this, because I want to put the information in my database as well. Is there a way to get around this? Or maybe another technique to get the same purpose? I have a form with radio buttons. I want it so that only one is selectable at a time and if radiobutton 1 is selected then whenever another radiobutton is selected radiobutton 1 will be deselected. Here is the code: HTML Code: <html> <head> <title> </title> <script src="script.js"> </script> </head> <body> <form> <input type="radio" id="hbEgg" value="hb"> <label for="hb"> Hard Boiled Egg </label> <br /> <input type="radio" id="mbEgg"> <label for="mb"> Medium Boiled Egg </label> <br /> <input type="radio" id="fbEgg" value="fb"> <label for="fb"> Full Boiled Egg </label> <br /> <input type="radio" id="ebEgg"> <label for="eb"> Extra Boiled Egg </label> <br /> </form> </body> </html> Thanks in advance. Hi guys, I have made a website, and it has a text box that I want people to type their email address in, and I have a regular link next to it that says "submit" (not a button or anything). Basically I want the email address that they have entered to be emailed to me when they click the submit link. My hosting is currently just free-hosting at awardspace - is this possible to do there? If not - generally how can I make it work? Thank you for any replies posted :-) In my HTML page, I have two forms. Form 1: Radio Button A, Radio Button B, Radio Button C Form 2: Radio Button D, Radio Button E, Radio Button F. Form 2 Radio Button are disabled. If I click on A, D will be the only button enabled, if I click on B, E will be the only button enabled, if I click on C, F will be the only button enabled. However, when I click on one of the Radio Buttons of Form 1, if I am using the Internet Explorer (version 6), the radio buttons in Form 2 are still disabled. It is not until I click on somewhere else that the proper button will be enabled. So, if I click on A, nothing will be enabled. After I click somewhere else, only after that D is enabled. Worse, if I click B, nothing happens and when I click C next, E will be the one enabled (but when I click on somewhere else, F will be enabled). This only happens in Internet Explorer. It works fine with Mozilla Firefox. I'd like to know if there's a solution to this if I am using the Internet Explorer. Here's a sample of my code: <form name="form1"> <input id="ButtonA" type="radio" name="radiobutton" value="valueA" onChange="document.form2.d.disabled=false;document.form2.e.disabled=true;document.form2.f.disabled=t rue;"> <input id="ButtonB" type="radio" name="radiobutton" value="valueB" onChange="document.form2.d.disabled=true;document.form2.e.disabled=false;document.form2.f.disabled=t rue;"> <input id="ButtonC" type="radio" name="radiobutton" value="valueC" onChange="document.form2.d.disabled=true;document.form2.e.disabled=true;document.form2.f.disabled=fa lse;"> </form> <form name="form2"> <input id="ButtonD" id="d" type="radio" name="radiobutton" value="valueD" disabled=true> <input id="ButtonE" id="e" type="radio" name="radiobutton" value="valueE" disabled=true> <input id="ButtonF" id="f" type="radio" name="radiobutton" value="valueF" disabled=true> </form> Please kindly help. Thank you. Best regards, ChrisX <html> <form> <p><input type="text" name="T1" size="20" /></p> <p><input type="submit" value="B1" name="B1" /></p> <p><input type="submit" value="B2" name="B2" /></p> </form> </html> Say I have the above form in a web page. When the page loads, the browser will highlight the first submit button b1, such that if the user hits enter, the form is submitted with that button. I'd like the default button to be B2, which is displayed second on the form. I'd greatly appreciate any advice on how to accomplish this. Thanks, jsfgguy I have created a button which is linked to some JavaScript to dim the screen when it is pressed. using CSS I have changed the image of the button using a graphic. The graphic is a .PNG as it uses transparency but when set the image as the button it has lost all transparency is there anyway to enable the transparency of the .PNG this is the code I am using to do it. Code: <input type="button" onClick="d()" class="button"> Hi, Yesterday, I wasted a couple hours trying to center the Paypal button inside a form inside a table. You can see it near the bottom of this page: http://www.jesussaidfollowme.org/new...t-theology.htm Do you know how to solve my puzzle? Thank you, Greg Hi all, I'm looking for ways, how I can avoid multiple form submissions, when a user repeatedly (intentionally or not) refresh the browser (F5 button) after submitting a form? The input in my form is simply an email address. Nothing else. It is used for forgot password function. I have tried unset or set the $_POST['email'] to empty, but it doesn't help. Is there a clever way to do this? Hello All! I am a newbie to HTML and am having the most troubling time getting my submit button on my form to redirect to another webpage. I have been reading (searching) through previous posts on this issue but none solved my problem. I am really hoping someone can offer some help so let me explain my issue exacly. I have a simple form on my "Contact Us" page with a few fields and a [Submit]button. After the form is filled out and the [Submit] button is pressed, I would like it to re-direct to a "Thank-You" page I created. Below is my code: <form action="gdform.asp" method="post" name="contact_us" id="contact_us" target="cont"> <input name="submit" type="image" value="submit" src="images/Submit.gif"> If I take target="cont" out, it redirects to the home page. I have been trying to figure this out for so long now and searching online with no luck. Any help with this would be GREATLY appreciated!!!! Thanks! Hi, I am struggling to find a solution to my problem, believe me i have searched google with every different combination of words to find the answer to this question but i cant find one. Basically have i done this: <form action="page.cgi" method="GET"> <input type="image" src="play.gif" name="cmd" value="START" > </form> Ok, the button with the image displays, BUT! Instead of passing the value START to "cmd" within "page.cgi" it passes the x and y coordinates of the image where i have clicked. Now this works perfectly like this: <form action="page.cgi" method="GET"> <input type="submit" name="cmd" value="START" > </form> So my question is, how do use a submit button with an image, without getting the coordinates returned. Any help would be GREAT. I am having a bit of a problem. I need to replace a submit button with an image (addtocart.gif). It sounds easy enough, but for some reason when I change the coding, my link does not pop-up in a new window, as it currently does. I need the image to open up my shopping cart preview page. Any help would be greatly appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var mywindow;
var features='width=530,height=500,left=200,top=200,scrollbars=yes';
window.onload=function() {
document.forms[0].target='mypopup';
document.forms[0][3].onclick=function() {
makePopup();
}
}
function makePopup() {
if(mywindow) {
mywindow.close();
}
mywindow=window.open('','mypopup',features);
mywindow.focus();
}
</script>
</head>
<body>
<form method="post" action="http://ww11.aitsafe.com/cf/add.cfm">
<div>
<input type="hidden" name="userid" value="D745330"/>
<input type="hidden" name="price" value="19.95"/>
<select name="product">
<option value="Red shirt w/ logo (XS)">X-Small</option>
<option value="Green shirt w/ logo (S)">Small</option>
<option value="Blue shirt w/ logo (M)">Medium</option>
<option value="Red shirt w/ logo (L)">Large</option>
<option value="Green shirt w/ logo (XL)">X-Large</option>
<option value="Blue shirt w/ logo (XXL)">XX-Large</option>
</select>
<p>
<input type="submit" name="post" class="submit" value="submit"/>
</div>
</form>
</body>
</html>
Hi, I got a HTML form whose submit button doesnt seem to be working, Any help would be appriciated. The link to the form is http://new.johnnyshotel.com/contact.html . I tried the same form in a different plain html file and it seems to work but when I insert it back into this webpage template the submit button doesnt seem to work. Thanks in advance. Hey guys. I've been using local storage for my form and so far it's worked great. Most of the form is simply having the user type in an answer but I have 4 questions that need to be as radio buttons. The problem is I need these radio buttons to be calculative values. I'm pretty sure I've got the 'setting values' part down but how do I 'set item' and 'get item' using local storage? Thanks in advance! Here's what I'm using: HTML Code: <input type="radio" name="length" value=".106" /> Less than 1 year<br /> <input type="radio" name="length" value="0" /> 1-2 years<br /> <input type="radio" name="length" value="-.053" /> More than 2 years<br /> HTML Code: localStorage.setItem("length", this.elements["length"].value);
HTML Code: localStorage.getItem("length")
|
|||||||