CODEWITHSUNDEEP
javascriptjquerylaravel
zerociudo
zerociudo

Reputation: 377

Javascript onclick function undefined

I have problem with onclick function

My link

<a id="reply" onclick="replyFunction({{$review->id}})"class="right-button">Reply</a>

Function:

function replyFunction(id){
  $('#reply').closest('div').append( $('.replyform'));
  $('.replyform').show();
  $('.replyform').attr('action', "/reply/submit/" + id);              
}

Somehow this doesnt work I am getting

(index):155 Uncaught ReferenceError: replyFunction is not defined at HTMLAnchorElement.onclick

I have included the file and it should work i think.

What I am trying to do is to pass id to the function. Basically a user presses reply button onclick function should send parent id and with javascript I should change form that user will fill action with the parent id so I get the right route (I am working with laravel).

P.S. If there is an easier way to do this that I am missing would be glad to hear it.

Upvotes: 2

Views: 7301

Answers (2)

denns
denns

Reputation: 1121

If your are using jQuery anyway you should set the eventlistener there. And as replyFunction is a callback, it will get an event as parameter and not the given value.

You should

<div>
  <a id="reply" data-reviewId="{{$review->id}}" class="right-button">Reply</a>
</div>

and

(function ($) {
    $('#reply').on('click',function(e){
        e.preventDefault(); // do not follow the link or move to top
        var replyId = $(this).attr('data-reviewId');
        $(this).closest('div').append( $('.replyform'));
        $('.replyform')
            .show()
            .attr('action', "/reply/submit/" + replyId);
    })
})(jQuery);

BUT Thats not what you intend to do, I guess. I updated the codepen.

If you want to add a form and dynamically change its action you should clone a dummy and add it to the desired place, if there are more than one form on the page. If there is only one form, you can give it an id and change the attribute via the id.

Upvotes: 3

S. Stumm
S. Stumm

Reputation: 290

You could do it only on the script side:

var reply = document.getElementById("reply"); // $("#reply")
var review = document.getElementById("review"); // $("#reply")

And then reference your function onclick

reply.onclick = () => { replyFunction(review); };

Upvotes: 0

Related Questions