Submit form with <a href=""> instead of <input="Submit">

Question

I was given a layout of a form:

<form method="post" action="" id="mail_form">
   <div id="newsletter"> 
      <input type="text" name="email_newsletter" />
      <div class="newslink">
         <input type="hidden" name="submit_newsletter" />
         <a href="">ENVIAR</a>
      </div>
   </div>
</form>

How can I make sure that when I click "SUBMIT", the form is submitted from <a href="">?

I know there are other ways to send a form, but in this case, I’d like to send it like this.

Answer 1

Thus, only with javascript.

The correct method is to use a button of the type <input type="submit">, one <button type="submit"> or a <input type="image">, the latter two have a similar effect to button allows other nested elements (including images), and the second allows sending by clicking on a specific image (sending together the coordinates clicked).

If you still want one <a>, follows the code. I do not recommend it because it affects the accessibility of the form.

<form method="post" action="" id="mail_form">
    <div id="newsletter"> 
        <input type="text" name="email_newsletter" />
        <div class="newslink">
            <input type="hidden" name="submit_newsletter" />
            <a href="#" onClick="document.getElementById('mail_form').submit();">ENVIAR</a>
        </div>
    </div>
</form>

Remember that nowadays, using CSS, you can leave the submit with the appearance of a common link, with the advantage of not "breaking" the normal functionality of form.

I’d still have a gambit that’s using a <label for="botaodeenvio"> and hide the original button with position, opacity, etc, but will remain not a <a>. Better use CSS and conventional methods.

Answer 2

You can use a simplified code like this javascript:x.Ubmit()

<a href='javascript:formName.submit()'>ENVIAR</a>

Where formName matches the form name, example:

<form name='pagamento' action=teste.html>
/*Conteúdo do formulário*/
</form>

And the link would look like this:

<a href='javascript:pagamento.submit()' target='_blank'>ENVIAR</a>
<form name='pagamento' action='teste.html' >
<input value='10' name='valor' type='hidden'/>
</form>