Pregunta

Obtuve una imagen con enlaces a otra página usando < a href = " ... " > < img ... > < / a > .

¿Cómo puedo hacer que haga una publicación como si fuera un botón < input type = " submit " ... > ?

¿Fue útil?

Solución

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

Esto enviará los valores your_image_name.x y your_image_name.y a medida que envía el formulario, que son las coordenadas x e y de la posición en la que el usuario hizo clic en la imagen .

Otros consejos

Aprobación más genérica utilizando JQuery biblioteca arest () y submit () botones. Aquí no tiene que especificar a quién desea enviar el formulario, envíe el formulario en el que se encuentra.

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

Parece que estás intentando usar una imagen para enviar un formulario ... en ese caso, usa < input type = " image " src = " ... " >

Si realmente quieres usar un ancla, entonces debes usar javascript:

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

input type = image lo hará por usted.

No probado / podría ser mejor:

<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.

Lo que podría ser una adición útil a esto es la posibilidad de cambiar la URL posterior desde el botón adicional para que pueda publicar en diferentes URL con diferentes botones. Esto se puede lograr estableciendo la propiedad de formulario 'acción'. Aquí está el código para eso cuando se usa jQuery:

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

El atributo action tiene algunos problemas con las versiones anteriores de jQuery, pero en la última estará listo.

Algo como esta página ?

<!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>

No olvide el BOTÓN " elemento que puede manejar un poco más de HTML dentro ...

Reemplazamos el botón de envío con esto todo el tiempo en los formularios:

<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>

Al hacer clic en la imagen, se envía el formulario. ¡Espero que ayude!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top