禁用提交按钮时，PHP 重定向不起作用

Question

In my index.php page I have a submit button which takes form data and sends it through POST to an update.php page. On this new page, the database is manipulated then redirects (with PHP) back to the original page. This redirection process works fine in Firefox, but does not seem to work in Chrome/IE.

Relevant code in index.php file:

<form name="battle" action="update.php" method="post">
<input type="radio" name="update" value="<?php print($names[0] . "+" . $names[1]); ?>" />
<input type="radio" name="update" value="<?php print($names[1] . "+" . $names[0]); ?>" />
<input type="submit" name="submit" value="Submit" />
</form>

This is the code at the end of my update.php file:

$con->close();
session_write_close();
header("Status: 200");
header( "Location: index.php" );
exit(0);

This code will work in all browsers if the submit button is NOT disabled onClick, but I really need to have this feature. Does anyone know how to make this redirect work while still having the disable button fetaure?

Answer 1

I'm guessing you're disabling the submit button with javascript to prevent multiple submits. If you're doing it by setting the disabled property of the submit button then this isn't the best way of doing it as it can have side-effects.

If you want to prevent multiple submits with javascript, a better way of doing it is to attach an event handler to the form submit event that only returns true the first time you trigger the submit event.

function submitHandler ()
{
    if (typeof submitHandler.triggered == 'undefined')
    {
        submitHandler.triggered = true;
        return true;
    }
    else
    {
        return false;
    }
}

Attach the above to your form's submit event. This should prevent multiple submits and also avoid the problems that disabling the submit button can cause.

Answer 2

Disabling submit buttons on form submits can be a tricky business. This worked for me:

NB: Requires >= jQuery1.6 to work

test.php:

<script type="text/javascript">
$(document).ready(function ()
{
    $("form").submit(function ()
    {
        $("input[type='submit']").prop("disabled", true);
    })
})
</script>

<form name="battle" action="update.php" method="post">
    <input type="radio" name="update" value="foo" />
    <input type="radio" name="update" value="bar" />
    <input type="submit" name="submit" value="Submit" />
</form>

update.php:

header("Status: 200");
header( "Location: index.php" );
exit(0);

?>

Answer 3

I recently had the same problem and here is what i did to fix, in all browsers

$(document).ready(function () {
     $("input[type='submit']").click(function () {
         $(this).attr('disabled','true');
         // validate data
         ...

         // when data is valid send form else enable form
         $('form[name="battle"]').submit();
      })

 });

now your form data will be sent in any browser. try and let me know how it goes:)