Нажмите кнопку отправки в скрытой форме с помощью jquery?

Question

У меня есть 25 продуктов, показывающихся на странице. Каждый продукт содержит форму внутри него. Как я должен перетащить продукт в мини-корзину справа. Для этого мне нужен идентификатор формы продукта, который нужно перетащить.

С помощью jquery я получаю идентификатор формы. Теперь я хочу нажать кнопку отправки в этой форме. Есть ли способ сделать это с помощью 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> 

Я думаю, что это не большая проблема, но почему-то я не в состоянии почини это. Ваша помощь очень ценится.

Answer 1

Почему бы и нет?

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

Answer 2

Попробуйте для функции перетаскивания (без формы 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'); 
} 

Answer 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: функция (данные) {...} показана выше , Надеюсь, что это поможет

Answer 4

Вы также мог бы сделать эти входы скрыты в CSS:

visibility: hidden; 

Любой JQuery воздействуя на этих входы должна работать независимо от того, является ли она видна в интерфейсе или нет.