CODEWITHSUNDEEP
phpjavascripthtml
siXor
siXor

Reputation: 9

Javascript submit-function with button won't work

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?

Upvotes: 0

Views: 1709

Answers (5)

siXor
siXor

Reputation: 9

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.

Upvotes: 0

Alex Siri
Alex Siri

Reputation: 2864

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>

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

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>

Upvotes: 0

kappa
kappa

Reputation: 1569

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

Upvotes: 0

Brad
Brad

Reputation: 163334

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.

Upvotes: 1

Related Questions