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.
Give it a name.
<button type='submit' id='trash' name='trash' value="trash" class='red'>
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With