[RESOLVED]Help with Ajax Post

Hi,

I’m trying out this Ajax form submit without page refresh for the first time, and am having success posting the values into the database, but the script on click takes me to the action URL and shows balnk instead of performing the function at the background

Here is my code

<form action="@Href("~/forms/recommend")" method="post" id="recommend">
    <input type="hidden" name="feedid" value="@published.FeedID">
    <input type="hidden" name="userid" value="@WebSecurity.GetUserId(WebSecurity.CurrentUserName)">
    <input type="hidden" name="fname" value="@user.Fname">
<input type="hidden" name="title" value="@Html.Raw(published.Title)">
<input type="hidden" name="pUserID" value="@published.UserID">
<input type="hidden" name="url" value="@Request.Url.LocalPath">

 <small class="menu-label">   <span class="fa fa-heart-o"> </span><b><input class='btnns' type="submit" name="recommend" value="Recommend"></b></small>
   </form>

<script>
    $('input[type="recommend"]').submit(function (e) {
        $.ajax({
            type: "POST",
            url: "~/forms/recommend",
            data: $("#recommend").serialize(),
            dataType: "html",
            success: function (response) {
               console.log(repsonse)
            }
 
        }); 
          e.preventDefault();
        return false;
    });
</script>

When I clcik on the submit button it takes me to localhost:xxxx/forms/recommend which was what I was avoiding in the first place

Move e.PreventDefault() to a position above the ajax method call:

$('input[type="recommend"]').submit(function (e) {
    e.preventDefault();
    $.ajax({
I’ve done every adjustment possible, but it’s still executing the query and directing me to the action url

Just noticed – you have the wrong selector in you event handler.  It should be input[name="recommend"], not [type="recommend"]

Leave a Reply