使用jquery单击隐藏表单中的提交按钮？答案

【问题标题】：Click a submit button in the hidden form using jquery?使用jquery单击隐藏表单中的提交按钮？
【发布时间】：2012-02-07 04:40:21
【问题描述】：

我在一个页面中显示了 25 个产品。每个产品都包含一个表格。因为我必须将产品拖到右侧的迷你购物车中。为此，我需要拖动产品的表单 ID。

在 jquery 的帮助下，我得到了表单的 id。现在我想单击该表单中的提交按钮。有没有办法在 jquery 的帮助下做到这一点。

我正在使用 jquery 查找功能，但它不起作用。

这是我的 jquery 代码：

$("#ajaxCartUpdate").droppable({
                accept:'.ui-draggable',
                drop: function( ev, ui ) {
                    var td_obj = document.getElementsByClassName('view-test-attributes')[0].getElementsByTagName('table')[0].getElementsByTagName('td');                        
                    var form_id = td_obj[td_obj.length-1].getElementsByTagName('form')[0].id;
                    document.getElementById(form_id).action = '';
                    document.getElementById(form_id).find('.ajax-cart-submit-form-button').click();

                }
            });

这是我的 HTML：

<div class="add-to-cart">
  <form class="ajax-cart-submit-form" id="uc-product-add-to-cart-form-2-1" method="post" accept-charset="UTF-8" action="/js_ajax/">
<div>
    <input type="hidden" value="1" id="edit-qty-3" name="qty">
    <input type="submit" class="form-submit node-add-to-cart ajax-cart-submit-form-button ajax-cart-processed" value="Add to cart" id="edit-submit-2" name="op">
   <input type="hidden" value="form-c75deef67555676e4579cd756840cea6" id="form-c75deef67555676e4579cd756840cea6" name="form_build_id">
   <input type="hidden" value="dece0af3cebbdc2ad735891fc7639321" id="edit-uc-product-add-to-cart-form-2-form-token-1" name="form_token">
   <input type="hidden" value="uc_product_add_to_cart_form_2" id="edit-uc-product-add-to-cart-form-2-1" name="form_id">
   <input type="hidden" value="2" id="edit-product-nid-3" name="product-nid">

 </div>

我认为这不是一个大问题，但不知何故我无法解决它。非常感谢您的帮助。

【问题讨论】：

你的 html 结构是什么样的？

标签： ajax forms jquery-ui jquery

【解决方案1】：

为什么不这样？

$("#ajaxCartUpdate").droppable({
    accept:'.ui-draggable',
    drop: function( ev, ui ){
        $(ui.draggable).closest('form').attr('action','').children('input[type="submit"]').click();
    }
});

【讨论】：

首先我没有form-id。我必须找到它添加到购物车的产品，因为页面上有很多产品。如果我使用提交重定向到购物车页面的页面，这是我不想要的。我只是希望使用 jquery 单击输入按钮。
如果我提供静态 ID，您的代码可以正常工作。但是你能根据我的情况提供帮助吗？我将 formId 保存在一个变量中。如何在上面的代码中使用该变量。
啊我的坏ui.draggable不是ui。

【解决方案2】：

为你的 drop 函数试试这个（不需要表单 ID，但仍然可以获得）：

drop: function(ev, ui) {
    $('.view-test-attributes:first table:first td:last').attr('action', '').submit();
    //if you still need the form id...
    //var form_id = $('.view-test-attributes:first table:first td:last').attr('action', '').attr('id');
}

【讨论】：

不工作。给出错误 document.getElementById(form_id).find 不是 firebug 控制台中的函数。
我已将错误粘贴在上一条评论中。 $('#uc-product-add-to-cart-form-2-1').attr('action','').children('input[type="submit"]').click();此代码有效，但我需要放置一个变量名而不是静态 form_id

【解决方案3】：

而不是调用 .click() 只需将其替换为 .submit() 。

编辑：现在我明白了这个问题。尝试这样做：在

JAVASCRIPT: 
var productData = 'name='+ $("#idForName").val() + '&qty=' + $("#idForQty").val();  

$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: productData ,  
  success: function(data) {  
    //Whatever you want to do at success  
    });  
  }  
});  
return false;

所以这将是一个 POST 请求，您可以像提交表单一样在服务器端处理它。

其次，您可以从服务器端发送响应（成功/失败取决于您的处理方式），您可以在 ajax 调用成功中检查回调函数：如上所示的 function(data){...}。希望这会有所帮助

【讨论】：

如果我只使用 jquery 提交功能，产品会添加到购物车，但页面会刷新并重定向到购物车页面。我不想刷新页面。这就是为什么我要使用点击功能

【解决方案4】：

您也可以将这些输入隐藏在 css 中：

visibility: hidden;

任何作用于这些输入的 jQuery 都应该可以工作，无论它在前端是否可见。

【讨论】：