Change submit button value on click with AJAX

Question

So I have a like button in my index view which looks like this. It calls the function "PostLike" which increases the number of likes by inserting a new row in my "like" table.

<form asp-action="PostLike" asp-route-id="@item.Id">
      <input id="btn" type="submit" value="Like" class="btn btn-primary">
</form>

What I want to do is to change the value of the button from like to unlike when it's clicked, without refreshing the page and keeping the value after refreshing the app. Any ideas? I know I have to use some AJAX function for this to work, but I don't know how it should be implemented.

Karim Fahmy · Accepted Answer · 2022-04-23 14:30:04Z

1

you can make an ajax call to check the success or error request status then change the value on the success method

ArticleLikeObj is the object to be sent to the controller to save like article action and it’s a view model class containing properties like ArticleId and current logged user

ajax call

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">


<input id="@item.ArticleId" onClick="Submit_clicked(this.id)" value="Like" class="btn btn-primary">

function Submit_clicked(clicked_id)
  {
      let ArticleLikeObj = {ArticleId:clicked_id, UserName:"Doe"};
      SendRequest(ArticleLikeObj);
  }

function SendRequest(ArticleLikeObj) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("action name","controller name")',
                    data: ArticleLikeObj,
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: "json",
                    success: function (response) {
                        document.getElementById("Submit").value = "Liked";
                    },
                    error: function () {
                        alert("Error!");
                    }
                });
            }

edited Apr 23, 2022 at 14:30

answered Apr 23, 2022 at 12:56

Karim Fahmy

2151 silver badge11 bronze badges

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

4 Comments

Bianca Tărău Over a year ago

Could you explain to me please, what should i put instead of "//data"? What is CreateFromVM exactly? Thats the part i did not understood.

Karim Fahmy Over a year ago

@BiancaTărău I’ve updated the answer and if it is solved "accept" answer

Bianca Tărău Over a year ago

Well the problems is that I have a like button for each article. And the articles are displayed in my view through a foreachloop. So how do i get the specific data, foreach article?

Karim Fahmy Over a year ago

@BiancaTărău I’ve updated the answer also update your question with previous comment and if it is solved "accept" answer

Collectives™ on Stack Overflow

Change submit button value on click with AJAX

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related