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

Posted

技术标签:

【中文标题】PHP 使用 jQuery .post() 提交带有多个提交按钮的表单【英文标题】:PHP submitting a form with multiple submit buttons using jQuery .post() 【发布时间】:2013-02-23 13:09:26 【问题描述】:

我有以下 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(),则输出不会附加到 textarea,而是以文本格式附加到单独的页面上,例如文档。我也尝试在按钮$('button[type=submit]').bind('submit', submitForm); 上调用提交函数,但这也不能解决我的问题。

提前感谢您的帮助。

【问题讨论】:

.post() 是一个 ajax 调用。您定义提交的值。如果您希望提交按钮值,请将它们一起发送。 不知道是怎么做的,建议? 我给出了答案...未测试,但应该很接近。 【参考方案1】:

您忘记了the_name 输入中的符号引号和)

<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>***</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>

【讨论】:

对不起,这只是论坛上的输入错误,不在代码中。 好的,我已将其附加到序列化调用中,如何在 PHP 中提取所述按钮的值? @thinkus ohhh..现在看到更新的答案我已经添加了如何发送该按钮值... prolly 不应该为此设置“提交”按钮类型。 “按钮”会更合适。 好的,将进行更改。【参考方案2】:

最简单的答案是:

<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'
);

【讨论】:

【参考方案3】:

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

<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

【讨论】:

没有理由为此使用.post() @Jeremy,它是可选的,也可以使用。请检查答案。谢谢!。

以上是关于PHP 使用 jQuery .post() 提交带有多个提交按钮的表单的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery AJAX 向所需的 PHP POST 请求处理程序提交表单不起作用

使用jquery form插件进行异步带文件的表单提交

jquery 发送带附件的邮件

php 用于在PHP中提交AJAX表单的Jquery Ajax Post示例

PHP如何处理jquery post过来的$serialize数据

用jquery-form.js提交带文件的数据