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

• 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

3 Answers 3

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).