Question

我正在尝试弄清楚当用户更改同一页面另一部分的输入字段时如何使用Javascript更新网页的一部分。但是因为我正在使用document.write，所以除非我重新加载页面，否则我不能稍后再回来更新它。我承认我对JavaScript并不过分。如果有人能就如何解决这个问题给我建议，我将不胜感激。我希望有一种方法可以在没有Ajax的情况下做到这一点，因为这只是一个非常简单的任务，我不希望它变得太复杂。

我的网站有一个5步报价计算器，可以显示和隐藏div，无需加载/重新加载页面即可完成这些步骤。在最后一步，即步骤5，我根据步骤1执行计算，并使用document.write输出。但是因为我允许用户返回步骤1并对输入文本字段进行更改，所以步骤5的计算在返回时变得不正确。

我想避免页面重新加载，因为我正在使用jQuery做一些很酷的过渡效果，你会完成这些步骤。解决这类问题的最佳方法是什么？

我很乐意自己做一些研究，但我不确定从哪里开始。感谢

Answer 1

您应该在步骤1中的字段的onchange事件上绑定计算，以便自动更新步骤5中的字段。

实施例：在屏幕1中：

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

在屏幕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>');
}

*注意：我正在使用JQuery，因为它使dom操作变得非常简单并且与浏览器兼容。请访问http://jquery.com/

了解详情

使用javascript更新网页而不重新加载页面

1 个答案: