Настройка ajax-части в отправке формы
298
03 марта 2017, 01:08
Есть код:
<form class="c-form" id="connectForm">
<div class="c-form__lineWrap">
<div class="c-form__line c-form__line--first">
</div>
</div>
<input type="text" class="c-form__input c-form__input--first c-form__input--required"
name="name"
placeholder="Имя и фамилия" required>
<input type="text" class="c-form__input c-form__input--required" name="phone"
placeholder="Телефон" required>
<input type="email" class="c-form__input c-form__input--required" name="email"
placeholder="E-mail" required>
<input type="text" class="c-form__input c-form__input--required" name="position"
placeholder="Желаемая позиция" required>
<textarea rows="4" class="c-form__input"
placeholder="Комментарий (необязательно)"></textarea>
<input type="submit" class="c-form__input c-form__button " id="c-form__submit">
</form>
Как настроить ajax-отпраку данной формы ?
Answer 1
С помощью $.ajax(). Например так:
$("#connectForm").submit(function(e) {
var script = "/mail.php"; // скрипт обработки данных
$.ajax({
type: "POST",
url: script,
data: $("#connectForm").serialize(), // все данные с формы
success: function(data) {
console.log(data); // ответ от скрипта отправки
},
error: function() {
console.log('Ошибка отправки');
}
});
e.preventDefault(); // отменяем стандартную отправку
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="c-form" id="connectForm">
<div class="c-form__lineWrap">
<div class="c-form__line c-form__line--first">
</div>
</div>
<input type="text" class="c-form__input c-form__input--first c-form__input--required" name="name" placeholder="Имя и фамилия" required>
<input type="text" class="c-form__input c-form__input--required" name="phone" placeholder="Телефон" required>
<input type="email" class="c-form__input c-form__input--required" name="email" placeholder="E-mail" required>
<input type="text" class="c-form__input c-form__input--required" name="position" placeholder="Желаемая позиция" required>
<textarea rows="4" class="c-form__input" placeholder="Комментарий (необязательно)"></textarea>
<input type="submit" class="c-form__input c-form__button " id="c-form__submit">
</form>Answer 2
На вскидку. Необходимо js , jquery собрать данные с формы , потом создать объект data в котором в парах ключ значение узказаны данные. после этого делаеться отправка одним из методов POST или GET (я обычно использую пост) на url который вам нужен , это можеть быть файл php или адрес сервера который примет данный запрос.
$('#c-form__submit').on('click',function(){
var name = $('input[name=name]').val();
var phone = $('input[name=phone]').val();
var email = $('input[name=email]').val();
var position = $('input[name=position]').val();
var data = {
name : name,
phone : phone,
email : email,
position : position
};
$.ajax({
url: url,
type: "POST",
data: data,
success: success,
dataType: dataType
});
});
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 15.11.2024 | 19:53