Господа, на странице есть много разных форм с отправкой через AJAX
$('КАКАЯ-то ФОРМА').submit(function(){
$.post('<?=Url::toRoute("КАКОЙ-то ЭКШН")?>', {
'id_gift_reciever' : $('#id_gift_reciever').val(),
'mem_date' : $('#mem_date').val(),
//таких много разных
}, function() {
})
return false;
});
Как бы написать такую штуку универсальную (где буду передаваться любые id input) не указывая поля явно
Как бы написать такую штуку универсальную (где буду передаваться любые id input) не указывая поля явно
Вот так, если в формах нет файлов:
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
// Обарботает поля в зависимости от того на какую нажато
let data = $(this).serializeArray();
// Тут может идти ваш код для AJAX
// ....
console.log(data);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" class="form1">
<input type="text" name="in1.1">
<input type="text" name="in1.2">
<select name="sel" id="">
<option value="0">Default</option>
<option value="1">You choose</option>
</select>
<button type="submit">Send 1</button>
</form>
<form action="" class="form2">
<input type="text" name="in2.1">
<input type="text" name="in2.2">
<button type="submit">Send 2</button>
</form>
UPD: Благодарю @andreymal
С обработкой файлов:
$(document).ready(function () {
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'POST',
data: JSON.stringify(formData),
success: function (data) {
console.log(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
/***
var forms = document.querySelectorAll('form')
forms.forEach(function (form) {
form.addEventListener('submit',function (e) {
e.preventDefault();
let data = new FormData(e.target);
//console.log(e.target.classList[0]);
//let file = document.querySelector('.' + e.target.classList[0] +' > input[type="file"]')
//console.log(file.files);
//data.append(file.getAttribute('name'), file.files[0])
var url = 'https://jsonplaceholder.typicode.com/posts'
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: data // Отправка самой формы
})
.then(response => response.json())
.then((json) => { // Ответ
// Дебаг узнать что прошла форма
console.log(json)
})
.catch(err => console.log(err));
})
})
****/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" class="form1">
<input type="text" name="in1.1">
<input type="text" name="in1.2">
<select name="sel" id="">
<option value="0">Default</option>
<option value="1">You choose</option>
</select>
<button type="submit">Send 1</button>
</form>
<form action="" class="form2">
<input type="text" name="in2.1">
<input type="text" name="in2.2">
<input type="file" name="myFile2">
<button type="submit">Send 2</button>
</form>
name
для коректной работы.Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
по нажатию на якорь открываю мод окно и делаю скролл до нужного элементаНо скролится не содержимое окна, а всё, что за ним
Мне нужно получить значение всех инпутов, каждый из которых находится в родительском блокеИ полученные значения, сложить в сумме
"Открыть подменю" 2 и их открывать поочередно, при открытие первого закрыть второе, при закрытие второго- открывать первый