javascript - 自定义表单按钮

Question

好的伙计们，我有这个代码:

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

我如何在提交表单按钮中转换它？

我试过了，但是不行...

        <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>

Answer 1

你有几个问题。

1. 您的表单操作不应与提交按钮的onclick相同。表单操作应该是将接收您发送的数据的页面。因此，您必须放置一个页面，该页面不仅是 HTML，而且是页面服务器端处理的页面(即 PHP、ASP、ASP.NET、JSP 等)。

2. 您的 javascript 函数 envia_contato未在您共享的代码中定义，因此您必须在使用它之前在 HTML 的某处定义它(使用 script 标记)(如 Bhanu 建议的那样):

   <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>
   

   或者你可以丢弃 envia_contato函数并直接调用提交(就像 JK 那样):

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

   return false;在 onclick 结束时将避免在调用 javascript 后引发进一步的事件，因此如果您返回 false，则重定向到 #将不会完成(这种重定向在大多数情况下并不重要，但这样它会完全满足您的需要，而您不需要该重定向)。

下面的事情不是真正的问题，因为在大多数 HTML 解析器中无论如何都会工作(但无论如何您可能有兴趣了解这一点):

1. 但是你不需要 javascript:当您附加 javascript 事件(如 onclick)时，当需要其他事件时需要它(例如在 href 中，它只需要一个链接而不是 javascript，因此您可以使用前缀在其中定义 javascript)。

2. 您的 br 标签有 /在 br 之前它应该只是 <br>或 <br/> .