преобразовать html jquery контактную форму в asp.net - PullRequest
Новая
       3

преобразовать html jquery контактную форму в asp.net

0 голосов
/ 08 марта 2020

Я создал контактную форму в html5 с bootstrap и jquery. эта форма имеет поля, которые скрыты, и они отображаются только тогда, когда человек выбирает переключатель. Я сделал проверку и все, что форма не требует заполнения скрытых полей и работает найти. Когда я дошел до того, что мне нужно добавить php в форму, чтобы иметь возможность отправлять электронные письма и получать их на мою электронную почту, мне сказали, что серверы в нашем месте не поддерживают PHP, и я был в основном велел преобразовать все в C# (asp. net) и сделать все входные данные динамическими c вместо статических.

я знаю некоторые основы c asp. net например, как создавать динамические c входные данные, но я понятия не имею, как преобразовать то, что я сделал, в 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 Ответ

0 голосов
/ 08 марта 2020

Почему бы вам не создать страницу ASP. Net для обработки данных формы и отправки почты, в то время как эта страница html остается такой, как есть. Я думаю, это было бы намного проще для вас!

Я объясню. Прямо сейчас у вас есть страница HTML со всеми полями формы, кодом проверки и прочим. Поэтому, когда Пользователь заполняет данные и пытается отправить данные, отправьте их через AJAX (jQuery AJAX) на страницу ASP. Net (например: process.aspx)

В этом process.aspx (* ASP. Net файле) вы можете прочитать данные формы, предоставленные Пользователем, выполнить любые проверки на стороне сервера, отправить письмо или вставить в базу данных и т. Д. c. а затем вернуть ответ. Таким образом, на странице html (с которой был сделан вызов AJAX) вы можете прочитать этот ответ и выполнить заданное действие c (скажем, отобразить сообщение об успехе / ошибке или перенаправить на другую страницу и т. Д. * 1031). *.). Таким образом, вам нужно всего лишь кодировать одну ASP. Net страницу. То, что вы написали до сих пор, останется без изменений!

Так что, я думаю, было бы лучше, если бы вы потратили некоторое время на чтение руководств, связанных с ASP. Net, и попытались реализовать это. И когда вы столкнетесь с какими-либо проблемами во время реализации, вы можете опубликовать свою указанную проблему c здесь :)

Что касается сервера, можно установить PHP на сервере Windows (при условии, что это не Shared Hosting или что-то в этом роде). Хотя PHP будет работать лучше в Linux среде.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...