Trouble getting a javascript function to work

Question

Can someone help me understand why the following code wont work? the webpage loads all the elements properly but the "displayOrder()" function wont execute properly. My webpage asks the user for their first name and last name, then there are 5 radio buttons asking for a pizza type, then the user presses a display order button, which on click runs the function. The function is suppose to display an "Invoice" in the readonly text area above the button. Im not sure why it wont run!

here is the html

REVISED HTML CODE

<!DOCTYPE html>
<html lang="en-US">
//Program Name: PizzaOrderForm.html
//Purpose: Creates a form and calls functions to order pizza 
//Author: Alexander Bitar 50070103
//Date Last Modified: 02-25-2016


<head>
<script type="text/javascript">
var NL = "\n"; //newline js
//DISPLAY ORDER FUNCTION
function displayOrder() {
 var firstName = document.orderForm.firstName.value;
 var lastName = document.orderForm.lastName.value;
 var pizzaType = document.orderForm.pType.value;
 document.orderForm.fullOrder.value = "HERE IS YOUR ORDER:" + NL + NL 
 +"Pizza Ordered: " + pizzaType + NL 
 +"First Name: " + firstName + " Last Name: " + lastName + NL 
 +"You're pizza will be ready in 30 minutes!" + NL 
 +"Thank you for placing your order with Papa Hut's Pizza!";
}   
</script>
</head>
<body bgcolor="azure">
<h1 Align="center"> Papa Hut's Pizza </h1>
<hr>
<br>
<br>
<p> Welcome to Papa Hut's Ordering system. Please Fill out the form to proceed with an order. </p>
<hr>
<br>
<br>
<form name="orderForm">
First Name:<br>
  <input type="text" name="firstName"> <br>
Last name:<br>
  <input type="text" name="lastName"><br>
  Choose  A Pizza<br>
<input type="radio" name="pType" value="Pepperoni"> Pepperoni <br>
<input type="radio" name="pType" value="Cheese"> Cheese<br>
<input type="radio" name="pType" value="Black Olive"> Black Olive <br>
<input type="radio" name="pType" value="Chicken Finger"> Chicken Finger <br>
<input type="radio" name="pType" value="TODAY'S SPECIAL"> TODAY'S SPECIAL<br>
<textarea name="fullOrder" value="" rows="5" cols="50"> Your order will appear here after it is sent!</textarea> <br>
<button type="displayButton" onclick="displayOrder()"> Place Order!</button>
</form>

</html>

btw. it should be `document.orderForm.fullOrder.value` instead of `document.OrderForm.fullOrder.value` — InTry, Feb 25 '16 at 19:15
There are a few issues you have here. When you click the button you have to prevent the page from submitting. I'd encourage you to move from using onclick inline and attach an event listener to the button. The setType function doesn't do anything. The pType variable is only available inside the setType function. He is a barebone example of a pretty common pattern to get/set form values. https://jsbin.com/jedefi/edit?js,console,output — Ron Sims II, Feb 25 '16 at 19:38

score 2 · Answer 1 · answered Feb 25 '16 at 19:18

2

There are a few problems here...

First, javascript is case sensitive so when you have an input named 'firstName'

<input type="text" name="firstName">

then when you try to reference the variable here as 'Firstname' javascript will not understand:

var firstName = document.orderForm.Firstname.value;

Second, you do not need to manually set a variable for the radio button. The value is already held in document.orderForm.pType.value, just like the rest of your fields! So this method is unnecessary:

function setType(pType){

 var pizzaType = pType;
}

answered Feb 25 '16 at 19:18

tdurtsch

141
1
4

Thanks, i removed the setType function, and cleared them from the radio buttons as well. But its still not working, the page refreshes when i click the "place order" Button, and nothing shows up in the textarea box. i'll add my revised code to the question – Alex Bitar Feb 26 '16 at 02:51
the function displayOrder() i think has worked, but the button refreshes the page and puts the other text back. – Alex Bitar Feb 26 '16 at 03:11
try this: http://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked – tdurtsch Feb 26 '16 at 15:56

Trouble getting a javascript function to work

1 Answers1