Custom Form Button

Ok Guys, i have this code:

<a class="button" href="#"><span>SEND</span></a>

how i can transtorm this in a submit form button?

i have tried this, but dont w开发者_运维知识库orlks...

        <div class="contato_form" id="contato_form">                    
        <form id="form1" name="form1" method="post" action="javascript:envia_contato();">
            <p><label for="nome">Name:</label><input class="campo_contato" type="text" name="nome" id="nome" /></p>
            <p><label for="email">Email:</label><input class="campo_contato" type="text" name="email" id="email" /></p>
        </form>
    <div class="clear">
    <p><a class="botao" href="#" onclick="javascript:envia_contato();"><span>SUBMIT</span></a></p>
    </div>
    </br>
    </div>

---

You have a couple of problems.

1. Your form action should not be the same as the onclick of the submit buton. The form action should be the page which will receive the data you send. So there you have to put a page which is not only HTML but a page server side handled (i.e. PHP, ASP, ASP.NET, JSP, etc.).

2. Your javascript function envia_contato is not defined in the code you shared, so you have to define it somewhere in the HTML (using a script tag) before using it (like Bhanu suggested):

   <script>
   function envia_contato()
   {
       form1.submit();
   }
   </script>
   <div class="contato_form" id="contato_form">
       <form id="form1" name="form1" method="post" action="/echo/json/">
           <p>
               <label for="nome">Name:</label>
               <input class="campo_contato" type="text" name="nome" id="nome" />
           </p>
           <p>
               <label for="email">Email:</label>
               <input class="campo_contato" type="text" name="email" id="email" />
           </p>
       </form>
       <div class="clear">
           <p><a class="botao" href="#" onclick="envia_contato(); return false;"><span>SUBMIT</span></a></p>
       </div>
       <br/>
   </div>
   

   Or you may discard the envia_contato function and call the submit directly (like JK did):

   <p><a class="botao" href="#" onclick="form1.submit(); return false;"><span>SUBMIT</span></a></p>
   

   The return false; at the end of the onclick will avoid further events to be raised after that javascript is called, so if you return false the redirección to # will not be done (such redirection is not really important most times, but this way it will do exactly what you need, and you don't need that redirection).

And the following things are not real problems because in most HTML parsers will work anyway (but you may be interested in knowing this anyway):

1. But you don't need the javascript: when you attach javascript events (like onclick), you need it when something else is expected (like in the href which expects a just a link and not javascript, so you use the prefix to define javascript in there).

2. Your br tag had the / before the br and it should be just <br> or <br/>.

---

Try using:

<a class="botao" href="#" onclick="form1.submit()">

---

you have to do submit form on anchor tag onclick event

function envia_contato()
{
  document.form1.submit();
}