es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que la etiqueta link funcione con un botón de envío?

26 Jul, 2023 Programación

Cómo hacer que la etiqueta <a> link </a> funcione con un botón de envío?
Actualmente envío datos con un formulario, pero también necesito que el enlace <a> link </a> funcione.

Mi código solo funciona con el botón de envío:

<form method="POST" action="{{ route('enviado') }}">
                                 @csrf
                                 <input type="hidden" name="id" value="{{$hoy->id}}">
    <a href="https://api.whatsapp.com/send" target="_blank"> <button type="submit">Enviar</button></a>
     </form>

Ayuda por favor.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el enlace <a> funcione con el botón de envío, puedes usar JavaScript para activar el envío del formulario cuando se hace clic en el enlace. Aquí tienes el código actualizado:

    <form id="myForm" method="POST" action="{{ route('enviado') }}">
  @csrf
  <input type="hidden" name="id" value="{{$hoy->id}}">
  <button type="submit">Enviar</button>
</form>

<a href="https://api.whatsapp.com/send" target="_blank" onclick="document.getElementById('myForm').submit(); return false;">Enviar via WhatsApp</a>

    En este código, quitamos el enlace <a> de dentro del elemento <form> y lo colocamos fuera. Añadimos un atributo id al elemento del formulario para que sea más fácil de referenciar con JavaScript.

    Después, añadimos un atributo onclick al enlace, que activa una función de JavaScript. La función primero encuentra el elemento del formulario por su ID (myForm), y luego llama al método submit() para enviar el formulario.

    Finalmente, añadimos return false; al atributo onclick, lo que evita el comportamiento predeterminado del enlace (navegar a la URL indicada) para que en su lugar se envíe el formulario.

    Con este código, al hacer clic en el enlace “Enviar via WhatsApp” se enviará el formulario y se enviarán los datos al servidor, igual que al hacer clic en el botón “Enviar” dentro del formulario.

Comments are closed.