Soumettre le formulaire avec JS

Question

Im travaillant avec un plugin panier et qui utilise un formulaire de base sur la page du produit pour soumettre des valeurs comme le prix, le nom du produit, etc. Le problème est que le plugin utilise un bouton de soumission standard pour envoyer le valeurs et je voudrais remplacer ce bouton avec un jover de jquery personnalisé plus joli. Pour ce faire j'ai utilisé JS et jeté un lien vers mon habitude bouton de soumission:

<a href="#" onclick="document.forms[0].submit()" value="Add to Cart" onsubmit="return ReadForm(this, true);"> 
<img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/> 
</a> 

La forme présente et l'utilisateur est redirigé vers la page d'accueil, mais les données sous la forme ne semble pas obtenir soumis et le produit ne sera jamais ajouté à la page "panier". Je soupçonne que le formulaire est soumis, mais je ne parviens pas à déclencher une fonction JS supplémentaire qui soumet les données. Le plugin ajoute quelques JS en haut de la page:

<!-- 
// 
function ReadForm (obj1, tst) 
{ 
// Read the user form 
var i,j,pos; 
val_total="";val_combo=""; 

for (i=0; i<obj1.length; i++) 
{  
// run entire form 
obj = obj1.elements[i]; 

// a form element 
if (obj.type == "select-one") 
{ // just selects 
if (obj.name == "quantity" || 
obj.name == "amount") continue; 
pos = obj.selectedIndex;  // which option selected 
val = obj.options[pos].value; // selected value 
val_combo = val_combo + "(" + val + ")"; 
} 
} 
// Now summarize everything we have processed above 
val_total = obj1.product_tmp.value + val_combo; 
obj1.product.value = val_total; 
} 
//--> 

Si vous voulez vérifier le site en question, jetez un coup d'oeil ici et cliquez sur « bouton Ajouter au panier »: http://hardtopdepot.com/?p=34

Vous pouvez voir le chariot en haut: http://hardtopdepot.com/?page_id=50

Toute aide serait super apprécié - merci!

Answer 1

Il y a deux formes sur cette page, vous soumettez actuellement le premier, qui est le formulaire de recherche. Changer le onclick:

document.forms[1].submit() 

En outre, il n'y a aucun cas onsubmit pour un élément, de sorte que votre lien peut être simplement:

<a href="#" onclick="document.forms[1].submit()" value="Add to Cart"> 
    <img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/> 
</a> 

Edit: Bien que cela va corriger ce que vous essayez actuellement à faire, bobince fait un très bon bon point.

Answer 2

Il se comporte comme un bouton; laissez-le comme un bouton. Marquer comme un lien signifie que votre formulaire va inutilement se casser sans JavaScript, et vous donne un comportement de lien indésirable, comme le clic du milieu pour un nouvel onglet ou en essayant de le mettre en signet. Vous pouvez également arrêter Enter -to-submit de travailler si vous faites un formulaire avec plusieurs champs, mais pas de bouton Soumettre. Il suffit d'utiliser CSS pour styler le bouton pour qu'il ressemble à un lien ou à quoi que ce soit que vous voulez qu'il ressemble. Changez le background et supprimez le border et le padding.

Le seul vrai problème avec cette approche est que IE (naturellement, IE) ajoute 1px de rembourrage inamovible. Vous pouvez généralement contourner cela avec un peu de CSS ciblé. Alternativement, si vous voulez juste une image simple, utilisez un <input type="image"/>. C'est ce qui est là pour vous et vous pouvez l'utiliser dans un survol comme n'importe quelle autre image.