Как отправить форму через ajax?

Question

[Алексей]

Есть форма

<form data-action="/feedback/add">
  <div class="form-group">
    <label for="firstname">Имя</label>
    <input type="text" class="form-control" id="firstname" name="firstname" required="">
  </div>
  <div class="form-group">
    <label for="contact">Email или номер телефона</label>
    <input type="text" class="form-control" id="contact" name="contact" required="">
   </div>
  <div class="form-group">
    <label for="text">Сообщение</label>
    <textarea class="form-control" id="text" name="text" rows="5" required=""></textarea>
   </div>
   <div class="form-group">
     <button type="submit" name="submit" class="btn btn-info">Отправить</button>
   </div>
</form>

Хочу сделать чтобы js код при нажатии кнопки submit проверил есть ли в этой форме атрибут data-action если есть то это означает что форма должна отправиться через ajax по адресу указано в атрибуте

Пробовал таким способом но не определяет адрес :(

$(document).ready(function()
{
	$('form[data-action]').submit(function(e) 
	{
		var form = $(this)[0];
		
		e.preventDefault();
		
		$.ajax({
			url: $(this).attr('[data-action]'),
			type: 'post',
			data: new FormData(form),
			contentType: false,
			processData: false,
			success: function(result) 
			{
				console.log(result);
			}
		});
	});
});

Answer 1

[Алексей]

Проблема решена. Помог атрибут data()
Ниже пример отправки:

$(document).ready(function()
{
	$('form[data-action]').submit(function(e) //ловим использование submit с атрибутом data-action у <form>
	{
		e.preventDefault(); // отмена действия браузера
		
		$.ajax({
			url: $(this).data('action'), //полученный url из атрибута data-action
			type: 'post',
			data: new FormData($(this)[0]), //получаем все поля формы
			contentType: false,
			processData: false,
			success: function(result) 
			{
				console.log(result); //результат
			}
		});
	});
});

Comments

[Андрей]

во первых .data() это не атрибут а метод.
во вторых вы не верно прочитали атрибут
$(this).attr('data-action')

[jasonOk]

Можно заменить $(this).data('action') на this.getAttribute('data-action')

А это недарозумение $(this)[0]
просто на this

[Сергей delphinpro]

$('form[data-action]').submit(function(e) {
    e.preventDefault();
    
    let url = e.target.dataset.action || e.target.action;

    $.ajax({
      url,
      ...

[Алексей]

jasonOk, при просто this никакие данные не отправляются

[Алексей]

Сергей delphinpro, работает хорошо с .data(), а получать с action="" не нужно так как он будет указываться только тогда когда это обычная форма

[Алексей]

Андрей, спасибо, что поправили