Update button onClick url from AJAX in Laravel

Question

I have a simple form with a "Submit" button and an additional "Add" button in blade template. On form submit there is an ajax callback to a controller which validates provided value. Based on the returned result from the controller, I'd like to change the "Add" button onClick event. Here is blade snip:

<button id="theId" type="button" >Add</button>

Relevant ajax pice:

$.ajax({
        ...
        success: function(result){
           //Update onClick for the add button
           addButton.onclick=function () {
               //location.href = 'www.example.com';
               window.location="www.example.com";
           };
           addButton.html("aNewName");
        }
}

Based on all the sources either location.href or window.location should redirect me to a different page (in my case just a different subpage) but it does not. After hours of research I thought that I get a wrong button or sth is wrong with the ajax itself but then I added addButton.html line and this works well. What do I do wrong here?

Try the `click()` function of jQuery : https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick — JazZ, May 26 '17 at 19:42

quirimmo · Accepted Answer · 2017-05-26T20:14:52.753

2

Get the button, remove eventually previous click events, add the new event using the http/https prefix, change the text of the button

success: function(result){
   var button = document.querySelector('#theId');
   button.addEventListener('click', function () {
       window.location = 'https://www.google.it';
   });
   button.innerHTML = "my new button text";
}

edited May 26 '17 at 20:14

answered May 26 '17 at 19:55

quirimmo

9,800
3
30
45

I got: "Uncaught TypeError: addButton.removeEventListener is not a function" – orim May 26 '17 at 19:58
sorry I was still pointing to your old code, that variable should be "button" I already updated the code – quirimmo May 26 '17 at 19:59
What should I pass as the second argument to the removeEventListener? An empty function? – orim May 26 '17 at 20:04
Works, an empty function it was. Please update your answer so I could accept it. – orim May 26 '17 at 20:06
That should be the old function you used but in this case also setting it to null should be ok if you are using it only there. Can you try with the new changed code too please? – quirimmo May 26 '17 at 20:07
This is not working, "TypeError: Cannot set property 'onclick' of null". Btw: As I showed in my example, there was no onClick action until the ajax callback. – orim May 26 '17 at 20:13
if there is not you can just use the add event listener omitting that code – quirimmo May 26 '17 at 20:14

Oluwafemi Sule · Answer 2 · 2017-05-26T20:11:22.107

From the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Registering_on-event_handlers, a handler registered via an on* attribute will be available via the corresponding on* property, but not the other way around.

What this means is that the onclick attribute of the div remains the old event handler in HTML. To keep sanity, always register event listeners with the addEventListener method.

thanksd · Answer 3 · 2017-05-26T20:05:27.973

0

It looks like you are trying to set a jQuery object's onclick property to a function, which is not the right way to set a click event handler in jQuery.

You should use the jQuery object's click method to set a click handler. And use the off method to remove the previous handler:

addButton.off('click');
addButton.click(function () {
  window.location="https://www.example.com";
})

Here's a working fiddle.

edited May 26 '17 at 20:05

answered May 26 '17 at 19:55

thanksd

54,176
22
157
150

Odd, this does not work for me. I click the "Add" button and nothing happens – orim May 26 '17 at 20:01
The example fiddle doesn't redirect the page it logs a string in the console to show that the handler has changed – thanksd May 26 '17 at 20:02
JsFiddle doesn't let you share fiddles where the window location gets changed, so I can't show you, but just put this `window.location="https://www.example.com";` inside the click handler. It works. – thanksd May 26 '17 at 20:06

Update button onClick url from AJAX in Laravel

3 Answers3