如何在同一页面上处理多个表单

David Matos 发表于 Dev

大卫·马托斯（David Matos）

我有以下HTML：

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

而且我在PHP循环中具有以下jQuery，用于处理Submit事件：

<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个测试拍卖。当我单击拍卖＃1时，它将更新拍卖＃2的值；当我单击拍卖＃2时，它会更新拍卖＃3；当我单击拍卖＃3时，没有任何更新，并且e.preventDefault（）; 不起作用（页面已重新加载）。

您可以在此位置浏览网站。提交按钮的文字为“ LICITAR”。

我知道还有其他有关此问题的文章，但是以某种方式我无法设法使他们的解决方案适应我的问题。

提前致谢。

Telmo Marques

查看所提供URL的来源，您对每种表单都有一个jQuery click处理程序：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。