jquery - How to updatechange HTML content with JavaScript and prevent the page from refreshing? - Stack Overflow

admin管理员组

文章数量:1289845

I'm a newbie to scripting. I want to update HTML content with JavaScript, but as you can see the web page keeps refreshing.

How can I prevent the page from refreshing?

Javascript:

function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
}

HTML

<form>
<input type="text" name="willbeshown" value="">
<button onclick="showResult(this.form)">Ganti1</button>
</form>
<p id="showresulthere">Result will be shown here</p>
</body>

I'm a newbie to scripting. I want to update HTML content with JavaScript, but as you can see the web page keeps refreshing.

How can I prevent the page from refreshing?

Javascript:

function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
}

HTML

<form>
<input type="text" name="willbeshown" value="">
<button onclick="showResult(this.form)">Ganti1</button>
</form>
<p id="showresulthere">Result will be shown here</p>
</body>

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited Jun 9, 2012 at 15:05 zdebruine 3,80766 gold badges3333 silver badges5252 bronze badges asked Jun 9, 2012 at 14:13 vincvinc 9522 gold badges33 silver badges1010 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Don’t use a form at all. You are not submitting any form data to a server. To process data in the browser, you don’t need a form. Using a form just plicates things (though such issues could be fixed by using type=button in the button element, to prevent it from acting as a submit button).

<input type="text" id="willbeshown" value="">
<button onclick=
  "showResult(document.getElementById('willbeshown'))">Ganti1</button>
<p id="showresulthere">Result will be shown here</p>
<script>
function showResult(elem) {
  document.getElementById("showresulthere").innerHTML = Number(elem.value) + 2;
}
</script>

I have used conversion to numeric, Number(), as I suppose you want to add 2 to the field value numerically, e.g. 42 + 2 making 44 and not as a string, 42 + 2 making 422 (which is what happens by default if you just use an input element’s value and add something to it.

Your button should be

<button onclick="showResult(this.form); return false;">Ganti1</button>

Javascript

function showResult(form) {
  var coba=form.willbeshown.value;
  var coba2=coba+2;
  document.getElementById("showresulthere").innerHTML=coba2;
  return false; // prevent form submission with page load
}

DEMO

The others will explain how you should use jQuery, but this would explain why it didn't work in your original code.

The <button> tag submits the form, so you have to add this inside your form tag to prevent form submission:

<form onsubmit="return false">

Btw, even without giving your form an explicit action, it uses the current page to submit; it's easy to think that it will not do anything without an action.

If you define a <button /> without defining its type it will work like a submit button. Just add type="button" to your button markup and the form won't be submitted.

<button type="button" onclick="showResult(this.form)">Ganti1</button>

With this change you won't need any return false or .preventDefault() "workarounds"

本文标签： jqueryHow to updatechange HTML content with JavaScript and prevent the page from refreshingStack Overflow