2012-02-07 128 views
1

我在一個頁面中顯示了25個產品。每個產品都包含一個表單。 因爲我必須將產品拖放到右側的迷你購物車上。爲此,我需要拖動產品的表單ID。使用jquery點擊隱藏窗體中的提交按鈕?

在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> 

我認爲這不是一個大問題,但不知何故,我不能修理它。 您的幫助真的很感激。

+0

你的html結構是什麼樣的? – ggreiner 2012-02-07 04:40:59

回答

1

爲什麼不能這樣?

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

首先,我沒有form-id。由於頁面上有許多產品,我必須找到哪個產品加入購物車。如果我使用提交頁面重定向到購物車頁面,我不想要。我只是想要使用jquery點擊輸入按鈕。 – 2012-02-07 04:55:45

+0

如果我給出靜態ID,那麼你的代碼工作正常。但你能幫我按照我的情況。我將formId保存在一個變量中。如何在上面的代碼中使用該變量。 – 2012-02-07 05:09:35

+0

查看更新的答案。 – AlienWebguy 2012-02-07 05:50:01

1

試試這個你降功能(無需格式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'); 
} 
+0

不工作。給錯誤document.getElementById(form_id).find不是螢火蟲控制檯中的函數。 – 2012-02-07 04:47:40

+0

你得到的錯誤是什麼? – pete 2012-02-07 04:58:21

+0

我在前面的評論中粘貼了錯誤。 。$( '#UC-產品添加到購物車外形2-1')ATTR( '動作', '')。子女( '輸入[類型= 「提交」]')點擊();此代碼正在工作,但我需要放置一個變量名稱,而不是靜態form_id – 2012-02-07 05:10:42

0

而不是調用。點擊()簡單地.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 call success中檢查回調函數:function(data){...} 。 希望這會有幫助

+0

如果我只使用jquery提交功能,產品將添加到購物車,但頁面會刷新並重定向到購物車頁面。我不希望頁面刷新。這就是爲什麼我想要使用點擊功能 – 2012-02-07 04:50:09

0

你也可以將隱藏的CSS中的那些輸入:

visibility: hidden; 

任何jQuery的作用在這些投入應該不管它是在前端或不可見的工作。