jquery click method is not attached to button

Question

I have asp.net mvc 5 application but I can't get this fairly simple script to work. I am new to this MVC (I am WebForms guy). Basically jQuery is not attaching .click() event to the button to post data to the underlying controller.

Can somebody pinpoint what I am doing wrong?

The View (HelloWorld/Index.cshtml):

@model HelloWorld.Models.HelloWorldModel

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
</head>
<body>
    <div>
    @using (Html.BeginForm("Welcome","HelloWorld",FormMethod.Post, new {id = "myhelloform"})){

    <span>Name:</span> 
        @Html.TextBoxFor(model=> model.Name)
    <button id="btnPost" type="button">Post</button>
    }
    </div>

    <script>
    var testform = function () {
        var init = function () {
            $("#btnPost").on("click", function () {
                alert("anybody there??");
                submitForm();
            });
        };

        var submitForm = function () {
            $.hit({
                url: "@Url.Action("Welcome", "HelloWorld")",
                data: $("#myhelloform").serializeArray(),
                success: function (response) {
                    alert(response.Message);
                }
            });
        };

        return {
            Init: init
        };
    };

    </script>
</body>
</html>
</html>

The Controller (Controllers/HelloWorldController.cs):

using System.Web.Mvc;
namespace HelloWorld.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult Welcome()
        {
            return Json("test");
        }
    }
}

The Model (Models/HelloWorldModel.cs)

namespace HelloWorld.Models
{
    public class HelloWorldModel
    {
        public string Name { get; set; }
    }
}

It looks like your init function is never being called... Add an alert to the top of that function to check. — Jeff Watkins
– Jeff Watkins, Commented Jan 31, 2015 at 16:07
@JAT - that seems to work, thanks - i.e. getting rid of testform and init. Please post as answer. Next problem occurs now submitForm() is invoke but nothing happens, i.e. alert(response.Message) never fires? — Sha
– Sha, Commented Jan 31, 2015 at 16:28

The One · Accepted Answer · 2015-01-31 16:30:52Z

2

Delete the variables testform and init and it works (Also need to use $( document ).ready as @Tbseven mentions):

    $( document ).ready(function() {
                $("#btnPost").on("click", function () 
                                 {
                                    alert("anybody there??");

                                 });
});

Fiddle: https://dotnetfiddle.net/HCdFXM

answered Jan 31, 2015 at 16:30

The One

4,7266 gold badges39 silver badges61 bronze badges

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

Comments

Tbseven · Accepted Answer · 2015-01-31 16:07:58Z

1

You have to place your jquery code inside next function:

$( document ).ready(function() {
  // Here
});

answered Jan 31, 2015 at 16:07

Tbseven

1208 bronze badges

1 Comment

Sha Over a year ago

Even that does not work. Same problem in both IE 11 and FF 35.

Jeff Watkins · Accepted Answer · 2015-01-31 16:20:49Z

1

$( document ).ready(function() {
   $("#btnPost").on("click", function () {
       alert("anybody there??");
       submitForm();
   });

   function submitForm () {
         $.hit({
             url: "@Url.Action("Welcome", "HelloWorld")",
             data: $("#myhelloform").serializeArray(),
             success: function (response) {
                 alert(response.Message);
             });
    };
});

answered Jan 31, 2015 at 16:20

Jeff Watkins

6,35718 silver badges19 bronze badges

2 Comments

Sha Over a year ago

Thanks @JeffWatkins - JAT beat you to it though, so I awarded the answer to him.

Jeff Watkins Over a year ago

No problem, I'm just here to help (and to keep my eye in, as I rarely get chance to code nowadays).

immayankmodi · Accepted Answer · 2015-01-31 16:24:08Z

1

You can use input instead of button and there is no need to add click event for that.

<input type="submit" id="btnPost" />

answered Jan 31, 2015 at 16:24

immayankmodi

8,63010 gold badges41 silver badges56 bronze badges

4 Comments

Sha Over a year ago

I could but basically I simplified my question here on SO - the reason for using <button> in this case is because of some css rules related to only <button>.

The One Over a year ago

I agree, you should catch submit event +1

immayankmodi Over a year ago

@Sha: you can add that too for that via applying this simple rule: input[type="submit"] { //your rule here.. }

Sha Over a year ago

Yes but in this project it would require a lot of work to switch from button to input... but thanks anyways.

Collectives™ on Stack Overflow

jquery click method is not attached to button

4 Answers 4

Comments

1 Comment

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related