Level 73
Dec 15, 2019
7
Level 3
Live update of Form data without "Submit" button
So I'm working on a basic CRM. My Laravel projects up to this point have included forms that are submitted with a standard "Submit" button.
I am now working on a CRM type concept that includes task lists. The user needs to be able to see their task list and check off items when completed. Basic checkboxes. But I'd like for the user to be able to do this without clicking any sort of "Save" or "Submit" button.
I have seen a few tutorials about AJAX, Vue JS, JQuery, Javascript, React, etc. and none of them seem very clear on this concept.
As a beginner/intermediate Laravel developer, what is the easiest way for me to go about adding this to my skillset?
I appreciate all suggestions. Thanks!
Level 67
@wallyj What you are trying to do is a front-end enhancement. If you want to be able to tackle things like this, learning some JavaScript or Vue is what you'll need to learn to build this type of functionality in.
Vue is not as complex as it seems. Laravel scaffolds this for you for the most part. I would create a Vue component, or use the Example component provided by Laravel and see if you can just get that to display your table, or whatever, and execute a function when you check the box for your list. You'll need to pass the index id to the function so you can make an Axios call.
2 likes
Level 75
Jquery, axios, plain js can do it, it's called a change event. Data is updated in the background via an ajax request.
You should really take one or more JS tutorials. But you need to decide which.
However, if user is "changing" several items (fields), it's still good to have an update whatever button. The update can be done without page refresh. Again things like five behind the scenes updates vs one is up to you.
Level 61
what is the easiest way for me to go about adding this to my skillset?
Try and error until you get it right.
Level 122
My recommendation would also be Livewire
Its a little mind bending to get your head around at first, but it means you can just work on php code and not have to learn a lot of Javascript.
2 likes
Level 61
Only thing with Livewire is that it is going through a lot of changes since it is not v1 but I had no crashes with it so I guess you can say it is stable.
1 like
Level 3
LiveWire looks VERY promising!! I was just wondering the other day why it has to be so complicated to use JS just to do what we all know needs to be done... ie, Javascript uses AJAX/JQuery?Axios to send the request in the background rather than refreshing the page. I was surprised that Laravel had not baked in some well known Javascript functionality into the backend to make it easier on the frontend.
And then I discover LiveWire... I didn't realize that Laravel is now reading my mind the same way Facebook and Alexa are... :)
Thanks everyone!
Please or to participate in this conversation.