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 : stackoverflow.com/questions/12627443/jquery-click-vs-onclick — JazZ
– JazZ, Commented May 26, 2017 at 19:42

quirimmo · Accepted Answer · 2017-05-26 20:14:52Z

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, 2017 at 20:14

answered May 26, 2017 at 19:55

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

7 Comments

orim Over a year ago

I got: "Uncaught TypeError: addButton.removeEventListener is not a function"

quirimmo Over a year ago

sorry I was still pointing to your old code, that variable should be "button" I already updated the code

orim Over a year ago

What should I pass as the second argument to the removeEventListener? An empty function?

orim Over a year ago

Works, an empty function it was. Please update your answer so I could accept it.

quirimmo Over a year ago

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?

|

Oluwafemi Sule · Accepted Answer · 2017-05-26 20:11:22Z

1

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.

edited May 26, 2017 at 20:11

answered May 26, 2017 at 19:50

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Comments

thanksd · Accepted Answer · 2017-05-26 20:05:27Z

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, 2017 at 20:05

answered May 26, 2017 at 19:55

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

3 Comments

orim Over a year ago

Odd, this does not work for me. I click the "Add" button and nothing happens

thanksd Over a year ago

The example fiddle doesn't redirect the page it logs a string in the console to show that the handler has changed

thanksd Over a year ago

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.

Collectives™ on Stack Overflow

Update button onClick url from AJAX in Laravel

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related