将html jquery联系人表单转换为asp.net
将html jquery联系人表单转换为asp.net
提问于 2020-03-09 00:17:19
我已经使用bootstrap和jquery在html5中创建了一个联系人表单。此表单具有隐藏的字段，仅当person select单选按钮时才显示。我做了验证和所有的事情，表单不会要求隐藏的字段被填充，并正在寻找工作。当我到了需要将php添加到表单中才能发送电子邮件并将它们发送到我的电子邮件的部分时，我被告知我们的服务器不支持PHP，我基本上被告知将其全部转换为C# (asp.net)，并使所有输入都是动态的，而不是静态的。
我知道一些基本的asp.net，比如如何创建动态输入，但是我不知道如何将我所做的转换为asp.net，并保持我在html5和jquery中构建它的方式。
请帮助我，我应该如何处理这件事。
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener("submit", function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$(document).ready(function () {
$("#firstOption").hide().find(':input').attr('required', false);
$("#secOption").hide().find(':input').attr('required', false);
$("#thirdOption").hide().find(':input').attr('required', false);
$("#sign1").click(function () {
$("#firstOption").show().find(':input').attr('required', true);
$("input.notaMust").show().attr('required', false);
$("#secOption").hide();
$("#thirdOption").hide();
});
$("#sign2").click(function () {
$("#firstOption").hide();
$("#secOption").show().find(':input').attr('required', true);
$("input.notaMust").show().attr('required', false);
$("#thirdOption").hide();
});
$("#sign3").click(function () {
$("#firstOption").hide();
$("#secOption").hide();
$("#thirdOption").show().find(':input').attr('required', true);
});
$("#sign4").click(function () {
$("#firstOption").hide();
$("#secOption").hide();
$("#thirdOption").hide();
});
});body {
direction: rtl;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<html lang="">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- CSS -->
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="styles/myStyle.css" rel="stylesheet" />
<!-- Scripts -->
<script src="jScripts/jquery-1.12.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jscripts/JavaScript.js"></script>
</head>
<body>
<main class="my-form">
<div class="cotainer">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<h1>
הרשמות לעמותה
</h1>
<div class="card-body">
<!--onsubmit="return validform()"-->
<form name="my-form" class="needs-validation" novalidate method="post" role="form">
<div class="form-group row">
<label for="first_name" class="col-md-4 col-form-label text-md-right">שם פרטי</label>
<div class="col-md-6">
<input type="text" id="first_name" class="form-control" name="first-name" placeholder="חובה" required>
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-md-4 col-form-label text-md-right">שם משפחה</label>
<div class="col-md-6">
<input type="text" id="last_name" class="form-control" name="last-name" placeholder="חובה" required>
</div>
</div>
<div class="form-group row">
<label for="phone_number" class="col-md-4 col-form-label text-md-right">טלפון נייד</label>
<div class="col-md-6">
<input type="tel" id="phone_number" class="form-control" name="phoneNum" placeholder="חובה" required>
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 col-form-label text-md-right">דוא"ל</label>
<div class="col-md-6">
<input type="email" id="email_address" class="form-control" placeholder="חובה" name="email-address" required>
</div>
</div>
<p>
הרשמה ל:
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="sign1" name="signTo">
<label class="custom-control-label" for="sign1">
הרשמה לעמותה
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="sign2" name="signTo">
<label class="custom-control-label" for="sign2">
הרשמה לגמלאים
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="sign3" name="signTo">
<label class="custom-control-label" for="sign3">
הרשמה לפעילויות העמותה
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="sign4" name="signTo" checked="checked">
<label class="custom-control-label" for="sign4">
הרשמה לדיוור ישיר
</label>
</div>
<section>
<!--הרשמה לעמותה-->
<article id="firstOption">
<h2>
הרשמה לעמותה
</h2>
<p>על מנת להירשם / להצטרף לעמותה עליך: <br /> 1. למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח) <br /> 2. להוריד ולמלא את הטופס המצ"ב ולשלוח / לפקסס לגזברות בבית החולים בו הנך עובד/ת</p>
<a href="http://www.apni.co.il/download/297/">להורדת קובץ הרשמה לעמותה</a>
<p>
** לאחר הצטרפותך לעמותה ייעשה שימוש בייפוי הכוח לצורך גביית דמי חבר שנתיים.
</p>
<h3>
טופס הצטרפות לעמותה
</h3>
<p>
מילוי הטופס ושליחתו מהווה הצהרה: <br />"אני מבקש להיות חבר בעמותה. מטרות העמותה ותקוננה ידועים לי במידה ואתקבל כחבר בעמותה הנני מתחייב לקיים את הוראות התקנון ואת החלטת האסיפה הכללית של העמותה".
</p>
<div class="form-group">
<label for="joinDate" class="col-3 col-form-label">
תאריך הצטרפות לעמותה
</label>
<br />
<div class="col-md-2">
<input class="form-control" type="date" value="2019-08-19" id="joinDate" required>
</div>
</div>
<div class="form-group">
<label for="id_number" class="col-3 col-form-label text-md-right">תעודת זהות</label>
<div class="col-md-3">
<input type="text" id="id_number" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="year_number1" class="col-3 col-form-label text-md-right">שנת לידה</label>
<div class="col-md-3">
<input type="text" id="year_number1" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="workplace" class="col-3 col-form-label text-md-right">
מקום עבודה
</label>
<div class="col-md-3">
<input type="text" id="workplace" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="job_posit" class="col-3 col-form-label text-md-right">
תפקיד
</label>
<div class="col-md-3">
<input type="text" id="job_posit" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="workplace_adr" class="col-3 col-form-label text-md-right">
כתובת מגורים
</label>
<div class="col-md-3">
<input type="text" id="workplace_adr" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="mikud" class="col-3 col-form-label text-md-right">
מיקוד
</label>
<div class="col-md-3">
<input type="text" id="mikud" class="form-control notaMust">
</div>
</div>
<p>
קורס בבריאות הנפש:
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="courseStatus" name="course">
<label class="custom-control-label" for="courseStatus">
כן
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="courseStatus1" name="course" checked="checked">
<label class="custom-control-label" for="courseStatus1">
לא
</label>
</div>
<p>
תואר:
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="degreeStatus" name="degree" checked="checked">
<label class="custom-control-label" for="degreeStatus">
ראשון
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="degreeStatus2" name="degree">
<label class="custom-control-label" for="degreeStatus2">
שני
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="degreeStatus3" name="degree">
<label class="custom-control-label" for="degreeStatus3">
דוקטור
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="degreeStatus4" name="degree">
<label class="custom-control-label" for="degreeStatus4">
ללא
</label>
</div>
<div class="form-group">
<label for="otherEdu" class="col-3 col-form-label text-md-right">
השכלה אחרת
</label>
<div class="col-md-3">
<input type="text" id="otherEdu" class="form-control notaMust" placeholder="">
</div>
</div>
<div class="form-group">
<label for="mustAgree1" class="col-5 col-form-label text-md-right">
יפוי כח בלתי חוזר: אני הח"מ בדירוג האחים מצהיר/ה שהנני חבר/ה בעמותה לסיעוד פסיכיאטרי. <br />על החתום:
</label>
<div class="col-md-3">
<input type="text" id="mustAgree1" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="mustAgree2" class="col-5 col-form-label text-md-right">
בהתאם להסכם הקיבוצי אני, מבקש/ת לשלם לעמותה דמי החבר עבורי החל משנה זו ואילך. <br />על החתום:
</label>
<div class="col-md-3">
<input type="text" id="mustAgree2" class="form-control" placeholder="חובה" required>
</div>
</div>
</article>
<!--הרשמה לגמלאים-->
<article id="secOption">
<h2>
הרשמה לגמלאים
</h2>
<p>על מנת להרשם / להצטרף לעמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שליחה)</p>
<a href="http://www.apni.co.il/download/310/">להורדת טופס הרשמה לעמותה - גימלאים</a>
<p>ולשליחתו בדואר רגיל</p>
<strong>
בהתאם להחלטת הנהלת העמותה תשלום דמי החבר לגמלאי יהיה 50% מהסכום המקובל.
בנוסף, התשלום לגמלאי חבר עמותה עבור כנסים יהיה 50% מתעריף הכנס.
</strong>
<p>
<br />
<b>
את התשלום יש להעביר לכבוד:
</b><br /> העמותה לסיעוד פסיכיאטרי בישראל מרכז לבריאות הנפש לב השרון פרדסיה ת.ד. 90000 נתניה 42100.
</p>
<div class="form-group">
<label for="dateSent" class="col-3 col-form-label">
תאריך שליחת הטופס
</label>
<br />
<div class="col-md-2">
<input class="form-control" type="date" value="2019-08-19" id="dateSent" required>
</div>
</div>
<div class="form-group">
<label for="id_number1" class="col-3 col-form-label text-md-right">תעודת זהות</label>
<div class="col-md-3">
<input type="text" id="id_number1" class="form-control" placeholder="חובה" required>
</div>
</div>
<p>
מין:
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="male" name="gender">
<label class="custom-control-label" for="male">
זכר
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="female" name="gender" checked="checked">
<label class="custom-control-label" for="female">
נקבה
</label>
</div>
<div class="form-group">
<label for="year_number" class="col-3 col-form-label text-md-right">שנת לידה</label>
<div class="col-md-3">
<input type="text" id="year_number" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="home_adr" class="col-3 col-form-label text-md-right">
כתובת מגורים
</label>
<div class="col-md-3">
<input type="text" id="home_adr" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="mikud1" class="col-3 col-form-label text-md-right">
מיקוד
</label>
<div class="col-md-3">
<input type="text" id="mikud1" class="form-control notaMust">
</div>
</div>
</article>
<!--הרשמה לפעילויות-->
<article id="thirdOption">
<h2>הרשמה לפעילויות העמותה<br /> (כנסים, ימי עיון, קורסים, סדנאות, השתלמויות)</h2>
<p>
על מנת להרשם לפעילות העמותה עליך למלא את הפרטים בטופס המקוון ולשלוח ע"י לחיצת כפתור (שלח)
</p>
<strong>
**חשוב - למלא את שם הפעילות הרצויה בצורה ברורה
</strong>
<div class="form-group">
<label for="home_adr1" class="col-3 col-form-label text-md-right">
כתובת מגורים
</label>
<div class="col-md-3">
<input type="text" id="home_adr1" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="workAdr" class="col-3 col-form-label text-md-right">
מקום עבודה
</label>
<div class="col-md-3">
<input type="text" id="workAdr" class="form-control" placeholder="חובה" required>
</div>
</div>
<div class="form-group">
<label for="activitySelect">סוג הפעילות</label>
<select class="form-control col-3" id="activitySelect" required>
<option>כנס</option>
<option>יום עיון</option>
<option>קורס</option>
<option>השתלמות</option>
<option>סדנא</option>
<option>אחר</option>
</select>
</div>
<div class="form-group">
<label for="describeActivity">שם הפעילות</label>
<textarea class="form-control col-3" id="describeActivity" rows="3" placeholder="חובה" required></textarea>
</div>
<div class="form-group">
<label for="activityDate" class="col-3 col-form-label">
תאריך הפעילות
</label>
<br />
<div class="col-md-2">
<input class="form-control" type="date" value="2019-08-19" id="activityDate" required>
</div>
</div>
<p>
חבר עמותה
</p>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="membershipy" name="membership" checked="checked">
<label class="custom-control-label" for="membershipy">
כן
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="membershipn" name="membership">
<label class="custom-control-label" for="membershipn">
לא
</label>
</div>
</article>
</section>
<!--שליחה-->
<div class="col-md-6 offset-md-4">
<input type="submit" id="sendForm" class="btn btn-primary" value="שליחה">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-03-09 00:35:04
为什么不创建一个ASP.Net页面来处理表单数据和发送邮件，同时保持该html页面的原样。我想这对你来说会容易得多！
我会解释的。现在，您已经有了一个包含所有表单域和验证代码等内容的HTML页面。因此，当用户填写数据并尝试提交数据时，通过AJAX (jQuery AJAX)将其发送到ASP.Net页面(例如：process.aspx)
在process.aspx (ASP.Net文件)中，您可以读取用户提交表单数据、执行任何服务器端验证、向数据库发送邮件或插入等，然后返回响应。因此，在html页面(进行AJAX调用的页面)中，您可以读取此响应并执行特定操作(例如，显示成功/错误消息或重定向到另一个页面，等等)。因此，您只需编写一个ASP.Net页面。您到目前为止所编写的代码将保持不变！
所以，我认为如果你花一些时间阅读与ASP.Net相关的教程并尝试实现它，那会更好。当你在实现过程中遇到任何问题时，你可以在这里发布你的具体问题。:)
关于服务器，可以在Windows服务器上安装PHP (假设它不是共享主机之类的)。虽然PHP在Linux环境下的性能会更好。
希望它能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60589444
复制相关文章
相似问题
腾讯云开发者
