<divclass="left-wrap">
<formid="myForm"target="_blank"action="https://formspree.io/[email protected]"method="post">
<!--左上-->
<divclass="left-top">
<divclass="input-group">
<inputtype="text"name="name"class="input__fieldinput-carrier">
<labelclass="input__label"for="input-1">
<spanclass="input__label-contentinput__label-content--nao">您的姓名</span>
</label>
</div>
<divclass="input-groupinput-group-r">
<inputtype="email"name="eamil"class="input__fieldinput-carrier"type="text">
<labelclass="input__label"for="input-1">
<spanclass="input__label-contentinput__label-content--nao">您的邮箱</span>
</label>
</div>
</div>
<!--左下-->
<divclass="send-content">
<textareaname="message"class="contact-arearequired"placeholder="您的建议..."></textarea>
<buttonclass="btn-send"type="submit"id="submit"name="submit">
<span>发送</span>
<iclass="fafa-send"></i>
</button>
</div>
</form>
</div>
JS(判断内容不能为空才提交表单)
$(document).on('click','#submit',function(evt){
if($(".contact-area").val()==""){
$(".contact-area").val("您的建议不能为空!")
evt.preventDefault()//阻止提交表单到第三方网站去
}
})
扩展资料
JavaScript常用的表单交互
在form元素上使用onsubmit事件,针对表单进行拦截,返回true才能提交
<body>
<formid="myForm"onsubmit="returnvalidate()">
请输入email地址:<inputtype="text"name="email"id="email"value=""onblur="returnvalidate()">
<spanid="msg"></span>
<div><buttontype="submit">显示邮件</button></div>
</form>
</body>
JS是在浏览器上解析执行的,所以不能直接发邮件。只能调用客户端的outlook软件并填写内容,由访客手动发出。 当然也可以通过JS利用xmlhttp把内容发送给一个动态页,比如ASP页面,然后由ASP调用jmail组件发送邮件。代码较长,去搜索吧,我不写了。