Access variable from event handler in javascript object

Question

I'm trying to create a jQuery class to validate input fields when a form is submitted. I have different forms into the same page and I need to create a validator instance for each form.

HTML

<form method="post" action="index.php" id="form1">
  <input type="submit" value="Send" />
</form>

<form method="post" action="index.php" id="form2">
  <input type="submit" value="Send" />
</form>

<script type="text/javascript">
var form1 = new DataValidator('#form1');
var form2 = new DataValidator('#form2');
</script>

I would access object variables from submit event handler, but when I print this.selector variable, I see an undefined value.

JavaScript

function DataValidator(selector)
{
  this.form = $(selector);
  this.selector = selector;

  $(selector).submit(function() 
  {
    alert('submit ' + this.selector);
    return false;
  });
}

Recommended read: this on MDN

katranci
– katranci

2014-05-29 09:27:21 +00:00
Commented May 29, 2014 at 9:27 — katranci
– katranci, Commented May 29, 2014 at 9:27

Barmar · Accepted Answer · 2014-05-29 09:28:34Z

4

this is not a local variable, so it doesn't get saved in closures. You need to save it in a local variable. In jQuery event handlers, this is always bound to the target of the event.

function DataValidator(selector)
{
  this.form = $(selector);
  this.selector = selector;
  var self = this;

  this.form.submit(function() 
  {
    alert('submit ' + self.selector);
    return false;
  });
}

edited May 29, 2014 at 9:28

answered May 29, 2014 at 9:22

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Comment

King King Over a year ago

in fact this in the OP's code is just the form object, not the object created by DataValidator constructor.

Collectives™ on Stack Overflow

Access variable from event handler in javascript object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related