web-dev-qa-db-fra.com

Type d'entrée Image Envoyer la valeur du formulaire?

J'utilise ce code pour essayer de soumettre une valeur via un formulaire, mais il ne semble rien soumettre ...

J'utiliserais normalement une case à cocher ou des boutons radio pour plusieurs options mais je veux utiliser une image pour le faire.

Ce code est faux?

<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />

Donc, je veux passer la valeur en valeur = "myValue". 

Le formulaire fonctionne bien, alors ce n’est pas le problème, j’ai juste besoin d’aide pour que la partie saisie ne soit pas soumise car je sais que cela fonctionne.

Merci

htmlforms
36
Satch3000

Un type d'entrée = "image" définit uniquement cette image en tant que bouton d'envoi et non en tant qu'entrée pouvant transférer une valeur au serveur.

52
Francisco Paulo

Utiliser le type = "image" est problématique car la possibilité de passer une valeur est désactivée pour un manque stupide de raison. Quoi qu'il en soit et bien que ce ne soit pas aussi personnalisable et donc aussi joli, vous pouvez toujours utiliser vos images tant qu'elles font partie d'un type = "bouton".

<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>

J'espère que cela t'aides! ^ _ ^

34
BoyBlueSky

J'étais au même endroit que toi, j'ai finalement trouvé une réponse intéressante:

<form action="xx/xx" method="POST">
  <input type="hidden" name="what you want" value="what you want">
  <input type="image" src="xx.xx">
</form>
7
jungwook

J'ai trouvé que les boutons image renvoyaient une réponse, mais vous ne devriez PAS utiliser une option de valeur. Ce que je vois renvoyé est deux versions du name="MYNAME" avec les terminaisons .X et .Y. 

Par exemple:

<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">

Ceci est dans votre <form> à </form>. Si vous cliquez sur l'image, les éléments retournés sont STOP.X et STOP.Y avec des valeurs numériques. L'existence de l'un ou de l'autre indique que le bouton image STOP a été cliqué. Vous n'avez besoin d'aucun code spécial. Traitez-le simplement comme un autre type de bouton "soumettre" qui renvoie une paire de NOMS augmentés.

J'ai essayé cela sur Safari, Firefox et Chrome. L'image n'était pas affichée avec Safari, mais là où elle devait être localisée, mon curseur s'est transformé en une icône de doigt et je pouvais cliquer dessus.

6
Dick Guertin

Certains navigateurs (IIRC ou quelques versions d’Internet Explorer) n’envoient que les coordonnées de la carte d’image (dans name.x et name.y) et ignorent la valeur. C'est un bug.

Les solutions de contournement sont soit:

  • N'avoir qu'un seul bouton d'envoi et utiliser une entrée masquée pour envoyer la valeur
  • Utilisez des boutons de soumission standard au lieu de cartes d’image
  • Utilisez des noms uniques au lieu de valeurs et vérifiez la présence de name.x/name.y
4
Quentin

Voici ce que j'essayais de faire et comment je l’ai fait. Je pense que vous vouliez faire quelque chose de similaire ... J'ai eu une table avec plusieurs lignes et sur chaque ligne, j'avais une entrée avec type image. Je voulais passer un identifiant lorsque l'utilisateur a cliqué sur le bouton d'image. Comme vous l'avez remarqué, la valeur de la balise est ignorée. Au lieu de cela, j'ai ajouté une entrée cachée en haut de ma table et en utilisant javascript, j'ai mis le bon identifiant avant de poster le formulaire.

<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">

De cette façon, le bon identifiant sera soumis avec votre formulaire.

3
cogeo

Vous pouvez utiliser un bouton radio/case à cocher et le configurer pour masquer le bouton dans CSS, puis lui attribuer une étiquette avec une image.

input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}

Puis sur la page:

<input type="radio" name="emotion" id="mysubmitradio" />
        <label for="mysubmitradio"><img src="images/f.jpg" />
    <span>if you need it</span></label>

Et ensuite, configurez-le pour soumettre en utilisant JavaScript:

document.forms["myform"].submit();
1
Neil Philip Whitehead

Solution:

<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">  
    <input type="hidden" name="accion" id="accion"/>


<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>


function validaFrmSeguimiento(accion)
{
    document.frmSeguimiento.accion.value=accion;

}

Cordialement, Jp

1
Juan Paez Gallardo

Les entrées de type = "image" n'envoient pas leur paire nom/valeur lorsqu'elles sont utilisées pour soumettre le formulaire. Pour moi, cela ressemble à un bug, mais c'est comme ça.

Pour contourner ce problème, vous pouvez remplacer la input par une button de type = "submit" et y insérer un élément img.

Malheureusement, votre image se trouve dans un "bouton" HTML très laid. Cependant, en supposant que vous n'utilisiez nulle part le bouton HTML standard, vous pouvez simplement remplacer la feuille de style et tout devrait alors fonctionner comme prévu:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>

1
Skeets

eh bien, si j'étais à votre place, je ferais ceci.J'aurais un champ caché et basé sur le champ d'image d'entrée, je changerais la valeur du champ caché (jQuery), puis soumettrais finalement le champ caché dont la valeur correspond au champ d'image.

0
Mateen