Question

J'ai une image avec des liens vers une autre page à l'aide de < a href = " ... " > < img ... > < / a > .

Comment puis-je lui faire publier un message comme s'il s'agissait d'un bouton < input type = " submit "... > ?

Était-ce utile?

La solution

<input type="image" name="your_image_name" src="your_image_url.png" />

Ceci enverra les valeurs votre_nom_image.x et votre nom_image.y lors de la soumission du formulaire, qui sont les coordonnées x et y de la position sur laquelle l'utilisateur a cliqué sur l'image. .

Autres conseils

Approche plus générique avec la bibliothèque JQuery plus proche () et envoyer () boutons. Ici, vous ne devez pas spécifier le formulaire que vous souhaitez soumettre, soumettez le formulaire dans lequel il se trouve.

<a href="#" onclick="$(this).closest('form').submit()">Submit Link</a>

On dirait que vous essayez d'utiliser une image pour soumettre un formulaire ... dans ce cas, utilisez < input type = " image " src = " ... " >

Si vous voulez vraiment utiliser une ancre, vous devez utiliser javascript:

< a href = " # " onclick = " document.forms ['myFormName']. submit (); retourne faux; > ... < / a >

le type d'entrée = image le fera pour vous.

Non testé / pourrait être mieux:

<form action="page-you're-submitting-to.html" method="POST">
    <a href="#" onclick="document.forms[0].submit();return false;"><img src="whatever.jpg" /></a>
</form>
 <html>

 <?php

 echo <*>POST['c']." | ".<*>POST['d']." | ".<*>POST['e'];

 ?>

 <form action="test.php" method="POST">
      <input type="hidden" name="c" value="toto98">
      <input type="hidden" name="d" value="toto97">
      <input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">

      <a href="" onclick="document.forms[0].submit();return false;">Click</a> 
 </form>

</html>


So easy.




So easy.

Ce qui pourrait être un ajout pratique à cette option est la possibilité de modifier la post-URL du bouton supplémentaire afin que vous puissiez publier des URL différentes avec des boutons différents. Ceci peut être réalisé en définissant la propriété 'action' du formulaire. Voici le code pour cela lorsque vous utilisez jQuery:

$('#[href button name]').click(function(e) {
    e.preventDefault();
    $('#[form name]').attr('action', 'alternateurl.php');
    $('#[form name]').submit();
});

L'attribut action présente des problèmes avec les anciennes versions de jQuery, mais vous serez prêt à partir pour la dernière version.

Quelque chose comme cette page ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSO Communication</title>

<style type="text/css">
.submit {
    border : 0;
    background : url(ok.gif) left top no-repeat;
    height : 24px;
    width : 24px;
    cursor : pointer;
    text-indent : -9999px;
}
html:first-child .submit {
    padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
    text-indent : 0;
    color : expression(this.value = '');
}
</style>
<![endif]-->
</head>

<body>
    <h1>Display input submit as image with CSS</h1>

    <p>Take a look at <a href="/2007/07/26/afficher-un-input-submit-comme-une-image/">the related article</a> (in french).</p>
    <form action="" method="get">
        <fieldset>
            <legend>Some form</legend>
            <p class="field">
                <label for="input">Some value</label>

                <input type="text" id="input" name="value" />
                <input type="submit" class="submit" />
            </p>
        </fieldset>
    </form>

    <hr />
    <p>This page is part of the <a href="http://www.bsohq.fr">BSO Communication blog</a>.</p>

</body>
</html>

N'oubliez pas le "BOUTON". élément pouvant gérer un peu plus de HTML à l'intérieur ...

Nous remplaçons le bouton d'envoi par ceci tout le temps sur les formulaires:

<form method="post" action="whatever.asp">
<input type=...n

<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>

En cliquant sur l'image, vous soumettez le formulaire. J'espère que ça aide!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top