Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Form Button value is not posted in Safari and Chrome

I am using jQuery to submit a form when a button is clicked. I would then like to test the value of the button, however, this doesn't get submitted in Safari and Chrome. Why? Is there a work around?

Test the following code in IE/FF to see that it works, and then test it in Safari/Chrome to see that it does not:

ButtonPostTest.php:

<?php
    if(isset($_POST['testBtn'])) {
        echo $_POST['testBtn'];
    }
?>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#btn').click(function() {
                    $('form').submit();  // submit the form
                });
            });
        </script>
    </head>
    <body>
        <form action="" method="post">          
            <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
        </form>
    </body>
</html>

UPDATE:

The same thing happens with input:

<input id="btn" class="page-btn" type="submit" name="testBtn" value="Post this"></input>

Also, this is only an issue when submitting using jQuery .submit()- without this, it submits fine with either the button or input.

like image 300
Mike Mike Avatar asked Jul 08 '12 05:07

Mike Mike


3 Answers

Give it a name.

<button type='submit' id='trash' name='trash' value="trash" class='red'>
like image 155
Robert Avatar answered Nov 05 '22 05:11

Robert


I think you've discovered a webkit bug.

I get the same thing testing in Chrome, your form:

<form action="" method="post">          
   <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

This sends no data. If' however I add another element, an input in particular:

<form action="" method="post">          
   <input type="hidden" name="shim" value="" />
   <button id="testBtn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

This sends both values. This is without the JavaScript. Once you add the shim hidden form element, it looks like it gets sense.

This solution needs more testing, but it may address your need.

like image 30
artlung Avatar answered Nov 05 '22 03:11

artlung


As Robert says above when using the <button> tag you need both name="" and value="", e.g.

<button name="Search" value="Simple" type="submit">Search</button>

VS

<button name="Search" value="Advanced" type="submit">Search</button>

In this example your POST data would have the Key Value pair of:

Search Simple

or

Search Advanced

And then based on that POST value you can write your code to take the appropriate action. :)

i.e. you don't need to use input, just use button with name/value and you'll be fine.

like image 25
Tod Thomson Avatar answered Nov 05 '22 05:11

Tod Thomson