last day (15 days later) » 

9:15 AM
1
A: Simple pug html form, make it send immediately on change of value rather than wait for submit button?

kmgtI have a solution with javascript. // check if there are input[type="number"] to prevent errors if (document.querySelector('input[type="number"]')) { // add event for each of them document.querySelectorAll('input[type="number"]').forEach(function(el) { el.addEventListener('change', funct...

 
(1) It have to be placed once. (2) If you want to avoid closest and the structure of the form won't change then you can hit the form with e.parentNode.parentNode.parentNode.parentNode.submit();. So you climb up the tree.
I updated the answer e.currentTarget.closest('form').submit() is the thing (currentTarget = the current target for the event).
I guess it's annoying when the form submits and the hole page is reloading. An ajax request behind the scenes would be better, right?
 
I was just looking at that issue! Wow, AJAX is a lot for me to wrap my head around :O I did find a simple solution. I add e.preventDefault() just before the .submit() line ...
one point, in safari anyway I noticed that "change" works strictly with the "small arrows" we discussed. to get changes on the text, something like "input" or perhaps "keyUp" seems to work. not a big deal, I just use the ones needed!
 
Out of interest which backend language do you use?
 
My backend is node.js. I use things like "passport". DB is MYSQL. Runs on AWS. (You can see some of my example code here! stackoverflow.com/a/57642380/294884 )
"You could use jQuery and save lines of code but I like it pure" Funny, I feel exactly the same way based on my limited knowledge
 
The js has to be loaded after the markup or in head section. Otherwise it won't find html elements in DOM. Or wrap the js into document.addEventListener("DOMContentLoaded", function(event) {}); DOMContentLoaded. Every bowser is same on that.
It can't work with e.preventDefault(). It will stop the submit for sure.
 
9:15 AM
EVERYTHING WORKING PERFECTLY.
 
Ah ok. You made it with ajax. Great. I thought you still hang on form submit.
 
no, my comments about the curiosity in safari with prevent etc, only applied to the "basic system" before ajax. I am now 1000% ajax :)
i simply added a new endpoint, /changelive (or I guess /changeajax would be a sensible name) and I use that with the ajax route! booyah !
 
To bring more light to the function ajax(obj): you see the props beginning with a.(a.method = 'GET'; and so on). They have default values e.g. GET. However you can overwrite them in the call e.g. ajax({url: '/url', method: 'PUT', async: false, data: {}}). Have fun!
 
totally got it...
Ah basically (this is mac-safari) in the HTML, it looks like the updates have to be "button", not "submit". otherwise, the first passage of code ("check if there are forms to prevent errors") will not add submits. (perhaps on safari it wont let you add a submit if one is not there already) Awesome!
 
Wait wait. You are talking about addEventListener('submit',... right? This binds the onsubmit event. In case the user clicks the submit button, the form will be send, the ajax will be ignored. So the event handler is catching any type of submitting the form (by the way enter key is also possible to submit), stops it and let ajax do the request.
 
9:15 AM
understood exactly: I think it may be a safari screwup. (1) if I have NO dubmit (so "button" instead for the button, or just no button) and (2) I have the code addEventListener('submit',... in fact (with safari anyway) annoyingly, return keys still "send the page". Could there be a typo in those four lines of code regarding "el" and "e" ??
WAIT : I'm getting this error when i hit return TypeError: e.currentTarget.preventDefault is not a function. (In 'e.currentTarget.preventDefault()', 'e.currentTarget.preventDefault' is undefined)
thats really weird - dunno what could be doing it
TBC the bahaviour is identical whether I have "submit" or "button" buttons. when I tap "return" on a field, I get that error. e.currentTarget.preventDefault is not a function
 
Try e.preventDefault() or after ajax call just return false;
 

last day (15 days later) »