Update web page using JavaScript without reloading the page

Question

I'm trying to figure out how to update part of a web page using JavaScript when a user changes an input field on another part of the same page. However because I'm using document.write, I can't go back later and update this unless I reload the page. I admit I am not overly competent with JavaScript. If anyone can give me advice on how to approach this problem it would be most appreciated. I'm hoping that there's a way to do this without Ajax, as it's just a very simple task and I don't want it to get too complicated.

My site has a 5 step quote calculator that shows and hides divs to go through the steps without loading/reloading the page. On the last step, step 5, I perform a calculation based on step 1 and output it using document.write. But because I allow the user to go back to Step 1 and make changes to the input text field, the calculation on step 5 becomes incorrect when they return.

I would like to avoid page reloads since I'm using jQuery to do some cool transition effects you go through the steps. What's the best way to approach a problem like this?

I would happily do some research on my own but I'm not exactly sure where to start.

Q: Why are you using document.write()??? STRONG SUGGESTION: Familiarize yourself with a framework (like jQuery, for example). Worry about the framework, rather than Javascript per se. Look at a couple of tutorials ... then revisit this question. Do it with a jQuery handler; modify the DOM directly (document.write not invited ;)) — paulsm4
– paulsm4, Commented Jul 30, 2012 at 7:16
@paulsm4, thanks for the tip I have spent the last few months learning jQuery and it has changed my life! It's made so many things easier. — scotts7777
– scotts7777, Commented Oct 20, 2012 at 19:56

Samson · Accepted Answer · 2012-10-16 11:09:33Z

1

Well you should bind the calculations on the onchange event of the fields in step 1 so the fields in step 5 are automatically updated.

Example: In screen 1:

<input type="text" name="inputFromScreen1" id="input1" onchange="calculateResult()">

In screen 5:

<div id="results"></div>

JS:

function calculateResult()
{
   //parse the values into float or int otherwise you'll get a concatenated string
   var result=parseInt($("#input1").val())+.....;

   //check if your result is a number
   if (!isNaN(result))
       $("#results").html('<p>'+result+'</p>');
}

*Note: I am using JQuery because it makes dom manipulation very easy and is cross browser compatible. Learn more at http://jquery.com/

edited Oct 16, 2012 at 11:09

answered Jul 30, 2012 at 7:17

Samson

2,8317 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

scotts7777 Over a year ago

Thanks, that is exactly what I was looking for!! I've learned just enough jQuery for what you posted to make sense as well. Most appreciated!

scotts7777 Over a year ago

I should add that because the values I was adding together came from a text field, I had to wrap them in the Number() function which I guess casts them as ints/numeric. Example : var total=Number($("#indoorcameras").val()) + Number($("#outdoorcameras").val()); Thanks again for your help!

Samson Over a year ago

Sure.. you should check the input with parseInt() function or parseFloat()

Collectives™ on Stack Overflow

Update web page using JavaScript without reloading the page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related