jquery - 如何处理同一页面上的多个表单

标签 jquery ajax forms

我有以下 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 的值;当我点击拍卖 #2 时,它会更新拍卖 #3;当我单击 Auction #3 时,没有任何更新,并且 e.preventDefault();不起作用(页面已重新加载)。

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

我知道还有其他关于这个问题的帖子,但不知何故我无法设法使他们的解决方案适应我的问题。

提前致谢。

最佳答案

查看所提供 URL 的来源,您可以为每个表单提供一个 jQuery 单击处理程序:

jQuery('input[type=submit]')

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

解决方案是在 $( 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€');
            }
    });
});

关于jquery - 如何处理同一页面上的多个表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21932179/

相关文章:

javascript - 如何切换单选按钮

javascript - 带有描述性文本的文本输入

javascript - 创建 jQuery 插件对象后与其进行交互

javascript - 修改 jquery-modal 事件内的变量值

javascript - 从同一网站的外部页面加载 div 中的内容

javascript - 无限滚动显示范围之间的内容

Java HtmlUnit Ajax 调用永远不会在 HtmlPage 中呈现

ios - 直接从 iOS 设备输入 HTML5 表单音频

java - 具有复杂对象的@Repeat Form Helper - Play Framework

javascript - 如何使表单操作更改哈希而不重新加载页面?