onsubmit 函数问题

Question

因为我对HTML几乎一无所知，也不知道去哪里问，所以我决定来这里。我正在尝试编辑生成的 HTML Weebly 网络编辑器并添加一个 "contact us" 表单，该表单会将消息定向到我的电子邮件。我在网上找到了一些源代码，并尝试将其与 Weebly 为我生成的表单合并，但我没有取得任何成功。我的代码如下：

<div>

     <form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
     <div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
     <ul class="formlist" id="466589977852666939-form-list">
     <h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>

     <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
            <label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
            <div class="wsite-form-input-container">
                <input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
            </div>
            <div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
        </div></div>

     <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
            <label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
            <div class="wsite-form-input-container">
                <textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
            </div>
            <div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
        </div></div>
    </ul>
</div>

<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
    <input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>

<script>
function myFunction() {
    alert("The form was submitted");
}
</script>

</div>

很明显是点击按钮没有注册有关系，所以我自己做了一个更简单的表单来测试一下。

<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
    <td valign="top">
        <label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
    </td>
    <td valign="top">
        <input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
    </td>
</tr>
<tr>
    <td valign="top">
        <label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
    </td>
    <td valign="top">
        <textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
    </td>
</tr>
<tr>
    <td colspan="2" style="text-align:center" >
    <br /><br />
        <input type="submit" value=" Submit Form " style="width:200px;height:40px">
        <br /><br />
    </td>
</tr>
</table>
</form>


<script>
    function myFunction() {
    alert("The form was submitted");
    }
</script>

在这种情况下，函数实际上被触发了！所以现在我不确定第一个示例和第二个更简单的代码之间有什么区别。谁能帮帮我？

Answer 1

这是因为在您的简化示例中您使用了“提交”按钮。

在您的原始表单中，使用 CSS 将按钮移出屏幕，只留下文本 'Submit'。单击 input 而非文本时，您的函数将触发。

这是隐藏按钮的 CSS 样式属性：

position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;

替换为：

<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">

由此:

<input type="submit" />

该按钮将重新出现，点击它会触发您的消息框。

Here is the JSFiddle demo

Answer 2

您可以将 onclick() 添加到提交 <a> 标记以提交表单。

像这样，改变...

<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>

到...

<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>

onsubmit 函数问题

onsubmit Function Issues

html

javascript

onsubmit