Как сделать что бы ссылка отправляла и форму и сама работала, смотрите ниже объяснение?

Question

у меня есть форма, в который ссылки выступают за роль кнопки

<form action="post.php" id="form1" method="POST" class="form">
                    <div class="input-wrap">
                        <p class="phone-on-form" >Номер<br> телефона</p>
                        <input class="input" type="phone" placeholder="+380 Номер телфона" name="num">
                        
                    </div>
                
                <p class="call-to-action">Шаг №1: Выберите удобный вам мессенджер</p>
                
                <div class="buttons">
                        <a href=".">
                            <img src="img/lgt-icon-facebook.svg" class="icon"></img>
                            <p>Messenger</p>
                        </a>
                        <a href=".">
                            <img src="img/lgt-icon-telegram.svg" class="icon"></img>
                            <p>Telegramm</p>
                        </a>
                        <a href=".">
                            <img src="img/lgt-icon-viber.svg" class="icon"></img>
                            <p>Viber</p>
                        </a>
                </div>
                </form>

тут ссылка отправляет форму, но не отправляет пользователя по нужной ссылке, может кто знает как исправить? p.s кто не понял надо что бы и отправляло на сайт, и отправляло форму

Answer 1

Ну например, как-то так.

const form = document.getElementById('form1')

const btns = document.querySelectorAll('.buttons a')

btns.forEach((btn)=>{
    btn.addEventListener('click', (e)=>{
    e.preventDefault()
    const link = btn.href
    form.submit()
    window.location = link
    console.log('go to '+ link)
  })
})

       <form action="post.php" id="form1" method="POST" class="form">
                    <div class="input-wrap">
                        <p class="phone-on-form" >Номер<br> телефона</p>
                        <input class="input" type="phone" placeholder="+380 Номер телфона" name="num">
                        
                    </div>
                
                <p class="call-to-action">Шаг №1: Выберите удобный вам мессенджер</p>
                
                <div class="buttons">
                        <a href="/test3">
                            <img src="img/lgt-icon-facebook.svg" class="icon">
                            <p>Messenger</p>
                        </a>
                        <a href="/test2">
                            <img src="img/lgt-icon-telegram.svg" class="icon">
                            <p>Telegramm</p>
                        </a>
                        <a href="/test1">
                            <img src="img/lgt-icon-viber.svg" class="icon">
                            <p>Viber</p>
                        </a>
                </div>
                </form>

БЛОГ НА HUSL

Как сделать что бы ссылка отправляла и форму и сама работала, смотрите ниже объяснение?

Ответы (1 шт):