如何处理同一页面上的多个表单答案

【问题标题】：How to handle multiple forms on same page如何处理同一页面上的多个表单
【发布时间】：2014-02-21 10:44:21
【问题描述】：

我有以下 HTML：

<form method='post' name='form".$post->ID."' >
   <input type='submit' name='bid".$post->ID."' value='Licitar' class='bidvalue'>
</form>

我在 PHP 循环中使用以下 jQuery 来处理提交事件：

<script>
jQuery('input[type=submit]').click(function(e) {
    e.preventDefault();
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: 'action=newbid&id=".$post->ID."',
        success: function(msg){
            jQuery('#vehicle-value-box".$post->ID."').html(msg+',00€');
        }
});
</script>

当用户单击提交按钮时，我想更新当前出价的值并使用 AJAX 更新带有该值的框。我在functions.php中使用：

function newbid_ajax() {
    $post_id = $_POST['id'];
    $mybid = get_post_meta($post_id, 'start_price', true);
    $mybid = $mybid + 100;
    update_post_meta($post_id,'start_price',$mybid);
    die($mybid);
}

但是，我无法单独处理表单提交事件。我有 3 次测试拍卖。当我点击 Auction #1 时，它会更新 Auction #2 的值；当我点击 Auction #2 时，它会更新 Auction #3；当我单击 Auction #3 时，没有更新任何内容，并且 e.preventDefault();不起作用（页面已重新加载）。

您可以查看location 的网站。提交按钮的文本为“LICITAR”。

我知道还有其他关于这个问题的帖子，但不知何故，我无法根据我的问题调整他们的解决方案。

提前致谢。

【问题讨论】：

查看在使用 ajax 提交时将输入类型更改为按钮而不是提交是否有帮助。此外，如果您的表单上有多个提交按钮，这将不起作用，因为每次它都会在提交时触发相同的 ajax 调用。同时为您的按钮提供单独的 id 并替换您的 jquery 选择器
是 jQuery 在某个 PHP 循环中吗？如果是，您可能在所有提交按钮上都有 3 个 onclick 事件，每个 onclick 具有不同的 $post->ID。如果是这种情况，请参阅生成的 HTML 页面的源代码。然后你必须使用 jQuery('form[name=".$post->ID."] input[type=submit]')
@HarshadaChavan 将其更改为按钮没有帮助。
@RomanHocke 是的，它在 PHP 循环中。将 form[name=".$post->ID."] 添加到该脚本将不起作用，页面重新加载并且没有更新任何值。
对不起，我的意思是 form[name=form".$post->ID."] input[type=submit]

标签： jquery ajax forms

【解决方案1】：

查看提供的 URL 的来源，您可以为每个表单提供一个 jQuery 点击处理程序：

jQuery('input[type=submit]')

这种方法可能会导致每个表单提交按钮有多个绑定，具体取决于代码的结构。

解决方案是在$( document ).ready(...) 中仅声明一个单击处理程序。下面的按钮和功能已修改为适用于此场景（未测试）：

<input type='submit' name='".$post->ID."' value='Licitar' class='bidvalue'>

下面的函数只声明一次，在任何循环之外，通常在文档的<head></head> 部分。

$(document).ready(function()
{
    jQuery('.bidvalue').click(function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: 'action=newbid&id='+e.target.name,
            success: function(msg){
                jQuery('#vehicle-value-box'+e.target.name).html(msg+',00€');
            }
    });
});

【讨论】：

这是一个改进。但我还有两个问题。一，我的网站上还有其他不同的提交，即登录提交。我如何编辑该脚本以仅与拍卖提交一起使用？第二，不知何故，带有值的框没有正确更新，而是将新值更改为“,00€”。 msg 变量似乎为空。
您可以按类别选择按钮，而不是选择每个提交按钮：jQuery('.bidvalue')。我还更新了上面的脚本。
你也可以通过console.debug()或者alerting来调试msg变量值，这样你就知道问题是不是来自服务器了。
这很明显，我的错！谢谢。对值框更新有何想法？
这不是我上面贴的newbid_ajax函数吗？

【解决方案2】：

如果我理解你的正确，你有多种形式，并且需要有自己的 ajax 函数？

比你必须给提交一个id：

<form method='post' name='form".$post->ID."' >
   <input type='submit' name='bid".$post->ID."' id="submit-1" value='Licitar' class='bidvalue'>
</form>

新的js：

<script>
$('form').submit(function( e ) {
    e.preventDefault();
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: 'action=newbid&id=".$post->ID."',
        success: function(msg){
            jQuery('#vehicle-value-box".$post->ID."').html(msg+',00€');
        }
});
</script>

编辑试试

【讨论】：

我尝试添加到输入标签 id='submit".$post->ID."' 然后将脚本更改为 jQuery('#submit".$post->ID. “'）。点击（...）。我对 Roman Hocke 的建议有同样的问题，这样做页面会重新加载并且没有更新任何值。
该编辑使其回到最初的问题：值已更新但不在正确的拍卖中。我可能会将所有这些都添加到一个循环中。