Last active
June 6, 2016 13:31
-
-
Save pvolyntsev/b1ce3d17c5fad20bffe3 to your computer and use it in GitHub Desktop.
Отправка формы посредством AJAX и PHP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="b-form-wrap"> | |
| <p id="validation-fail-msg">Please, fill in the missing fields.</p> | |
| <form novalidate id="feedback-form"> | |
| <div class="b-form-box"> | |
| <p class="form-box__text form-box__text_no-pad">What's your name?<sup class="form-box__sup">*</sup></p> | |
| <input type="text" name="name" maxlength="30" required id="name-input" class="form-box__input-field"> | |
| <p class="form-box__text">What's your phone number?<sup class="form-box__sup">*</sup></p> | |
| <input type="text" name="phone" maxlength="30" required id="phone-input" class="form-box__input-field"> | |
| <p class="form-box__text">What's your email?<sup class="form-box__sup">*</sup></p> | |
| <input type="text" name="email" maxlength="50" required id="email-input" class="form-box__input-field"> | |
| </div> | |
| <div class="b-form-box b-form-box_left-mrg"> | |
| <p class="form-box__text form-box__text_no-pad">How can I help you?</p> | |
| <textarea name="text" class="form-box__input-field form-box__input-field_textarea"></textarea> | |
| </div> | |
| <input type="submit" class="form-box__button" value="Beautify me"><!-- <input type="submit" > вместо <button> --> | |
| <p id="validation-success-msg">Thanx, I'll contact you very soon.</p> | |
| </form> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| $("#feedback-form").submit(function(e){ // привязать обработку на submit а не на click | |
| e.preventDefault(); | |
| if (feedback_validate()){ | |
| $.ajax({ | |
| type: "POST", | |
| url: "php/feedback.php", | |
| data: $(this).serialize() | |
| }).done(function() { | |
| $(this).find("input").val(""); | |
| $('#validation-success-msg').show('fast'); | |
| $("html, body").animate({ | |
| scrollTop: $(document).height() | |
| }, "slow"); | |
| $("#feedback-form").trigger("reset"); | |
| }); | |
| } | |
| return false; | |
| }); | |
| }); | |
| function feedback_validate() { | |
| var result = true; | |
| var f_names = ["#name-input", "#email-input", "#phone-input"]; | |
| var el; | |
| f_names.forEach(function(item) { | |
| el = $(item); | |
| if (el.val() == "") { | |
| result = false; | |
| el.addClass("validation-error"); | |
| } else { | |
| el.removeClass("validation-error"); | |
| } | |
| }); | |
| if (result) { | |
| $("#validation-fail-msg").hide(); | |
| } else { | |
| $("#validation-fail-msg").show(); | |
| $('html, body').animate({ | |
| scrollTop: $("#validation-fail-msg").offset().top | |
| }, 1000); | |
| } | |
| return result; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $recepient = "email here"; | |
| $sitename = "site here"; | |
| $name = trim($_POST["name"]); | |
| $phone = trim($_POST["phone"]); | |
| $email = trim($_POST["email"]); | |
| $text = trim($_POST["text"]); | |
| $subject = "A new submission from \"$sitename\""; | |
| $message = "Name: $name \nPhone number: $phone \nEmail: $email \nText: $text"; | |
| $headers = array( | |
| "Content-type: text/plain; charset=\"utf-8\"", | |
| "From: $recepient", | |
| "Reply-To: $email", // чтобы при попытке ответить на письмо был подставлен адрес пользователя | |
| ); | |
| mail($recepient, $subject, $message, implode("\r\n", $headers)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment