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
– Sathvik, Commented Mar 19, 2021 at 17:01

manman · Accepted Answer · 2017-12-06 18:22:18Z

95

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 6, 2017 at 18:22

answered Oct 17, 2012 at 23:27

manman

5,1934 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mplungjan Over a year ago

onsubmit of the form is the better handler. If you do not have a form, change to type="button"

manman Over a year ago

@mplungjan tanx for the tip, I added that to the answer

mplungjan Over a year ago

No +1 yet due to poor choice in reference material ;)

manman Over a year ago

@mplungjan I didn't realize the link wasn't in anchor. Thanks for mentioning it.

stash_man · Accepted Answer · 2013-10-23 13:25:15Z

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, 2013 at 13:25

answered Oct 23, 2013 at 13:00

stash_man

3191 gold badge8 silver badges15 bronze badges

Comments

Roozbeh Zabihollahi · Accepted Answer · 2012-10-17 22:51:06Z

20

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, 2012 at 22:51

Roozbeh Zabihollahi

7,35748 silver badges39 bronze badges

Comments

angheliz · Accepted Answer · 2015-03-31 21:45:55Z

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>

Buh Buh · Accepted Answer · 2021-03-01 11:02:45Z

2

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 1, 2021 at 11:02

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

answered Jul 13, 2017 at 8:47

nguyentaijs

1508 bronze badges

Comments

Pratibha kumari bhaskar · Accepted Answer · 2015-08-02 00:37:50Z

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 2, 2015 at 0:37

answered Jul 31, 2015 at 21:51

Pratibha kumari bhaskar

574 bronze badges

1 Comment

sAguinaga Over a year ago

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

<form action="formsubmit.php" id="contact-form" target="_blank" method="post"           enctype="application/x-www-form-urlencoded">

Collectives™ on Stack Overflow

add onclick function to a submit button

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related