Javascript submit-function with button won't work

Question

I'm trying to use the submit-function in javascript to submit a form. The reason I'm not using a submit button is that I want to ask the user if really wants to submit the form. Here is the code:

<?php    
if(isset($_POST['submit1']))
die("Submit successfull!");
?>

<!--Javascript submit question.-->
<script type="text/javascript">
function question_submit() {
    if(confirm('Are you sure you want to submit?')) {
        return true;
    }

    else {
        alert('You have not submitted this form');
        return false;
    }
}
</script>

<!--The form-->
<form action='test.php' method='POST'>
<input type='button' name='submit1' value='Submit' onClick="if(question_submit()) { this.form.submit(); }" />
</form>

Result: The popups works great, it just never wants to submit the form and so "Submit successfull!" never shows up.

The message is not even shown when I add a real submit button to the page. It's like the POST-data won't work. But when I add a PHP-code and die-function för the submit-button the thing will work and "REal Submit Works" will show up, which is strange because the buttons code is first.

<?php
if(isset($submit1))
die("Submit successfull!");
if(isset($_POST['realsubmitbutton']))
die("REal Submit Works");
?>

I I've also tried to change the onClick to just contain the javascript submit function. Like this: onClick="this.form.submit();". But that won't work either. So my question is, what's wrong with the code and why won't it work?

Can't buttons send it's value with POST?

Brad · Accepted Answer · 2012-04-15 22:54:19Z

1

The issue is that you are submitting the form via your onclick handler. That means, the button isn't pressed as part of the submit.

You can return true from that function to get the behavior you want.

Really though, this is a bad idea. Many of us prefer to simply push enter on a form field, rather than clicking submit. On your form handler, just check !empty($_POST) instead. Put your "are you sure" function in as the onsubmit action of the form.

answered Apr 15, 2012 at 22:54

Brad

164k57 gold badges380 silver badges559 bronze badges

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

2 Comments

siXor Over a year ago

Okey, I understand. I added a hidden input to the form now and it works! <input type='hidden' value='123' name='hiddensubmit' /> <?php if(!empty($_POST['hiddensubmit'])) die("Submit successfull!"); ?> Thanks.

jamesmortensen Over a year ago

Hmm, this is another good reason to not use onclick. I didn't think about losing the enter key functionality. +1 You should consider adding an example for clarity ;)

kappa · Accepted Answer · 2012-04-15 22:55:46Z

0

Use directly "onSubmit" event on form instead of button click. Then return "false" if you don't actually want to submit.

answered Apr 15, 2012 at 22:55

kappa

1,5798 silver badges19 bronze badges

Comments

jamesmortensen · Accepted Answer · 2012-04-15 23:05:57Z

0

Modify your function so that it gets a reference to the form and calls it's submit() method:

function question_submit() {
    if(confirm('Are you sure you want to submit?')) {
        document.getElementById("myForm").submit();
        return true;
    } else {
        alert('You have not submitted this form');
        return false;
    }
}

Also, update the form HTML so the form has an id, and modify your HTML button so that it calls the question_submit() function. Leave the actual business logic to the function to keep the HTML clean. Finally, make sure your attributes are all lowercase. This shouldn't affect functionality, but it is cleaner to use lowercase attribute names:

<form action='test.php' method='POST' id='myForm'>
    ...
    <input type='button' name='submit1' value='Submit' onclick="question_submit();" />

</form>

answered Apr 15, 2012 at 23:05

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

5 Comments

siXor Over a year ago

I'll add that to the code aswell. Better to have as much in the function as possible. Thanks!

jamesmortensen Over a year ago

Actually, if Brad updates his answer, I'd suggest the onsubmit. Nothing annoys me more than losing my keyboard shortcuts. I believe the only change you'd need to make is to call onsubmit="question_submit()" on your form and remove the onclick. You'd also need to change "type" to "submit".

siXor Over a year ago

That didn't work. It just skipped the javascript and jumped right on to submitting.

jamesmortensen Over a year ago

Was afraid of that. That's why I didn't post that in my answer :(. You could try calling event.preventDefault() before entering the confirm call, as I think that the function isn't ending in time for the return false to get called.

siXor Over a year ago

I now have a solution that works perfectly. Can't answer my own question thought for another 7 hours but I uploaded it for anyone who's interested. speedy.sh/7mwCP/test.php

Alex Siri · Accepted Answer · 2012-04-15 23:10:03Z

0

The returning true or false works only when the input is type submit. So, you should change

<input type='button' name='submit1' value='Submit' onClick="if(question_submit()) { this.form.submit(); }" />

for

<input type='submit' name='submit1' value='Submit' onClick="if(question_submit()) { this.form.submit(); }" />

With your function, it will only submit when the user accepts. Or maybe, you could use

<form action='test.php' method='POST' onClick="return question_submit()">
  <input type='submit' name='submit1' value='Submit' />
</form>

answered Apr 15, 2012 at 23:10

Alex Siri

2,8541 gold badge21 silver badges24 bronze badges

Comments

siXor · Accepted Answer · 2012-04-18 12:07:03Z

I've read all your answers and have finished the code. It now works with both clicking on the button or pressing Enter key. The javascript runs correctly either way and the form gets submitted. This is the code:

<?php
if(!empty($_POST['justaname']))
die("Submit successfull!");
?>

<!--Javascript submit question.-->
<script type="text/javascript">
function question_submit() {
    if(confirm('Are you sure you want to submit?')) {
        document.getElementById("myform").submit();
    }

    else {
        alert('You have not submitted this form');
    }
}
</script>

<!--The form-->
<form action='test.php' method='POST' id="myform" onSubmit="event.preventDefault(); question_submit();">
<input type="text" name='justaname' />
<input type='button' name='submit1' value='Submit' onClick="question_submit()" />
</form>

Thanks for all the answers and hope this is helpfull for someone.

Collectives™ on Stack Overflow

Javascript submit-function with button won't work

5 Answers 5

2 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related