Submit Laravel form using JavaScript

Question

I have an HTML form that I currently submit using the form action attribute and a php script. The post request is successful, but it reloads the page, and I want to avoid that. The project uses Laravel/Blade PHP templates.

<form 
  id="update-form" 
  method="post"
  action="{{ route('update', ['id' => $user['id']]) }}"
>
@csrf
...
</form>

<button type="submit" form="update-form">Submit</button>

To prevent page from reloading, I would like to send the post request using JavaScript and use preventDefault(). I tried to use fetch, but as I am not familiar with Laravel I don't understand which parameter I should send. For example, what is the body?

There are lots of posts on that subject, but most are outdated and result in jQuery solutions, which is not an option for me.

Here is what I tried:

document.querySelector('#update-form').addEventListener('submit', (e) => {
  e.preventDefault();
  fetch("{{ route('update', ['id' => $user['id']]) }}", { 
    method: 'post'
  }).then(() => console.log('success'));
});

Dharman · Accepted Answer · 2020-09-28 09:57:58Z

6

You can use FormData object to get form field and values then send it with fetch in body field.

FormData takes <form></form> element as first param and parses its fields and values

document.querySelector('#update-form').addEventListener('submit', (e) => {
  e.preventDefault();
  var formData = new FormData(e.target);
  fetch("{{ route('update', ['id' => $user['id']]) }}", { 
    method: 'POST',
    body: formData
  }).then(() => console.log('success'));
});

edited Sep 28, 2020 at 9:57

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 28, 2020 at 9:51

Malkhazi Dartsmelidze

4,9924 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JpLc63 · Accepted Answer · 2021-06-29 12:33:16Z

0

When a form is submitted with JavaScript to a route action, e.g. <form action={{route('something')}}> The data(form inputs) are passed as a {$key => $value} object. Therefore, in your controller, you can get the data individual input field by the name attribute of input.

answered Jun 29, 2021 at 12:33

JpLc63

11 bronze badge

Collectives™ on Stack Overflow

Submit Laravel form using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related