Head Rush Ajax

you’re on your way 4

287

post requests

form

div

p

Order conrmation

p

div

p

Order conrmation

p

At the end of this

process, here’s what the

DOM tree should look like.

The <p> with the order

conrmation is now all

that the customer sees.

We need to replace the <form>

element from the DOM tree...

...and add the <p>

in the place of the

<form> element.

<div>

<p>

<div>

<form>

Here’s the <form>

we want to replace

with an order

conrmation.

Let’s take a closer look at exactly what happens

when you replace an element in the DOM:

The DOM is connected to what a customer sees

Here’s the part of the DOM

tree that we’re working on.

Here’s what’s going on in the browser

as we change the DOM tree.

This won’t show up in the web

browser until you’ve added it

in to the DOM tree.

Now the <form> is nowhere

to be seen. Perfect!

When the <p> replaced the

<form> in the DOM tree,

the browser updated the

web page to match.

Here’s the DOM tree after you’ve replaced the

<form> element with the new <p> element...

All of this happens without page

reloads... and no waiting around!

288

Chapter 5

Send OrderHTML Form PHP Script Callback

It’s time to take everything you’ve been learning in these last few chapters, and put it

all to work. Below is the showConrmation() callback function for the new and

improved Break Neck pizza order form. Your ...