jquery - Javascript onsubmit causing page to refresh - Stack Overflow

admin管理员组

文章数量:1321449

Really simple form

<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>

And the addDonor function

<script type="text/javascript">

function addDonor(){    
    alert("test");
    return false;
}
</script>

Eventually that function will include some jquery ajax to submit the info. But, baby, steps. Right now I can't even get the alert to show up. Also, when I hit "Enter" on my keyboard, the whole page refreshes, when I press "Add Donor" nothing happens.

I'm sure it has to be a simple problem. I think it's one of those things that I just need someone else's eyes to point out.

Really simple form

<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>

And the addDonor function

<script type="text/javascript">

function addDonor(){    
    alert("test");
    return false;
}
</script>

Eventually that function will include some jquery ajax to submit the info. But, baby, steps. Right now I can't even get the alert to show up. Also, when I hit "Enter" on my keyboard, the whole page refreshes, when I press "Add Donor" nothing happens.

I'm sure it has to be a simple problem. I think it's one of those things that I just need someone else's eyes to point out.

• javascript
• jquery
• forms

Share Improve this question Follow asked Aug 23, 2011 at 22:59 AndelasAndelas 2,05277 gold badges3737 silver badges4545 bronze badges 2

• Your button doesn't have an onclick function. Another alternative would be to replace the entire <button> tag with <input type="submit" value="Add Donor" .../> – fireshadow52 Commented Aug 23, 2011 at 23:03
• You explicitly set up the button to be not a submit button: type="button". Remove that and the button will work. See @Dennis' answer regarding the handler. – Felix Kling Commented Aug 23, 2011 at 23:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try assigning the onsubmit event in javascript:

document.getElementById("addDonor").onsubmit = function () {
    alert("test");
    return false;
}

The problem is that your function is named addDonor and your element is addDonor. Every element with an id has an object created under document to identify it. Try alert(addDonor) in the inline onsubmit to see that it alerts an HTML element, not a function. Inline functions execute in a scope chain inside document, so addDonor points to document.addDonor before it reaches window.addDonor (your function).

you should change your <button> to an <input type="submit"> (as @fireshadow52 suggested) that should fix your problem. you should try the Wc3 Schools online javascript tester to try out simple javascripts before you put it in a page, or any other one that you prefer. google has something along these lines. also, you can normally try the javascript console on your respective browser.

Your button is explicitly set to type="button", which won't make it submit the form. Change it to <button type="submit">, or to <input type="submit"> if you prefer (I like the styling options of <button> myself).

本文标签： jqueryJavascript onsubmit causing page to refreshStack Overflow