Question

由于我几乎不了解HTML，我不知道在哪里问，我决定来这里。我正在尝试编辑生成的HTML Weebly网页编辑器并添加一个＆＃34;联系我们＆＃34;将邮件定向到我的电子邮件的表单。我在网上找到了一些源代码，并尝试将其与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将按钮移出屏幕，只留下“提交”文本。并且在单击输入时触发您的函数，而不是文本。

这是隐藏按钮的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功能问题

2 个答案: