javascript function not defined error on click on a button

Question

Imagine below MVC parent model:

Model:

Namespace MyProject.SampleModel
{
     public class ViewModelExample {
           public FirstModel BoolValues { get; set; }
           public SecondModel NamesValues { get; set; }
     }
}

Namespace MyProject.SampleModel
{
   public class FirstModel
   {
     public bool MyBoolean1 { get; set; }
     public bool MyBoolean2 { get; set; }
   }

   public class SecondModel
   {
     public string FirstName { get; set; }
     public string LastName { get; set; }
   }
}

View:

@model MyProject.SampleModel.ViewModelExample

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, htmlAttributes: new { id = "Myform" }))
{

   (...)

   @Html.CheckBoxFor(m => m.BoolValues.MyBoolean1)

   (...)

    <input id="submitButton" type="button" value="Add" onclick="InitiateSequence();" />

   (...)
}

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

      (...)

      function InitiateSequence()
      {
            // Do some stuff
      }

      (...)
      function ScriptSample() {

            if(@(Model.BoolValues.MyBoolean1 ? "true" : "false")
            {
                 // It's true, do some stuff
            }
            else
            {
                 // It's false, do some stuff
            }
      }

</script>

Controller:

public ActionResult MyAction(ViewModelExample model)
        {
            model.FirstModel = new TestsModel(); // I do not instantiate SecondModel as in the view for this controller i do not use it

            return View(model);
        }

Page is loading correctly, but when I click on the button it says javascript function InitiateSequence is not defined.... what's happening?

PSL · Accepted Answer · 2013-09-21 20:58:16Z

4

That could be because most possibly the function appears where it is not supposed to be. Also don't use inline attributes to bind the handlers, use event binding instead of inline handler.

<input id="submitButton" type="button" value="Add" />

and

<script type="text/javascript">

  (...) //whatever code

  $(function(){
     $('#submitButton').on('click', InitiateSequence);
  });

answered Sep 21, 2013 at 20:58

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

Willy Over a year ago

I have modified my code and now using your solution when I click the button, nothing happens, function it is not called.

Willy Over a year ago

ok, now it works, i have seen in the console an error related to a missing parentheses. Now your solution works, many thanks!

Willy Over a year ago

I will do. I am newbie in web application development, only some weeks doing it... ;)

Willy Over a year ago

One thing more: do you know if there is a method to debug, establish breakpoints in javascript code?or only the console is the only way?

PSL Over a year ago

I use chrome console and place a line debugger; in javascript. and when you open it up in chrome console press f12 it will launch with all debug tools for you and will break in your debug statement for you to debug.

Collectives™ on Stack Overflow

javascript function not defined error on click on a button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related