Hay alguna forma de hacer una petición POST cuando una imagen svg se hace clic?

Mi mejor intento hasta ahora se ve como:

<form action="/test-button" method="POST">
   <input name="Submit" type="submit" value="Submit" /> 
   <svg  >
     <rect width="100" height="100" >
   </svg> 
</form>

Que es un rectángulo negro con un botón de enviar a su lado.

Quiero permitir a la gente a elegir entre varias imágenes, por lo que esta puede ser una buena solución, pero ¿hay alguna manera de hacer que la imagen que, cuando se pulsa, desencadenará un POST?

Puntos Extra para no usar javascript.

5 Comentarios

  1. 17

    Advertencia: Esto es un poco chapucero, pero como yo sé que es 100% de fiar, y no necesita tener javascript.

    Desde el label elemento también puede ser utilizado para el control de la entrada asociado, usted podría intentar algo como esto:

    <form action="/test-button" method="POST">
      <label>
       <input type="submit" name="image" value="one">
       <svg><rect width="100" height="100"></rect></svg> 
      </label>
      <label>
       <input type="submit" name="image" value="two">
       <svg><rect width="100" height="100"></rect></svg> 
      </label>
    </form>

    A continuación, ocultar los botones de envío con CSS. Usted puede poner cualquier cosa en la etiqueta que desee.

    Cuando usted haga clic en cualquier cosa en la etiqueta, se activará el botón de enviar en su interior y enviar el formulario, con el botón del value en el POST de la matriz.

    También hay un <input type="image">, pero eso es para un propósito totalmente diferente (seguimiento de las coordenadas de donde se ha hecho clic).

    • Esto es bueno! Gracias Wesley!
    • Estoy intrigado por la <input type=»image»> la cosa. ¿Cómo puedo conseguir que la imagen sea de una línea de svg en lugar de un archivo aparte?
    • Usted tendría que usar src para vincular a un archivo svg con el fin de utilizar que. Estoy bastante seguro de que no lo desea, ya que los tipos de entrada tienen un propósito muy específico (seguimiento de las coordenadas del clic). También puede ser que desee ir con un simple <input type="radio"> de instalación y un único botón de enviar, pero es un clic adicional para el usuario.
    • Esto parece que funciona estupendamente en Chrome, pero no en Firefox o Epifanía. Es lo que esperaba o he hecho algo mal?
    • Seguro que no, a mí me funciona en todos los navegadores que he intentado, como internet explorer y Firefox. Intente esto: jsfiddle.net/XKZJc/1
    • Que funciona bien en todos los tres. Así que debe haber jodido algo de alguna manera en mi aplicación real. Siento el lío se acerca!
    • De hecho, resulta que Firefox y de la epifanía son sensibles a la orden exacto de los elementos en una forma que el Chrome no lo es. Pero después de cachondeo sobre la tengo trabajando ahora en todos los tres. Gracias!

  2. 5

    Parece como una gran caso de uso para el <button> elemento.

    <form action="/test-button" method="POST">
       <button>
          <svg>
             <rect width="100" height="100" >
          </svg>
       </button>
    </form>

    Clic en el botón del elemento que realiza el mismo trabajo como input[type="submit"], así que usted puede reemplazar la entrada por completo. Si usted va esta ruta, usted también puede considerar la colocación de una etiqueta de texto dentro del botón y/o un title dentro de la svg para facilitar la accesibilidad.

  3. 4

    Esto, tal vez:

    <form action="/test-button" method="POST">
        <input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
    </form>

    Jsfiddle: http://jsfiddle.net/Xawuv/

    • Tenga en cuenta que la codificación base64 puede aumentar el tamaño de la SVG innecesariamente – usted puede en lugar de mantenerlo como UTF-8, y sólo integrar el SVG. <input type="image" src='data:image/svg+xml;utf8,<svg>...</svg>'>. Esto tiene la ventaja adicional de requerir un menor paso en el momento de la creación de este SVG botón. css-tricks.com/probably-dont-base64-svg
    • Esto funciona en todo el camino hacia abajo a IE 9 y en las modernas versiones de Firefox, he probado. Gracias.
  4. 4

    Es absolutamente imposible sin JS, pero se puede usar JS para hacerlo. Adjunto un onclick() y sólo tiene que utilizar: document.getElementById('formID').submit();.

    HTML:

    <form action="/test-button" method="POST" id="submittingForm">
       <input name="Submit" type="submit" value="Submit" /> 
       <svg onclick="submitForm();">
         <rect width="100" height="100" >
       </svg> 
    </form>

    y JS (va dentro de su <head></head> etiquetas):

    <script type="text/javascript">
        function submitForm()
        {
            document.getElementById("submittingForm").submit();
        }
    </script>
    • Ok, pero yo no sé nada de javascript. ¿Cómo puedo adjuntar esta cosa?
    • Bueno, ya tienes la respuesta anterior, pero si alguna vez quieres usar JS (lo que usted debe, ya que es muy versátil), he editado mi respuesta con el código.
    • Genial, gracias, voy a probarlo.
  5. 2

    Este es un simple botón con un rayo en el interior de la caja.

     <svg x="167" y="8" cursor="pointer" width="30" height="30"   visibility="visible" >
                    <g id="Flash">
                        <g fill="#FFCC00"  stroke="#D57300" stroke-width="2" >
                            <path stroke-linecap="round" d="m 10.311873 9.0776039 9.400261 -7.988867 -0.05562 6.2501137 -2.224914 0.093987 -0.05562 5.5452134 11.402682 -0.04699 -18.522406 16.024725 0.05562 -6.015145 2.169291 -0.09398 -0.05562 -5.874165 -11.51392928 0.04699 z"/>
                        </g>
                    </g>    
                    <rect width="30" height="30"  opacity="0"  fill="transparent"    fill="url(#Flash)" id="Flash_Button"  onclick="Flash(evt);" />     
        </svg>

    y aquí está el guión de la función cuando usted haga clic en

    function Flash(){
    //post whatever you want inside here
    
    }

    El problema al crear un botón y en el interior tiene líneas y cuando se pone el elemento principal de la onclick usted no haga clic en todas las svg elemento, sino que usted haga clic en por separado y a todos los niños en el interior. por lo que necesita para crear un rect dentro de la svg con el ancho y la altura del elemento padre, y ocultar, y después de poner allí el onclick!

Dejar respuesta

Please enter your comment!
Please enter your name here