How can I make my form run a function when submit is clicked?

<form id="mentForm" name="ment">
    <fieldset>
        <label for="name">Name <span>(required)</span></label>
        <input type="text" class="text" id="name" value="" />
        <label for="email">Email <span>(will not be published) (required)</span></label>
        <input type="text" class="text" id="email" value="" />
        <label for="website">Website</label>
        <input type="text" class="text" id="website" value="" />
        <label for="message">Message <span>(required)</span></label>
        <textarea id="message" class="textarea" rows="10"></textarea>
        <input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_ment();">
    </fieldset>
    ...

I am trying running the following function:

function ajax_add_ment () {
    alert ("testing");
}

How can I make my form run a function when submit is clicked?

<form id="mentForm" name="ment">
    <fieldset>
        <label for="name">Name <span>(required)</span></label>
        <input type="text" class="text" id="name" value="" />
        <label for="email">Email <span>(will not be published) (required)</span></label>
        <input type="text" class="text" id="email" value="" />
        <label for="website">Website</label>
        <input type="text" class="text" id="website" value="" />
        <label for="message">Message <span>(required)</span></label>
        <textarea id="message" class="textarea" rows="10"></textarea>
        <input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_ment();">
    </fieldset>
    ...

I am trying running the following function:

function ajax_add_ment () {
    alert ("testing");
}

• javascript
• html
• forms

• 1 Possible duplicate of Form Submit Execute Javascript Best Practice? – Nobody Commented May 13, 2017 at 23:15

3 Answers 3

Use onclick attribute instead of action.

You could use jQuery, and use the .submit() function. You can give the form an id and then attach the submit function to it.

Example:

<form id="execute"....

</form>

<script type="javascript">
$("#execute").submit(function(){
 alert("i've submitted this form");
});
</script>

make sure you have included the jquery js file.

<script src="http://code.jquery./jquery.min.js" type="text/javascript"></script>

You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:

<script>
function ajax_add_ment () {
  alert ("testing");
}
</script>

<form id="mentForm" name="ment">
                            <fieldset>
                                <label for="name">Name <span>(required)</span></label>
                                <input type="text" class="text" id="name" value="" />
                                <label for="email">Email <span>(will not be published) (required)</span></label>
                                <input type="text" class="text" id="email" value="" />
                                <label for="website">Website</label>
                                <input type="text" class="text" id="website" value="" />                                                                
                                <label for="message">Message <span>(required)</span></label>
                                <textarea id="message" class="textarea" rows="10"></textarea>
                                <input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_ment();">
                            </fieldset>

Thank you!