【发布时间】:2018-12-16 12:00:18
【问题描述】:
如何创建联系表单以在 asp.net 和 C# 中单击按钮时发送邮件?以下是我拥有的联系表单中的代码,当单击按钮(#Button1)时,我想将表单提交到电子邮件:“name@mail.com”但不刷新页面,仅发送表单并切换一个 div (#submit)?
<form id="form1" runat="server">
<div class="input-boxes">
<div class="left-inputs">
<div class="input-place required first" style="margin-top: 0px !important;">
<input name="name" id="name" type="text" placeholder=" " runat="server" required>
<label for="name">Full Name *</label>
</div>
<div class="input-place required second" style="margin-bottom: 0px !important;">
<input name="txtemail" id="txtemail" type="email" placeholder=" " runat="server" required>
<label for="email">E-mail *</label>
</div>
</div>
<div class="right-inputs">
<textarea name="message" id="message" type="text" placeholder=" " runat="server" required></textarea>
<label for="message">How can we help you? *</label>
</div>
</div>
<div class="first-part-end">
<div class="slider">
<div class="slider-circle"></div>
</div>
<p class="more-options">Show more options</p>
</div>
<div class="input-boxes additional">
<div class="left-inputs">
<div class="input-place">
<input name="company" id="company" type="text" placeholder=" " runat="server">
<label for="company">Company Name</label>
</div>
<div class="input-place" >
<input name="phone" id="phone" type="tel" runat="server">
<input type="hidden" name="country" id="country" value="" runat="server">
</div>
<script>
$("#phone").intlTelInput();
</script>
</div>
<div class="right-inputs">
<div class="input-place" style="height: 60px !important;">
<p class="budget-input">Your budget:
<span id="demo"></span></p>
<input name="budget" type="range" min="0" max="5" value="0" step="0" class="budget-slider" id="budgetRange" list="steplist" runat="server">
<datalist id="steplist">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</datalist>
</div>
<div class="input-place" style="display: initial !important;">
<p class="checkbox-input">I'm interested in: </p>
<div class="check_all">
<label class="container">Web Design
<input name="web-design" type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Web Development
<asp:CheckBox ID="CheckBox1" runat="server" />
<span class="checkmark"></span>
</label>
<label class="container">App Design
<asp:CheckBox ID="CheckBox2" runat="server" />
<span class="checkmark"></span>
</label>
<label class="container">App Prototyping
<asp:CheckBox ID="CheckBox3" runat="server" />
<span class="checkmark"></span>
</label>
<label class="container">E-Commerce
<asp:CheckBox ID="CheckBox4" runat="server" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div class="send-button">
<asp:Button ID="Button1" runat="server" Text="Send" OnClick="Button1_Click" />
</div>
</form>
这是点击按钮时需要切换的div:
<div class="form-send" id="submit">
<div class="dialog">
<img src="Content/icons/success.svg">
<h2>Thanks for reaching us!</h2>
<p>We appreciate you contacting us. Our team will get back to you shortly.</p>
<div class="close-confirmation">Close</div>
</div>
</div>
【问题讨论】:
-
你应该使用 Ajax 来发帖。
-
您使用的是 ASP.NET 的母版页吗?
标签: javascript c# jquery asp.net contact-form