warpig's avatar
Level 12

Update without a submit button

Im trying to update a resource without the need of having a submit button, what's the best approach for this? I have Vue installed but I know nothing about ajax requests or how to connect to a database using Vue and apparently many people resource to ajax and Vue.

EDIT

Seems that Livewire is able to do these kinds of things too but I don't know if by installing it I'll lose some files.

0 likes
9 replies
jlrdw's avatar

Use javascript.

<a href="<?php echo DIR; ?>logout" onclick="event.preventDefault(); document.getElementById('logout-         form').submit();">  logout  </a>
            
 <form id="logout-form" action="<?php echo DIR; ?>logout" method="POST" style="display: none;">
       <?php echo csrf_field(); ?>
  </form>

Just example of how laravel logout is done, but blade is used.

warpig's avatar
Level 12

onclick="event.preventDefault(); document.getElementById('logout- form').submit();" change this accordingly to my table and controller and call it a day?

warpig's avatar
Level 12

One question, can you access a route through JavaScript? So in my case since I want to hit the update() I can do it with an anchor tag?

tykus's avatar

In this scenario, there is a form element with the spoofed PUT method and action attribute to the URI. All you are doing here is swapping the button you didn't want with a link ¯\_(ツ)_/¯

1 like
tykus's avatar

how to connect to a database using Vue

You don't; your Vue instance can send an XHR request to your Laravel (or other) API which updates the database

Im trying to update a resource without the need of having a submit button

Do you want to update whenever the form input loses focus? You can add the keyup listener on the input targetting the enter key and handle the event in the component. Have a look at the TodoMVC example here. In your case, the addTodo method would send an XHR request to your API instead.

1 like
Snapey's avatar

Seems that Livewire is able to do these kinds of things too but I don't know if by installing it I'll lose some files.

What?

warpig's avatar
Level 12

Livewire, is it something that is recommended to install at the very beginning of the project because Im afraid it will overwrite files? Maybe it doesn't matter but, technically I don't know what Livewire is other than a PHP/Laravel library that uses Javascript to run components, similar to Vue, only that it has that nice blade template support I don't know.

warpig's avatar
Level 12

Nothing wrong with it @jlrdw, the use-case is just going to be a bit different that's all. Take a look at this: https://imgur.com/a/zMG22aU EDIT that's why I wanted to consider the options I can have, one of the most popular is using Vue but Livewire is another way I think, my preference is Livewire but im fine working with Vue nothing against Vue, he-he!

Please or to participate in this conversation.