add onclick function to a submit button

Question

I'm just learning javascript and php. I created a contact form and I'd like the submit button to accomplish two things when I press it:

submit the data to me (this part is working)
read my onclick function (this part is not working)

<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">

<?php
if ($_POST['submit']) {
 ////????? 
}
?>

I'm sending the data to my email, and so I get that. But the onclick function doesn't seem to work. I tried reviewing add onclick function for submit button but it didn't help.

```document.forms['formID'].reportValidity()``` returns true if all the form elements validity is true. — Sathvik, Mar 19 '21 at 17:01

manman · Answer 1 · 2017-12-06T18:22:18.103

92

I need to see your submit button html tag for better help. I am not familiar with php and how it handles the postback, but I guess depending on what you want to do, you have three options:

Getting the handling onclick button on the client-side: In this case you only need to call a javascript function.

function foo() {
   alert("Submit button clicked!");
   return true;
}

<input type="submit" value="submit" onclick="return foo();" />

If you want to handle the click on the server-side, you should first make sure that the form tag method attribute is set to post:
```
<form method="post">
```
You can use onsubmit event from form itself to bind your function to it.

<form name="frm1" method="post" onsubmit="return greeting()">
    <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

edited Dec 06 '17 at 18:22

answered Oct 17 '12 at 23:27

manman

4,743
3
30
42

3

onsubmit of the form is the better handler. If you do not have a form, change to `type="button"` – mplungjan Jun 26 '13 at 16:38
@mplungjan tanx for the tip, I added that to the answer – manman Sep 18 '13 at 18:27
2

No +1 yet due to poor choice in reference material ;) – mplungjan Sep 19 '13 at 05:56
@mplungjan I didn't realize the link wasn't in anchor. Thanks for mentioning it. – manman Oct 15 '13 at 15:46

stash_man · Answer 2 · 2013-10-23T13:25:15.250

29

html:

<form method="post" name="form1" id="form1">    
    <input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>

Javascript: to submit the form using javascript

function eatFood() {
document.getElementById('form1').submit();
}

to show onclick message

function eatFood() {
alert('Form has been submitted');
}

edited Oct 23 '13 at 13:25

answered Oct 23 '13 at 13:00

stash_man

319
1
8
15

score 19 · Answer 3 · answered Oct 17 '12 at 22:51

19

if you need to do something before submitting data, you could use form's onsubmit.

<form method=post onsubmit="return doSomething()">
  <input type=text name=text1>
  <input type=submit>
</form>

answered Oct 17 '12 at 22:51

Roozbeh Zabihollahi

7,207
45
39

score 4 · Answer 4 · answered Mar 31 '15 at 21:45

I have this code:

<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {     
    document.getElementById("boton").style.display = 'none';
    document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";     
    return true;
} 
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio"  /></td>
</tr>
</table>
<div id="boton">
   <input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>

score 3 · Answer 5 · edited Mar 01 '21 at 11:02

3

Create a hidden button with id="hiddenBtn" and type="submit" that do the submit
Change current button to type="button"
set onclick of the current button call a function look like below:

function foo() {
    // do something before submit
    ...
    // trigger click event of the hidden button
    $('#hinddenBtn').trigger("click");
}

edited Mar 01 '21 at 11:02

Buh Buh

7,443
1
34
61

answered Jul 13 '17 at 08:47

nguyentaijs

160
8

Pratibha kumari bhaskar · Answer 6 · 2015-08-02T00:37:50.917

0

<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>

if you want to open a page on the click of a button in HTML without any scripting language then you can use above code.

edited Aug 02 '15 at 00:37

answered Jul 31 '15 at 21:51

Pratibha kumari bhaskar

57
4

How does `onclick` returns `myfunction()`, but force the browser to stay on the same page. The function will just say "Thank you for your feedback." My form is connected to a local php file(`formsubmit.php`): `
`
– sAguinaga Jan 04 '16 at 16:25

add onclick function to a submit button

6 Answers6

Linked