<button> comportement dans Firefox vs IE

Question

J'ai une table, et à la fin de chaque ligne, il y a un bouton pour que l'utilisateur puisse supprimer cette ligne. Je le fais comme ceci:

<td><button type=submit name=delete value=1>delete</button> 
<td><button type=submit name=delete value=2>delete</button> 
<td><button type=submit name=delete value=3>delete</button> 
<td><button type=submit name=delete value=4>delete</button> 

Mais cela ne fonctionne pas dans IE, le formulaire envoie au lieu de supprimer la valeur. J'ai aussi essayé:

<td><input type=submit name=delete value=1> 
<td><input type=submit name=delete value=2> 
<td><input type=submit name=delete value=3> 
<td><input type=submit name=delete value=4> 

Mais le texte du bouton est un nombre au lieu du mot supprimer.

Y at-il de toute façon que je puisse ajouter un tas de boutons de soumission à un formulaire qui disent tous supprimer mais effectuer des actions différentes? Je ne peux pas utiliser des formulaires séparés car les formulaires ne peuvent pas imbriquer.

Answer 1

Que diriez-vous de certains JavaScript et un champ de formulaire caché?

<input type="hidden" name="deleteID" value="" /> 

<script type="text/javascript"> 
function deleteID(theid) 
{ 
    theFormName.deleteID = theid; 
    theFormName.submit(); 
} 
</script> 

Et pour les boutons:

<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(1);" /></td> 
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(2);" /></td> 
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(3);" /></td> 
<td><input type="button" name="delete" value="Delete" onclick="javascript:deleteID(4);" /></td> 

Et dans le script côté serveur, vous pouvez vérifier si deleteID est réglé et supprimer au besoin.

Answer 2

Pourquoi ne pas simplement utiliser un lien?

Vous pouvez également changer le nom de chaque bouton, mais le lien est meilleur, je crois, car vous ne soumettez pas vraiment un formulaire, mais effectuez une action.

Answer 3

Dans ce cas, je n'irais pas avec plusieurs boutons d'envoi. Il serait préférable de définir une entrée cachée à la valeur que vous voulez (en utilisant Javascript) lorsque les boutons sont cliqués. Ensuite, le javascript peut appeler myform.submit()

Answer 4

Utilisez les liens si vous pouvez

<td><a href='delete.php?id=1'>delete</a></td> 

Si vous insistez sur l'utilisation des formulaires utiliser celui-ci

<td> 
    <form action='delete.php'> 
     <input type='hidden' name='id' value='2'> 
     <input type='button' value='delete'> 
    </form> 
</td> 

Answer 5

Rien à voir avec votre question: toujours des guillemets autour de vos valeurs d'attribut.

Answer 6

Internet Explorer 6 et 7 ont tous deux support de manipulation sous forme de poussette, en particulier avec des éléments button:

1. Le innerText d'un élément button est soumis, au lieu de la value (si défini).
2. Tous les éléments button ont réussi, donc toutes les paires nom/valeur sont soumises. Cela signifie que si # 1 aurait fonctionné correctement, il supprimerait tous les articles :(
3. Si l'attribut type n'est pas défini sur le button, il ne sera pas par défaut submit. Vous devez ajouter type="submit" à chaque button.

moyens possibles pour surmonter ce problème pourrait être:

1) Créer plusieurs form s avec un champ caché contenant le value:

<form action=".../delete" method="post"> 
    <input type="hidden" name="id" value="1" /> 
    <button type="submit">Delete</button> 
</form> 
<form action=".../delete" method="post"> 
    <input type="hidden" name="id" value="2" /> 
    <button type="submit">Delete</button> 
</form> 

2) Ajouter le id à l'intérieur du button, donc vous pouvez l'analyser du côté serveur:

<button type="submit" value="1">Delete <span>1</span></button> 

CSS:

button span { 
    display: none; 
} 

C#:

int id; 
if (!Int32.TryParse(this.Request.Form["delete"], out id) 
{ 
    // Get the value between the `span`s 
} 

3) Utiliser JavaScript pour soumettre le value au lieu des innerText et seulement button succès s:

IE8.js

Il n'y a pas ' meilleure réponse, cela dépend de la situation.

Answer 7

Personnellement, j'essaie d'éviter tout javascript pour ce genre de problème.

Merci à la balise Label qui déclenche tout élément de formulaire avec un attribut ID.

<label for="action_delete" class="button-submit"><input type="submit" id="action_delete" name="action" value="delete" /> Delete this item</label> 

Ensuite, utilisez le style CSS pour l'étiquette comme un bouton

label.button-submit{ cursor: pointer; ... } 
label.button-submit input{ position: absolute; top: -999%; } 

Cheers!