文章/答案/技术大牛

发布

社区首页 >问答首页 >PHP使用jQuery .post()提交带有多个提交按钮的表单

问PHP使用jQuery .post()提交带有多个提交按钮的表单
EN

Stack Overflow用户

提问于 2013-03-08 11:49:56

回答 3查看 5.2K关注 0票数 1

我有以下HTML代码：

<form method="post" action="the_file.php" id="the-form">
    <input type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input]; ?>">
    <button type="submit" name="eat_something" value="TRUE">Eating</button>
    <button type="submit" name="eat_something" value="FALSE">Don't Eat</button>
</form>
<textarea id="result"></textarea>

然后是这个JS：

$('#the-form').bind('submit', submitForm);
function submitForm(evt) {
    jQuery.post(
        $(this).attr('action'),
        $(this).serialize(),
        function(data) {
            $('#result').empty().append(data).slideDown();
        });
    evt.preventDefault();
}

我还有一个PHP脚本，它在提交时接收来自输入的$_POST值，并运行一个条件来测试哪个提交按钮被单击。

如下所示：

$input = $_POST['the_input'];
$eating = $_POST['eat_something'];
if ( $eating == 'TRUE' ) {
    // Do some eating...
} else {
    // Don't you dare...
}

如果我不使用jQuery.post()函数，按钮的提交值就会被提交。但是，由于某些原因，我无法使用jQuery.post()函数将按钮值传递给PHP $_POST。如果不使用jQuery.post()，则输出不会被附加到文本区域，而是以文本格式附加到单独的页面上，如文档。我还尝试调用按钮$('button[type=submit]').bind('submit', submitForm);上的submit函数，但这也不能解决我的问题。

提前感谢您的帮助。

php

jquery

post

submit-button

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-03-08 12:02:13

在the_name输入中忘记了signle quote和)。

<input type="text" name="the_input" value="<?php if (isset($_POST['the_input'])) { echo $_POST['the_input'] ; } ?>">

为了获得表单按钮按下的值，您需要手动将其值附加到序列化。

$form.serialize() + "&submit="+ $('button').attr("value")

示例

<script type="text/javascript">
    $(function()
    {
        $('button[type="submit"]').on('click',function(e)
        {
            e.preventDefault();
            var submit_value = $(this).val();
            jQuery.post
            (
                $(this).attr('action'),
                $(this).serialize()+ "&submit="+ submit_value,
                function(data)
                {
                    $('#result').empty().append(data).slideDown();
                }
            );
        });
    });
</script>

完整测试代码

<?php
    if(isset($_POST['the_input']))
    {
        $input = $_POST['the_input'];
        $eating = $_POST['eat_something'];
        exit;
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>StackOverFlow</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $('button[type="submit"]').on('click',function(e)
            {
                e.preventDefault();
                var submit_value = $(this).val();
                jQuery.post
                (
                    $('#the-form').attr('action'),
                    $('#the-form').serialize()+ "&eat_something="+ submit_value,
                    function(data)
                    {
                        $('#result').empty().append(data).slideDown();
                    }
                );
            });
        });
    </script>
</head>
<body>
    <form method="post" action="random.php" id="the-form">
        <input type="text" name="the_input" value="<?php if (isset($_POST['the_input'])) { echo $_POST['the_input'] ; } ?>">
        <button type="submit" name="eat_something" value="TRUE">Eating</button>
        <button type="submit" name="eat_something" value="FALSE">Don't Eat</button>
    </form>
    <textarea id="result"></textarea>
</body>
</html>

票数 2

Stack Overflow用户

发布于 2013-03-08 12:14:38

最简单的答案是：

<form method="post" action="the_file.php" id="the-form">
    <input type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input']; ?>">
    <input type="submit" name="eat_something" value="Eating" />
    <input type="submit" name="eat_something" value="Don't Eat" />
</form>

当然，这并不能完全满足您的需求。

你也可以这样做：

<form method="post" action="the_file.php" id="the-form">
    <input id="theInput" type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input']; ?>">
    <button type="button" name="eat_something" data-value="TRUE">Eating</button>
    <button type="button" name="eat_something" data-value="FALSE">Don't Eat</button>
</form>

$('#the-form button').bind('click', function(){
    jQuery.post($('#the-form').attr('action'),
    {
        the_input: $('#theInput').val(),
        eat_something: $(this).attr('data-value')
    },
    function(data) { $('#result').empty().append(data).slideDown() },
    'json'
});

票数 0

Stack Overflow用户

发布于 2013-03-08 12:01:01

将按钮更改为此(更改表单名称)..

<input type="hidden" name="eat_something" value="" />
<input type="button" onclick="$('input[name=eat_something]').val('TRUE')" />
<input type="button" onclick="$('input[name=eat_something]').val('FALSE')" />

Javascript函数和PHP都很好。

谢谢!

@leo

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15286384

复制

相似问题

问PHP使用jQuery .post()提交带有多个提交按钮的表单
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PHP使用jQuery .post()提交带有多个提交按钮的表单EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PHP使用jQuery .post()提交带有多个提交按钮的表单
EN