0

This gives an error and breaks the function.

The error says "Cannot read property 'onchange' of undefined" even though I'm trying to test for onchange to prevent an error.

Here's my function:

function ClearAndRun(element) {
   $el = $("select, input");
   $next = $el.eq($el.index(element) + 1);
   for(i=$el.index($next);i<$el.length;i++) {
     if($next.get(0).onchange != null) {
        $next.val("");
        $next.change;
     }
   $next = $el.eq($el.index(element) + i);
   }
}

<input onchange="ClearAndRun(this)">

I've tried a few different was of testing for an onchange value and they all seem to give that error. Thanks for your help!

nohope4you
  • 25
  • 6

3 Answers3

0

Use $.each and .change doesn't call change, you need parentheses 

$.each($element, function(){
  if(this.onchange){
    $(this).val("");
    $(this).change();
  }
});
Andrei Zhytkevich
  • 8,039
  • 2
  • 31
  • 45
  • note that this won't get all event handlers for the `change` event. – Daniel A. White Jun 17 '16 at 12:03
  • Shouldn't it check if there is at lease one? and if there is, it clears the value and trigger `change`. – Andrei Zhytkevich Jun 17 '16 at 12:05
  • also, won't this run on the first element, which means it will clear the value of the element that called the function... I want it to only clear the elements that come after the element that called the function. – nohope4you Jun 17 '16 at 12:07
  • The original question was about the error `Cannot read property 'onchange' of undefined`. I believe, the error appeared on the line `$next.get(0).onchange`, because `$next` doesn't exist. Looks like I didn't get the logic behind `$next = $element.eq($element.index(element) + 1); for(i=$element.index($next);i<$element.length;i++) {` – Andrei Zhytkevich Jun 17 '16 at 12:11
  • I've edited my function so hopefully this clears up any confusion. – nohope4you Jun 17 '16 at 12:19
0

I want to set the values to nothing

This will reset the value to nothing for each select/input

$element.each(function() {
    if ($(this).val() != null) {
        $(this).val("");
        $(this).change();
    }
});

...and run their onchange functions which are prepared for a nothing answer

this will be invoked because you have called .change() on one of those elements

$element.on('change', function() {
    $('the_form').reset()
});

It sounds like when that .change() method is invoked for any element, you want to reset the form...

If these answers are reset and there onchange functions are run, it essentially resets the form...

(Example taken from here)

This is as far as I understand your question, I am unsure when you started talking of other child elements...

...this may hide or show spans based on their answers

But, this code will reset all values of input/select and call their .change() method. The problem with this, what I can see, is that for every element, you are resetting the form which will put additional strain on the DOM and is not ideal.

N.B: If you are not setting the value of these elements, you can use text() instead which will check the text inside the element

The HTML onchangeattribute only seems to be possible for select elements. From references I cannot see if this is possible with input's as well...

Execute a JavaScript when a user changes the selected option of a element:

(Credit w3schools)

Community
  • 1
  • 1
wmash
  • 4,032
  • 3
  • 31
  • 69
  • this code is supposed to clear values of inputs and selects that appear after the one that called the function, regardless of them having a value or not. It's supposed to reset inputs and selects that have onchange functions so anything that changes the web form is cleared out and the user has to redo those fields. – nohope4you Jun 17 '16 at 12:11
  • I am confused what you are asking. All elements have an `onchange` (`.change()`) method. Are you attempting to reset all values of these elements? – wmash Jun 17 '16 at 12:15
  • I want to set the values to nothing and run their onchange functions which are prepared for a nothing answer. Some of the elements that would come after a element that calls this may hide or show spans based on their answers. if these answers are reset and there onchange functions are run, it essentially resets the form and the correct branching can be displayed to the user. – nohope4you Jun 17 '16 at 12:18
  • Please see updated answer. Hopefully this will help in some way as I do not understand fully what you are trying to achieve – wmash Jun 17 '16 at 12:47
0

So here's what I ended up needing:

function ClearAndRunFuncs(element) {
   $el = $("input[name!=''][onchange!=''], select[name!=''][onchange!='']");
   for(i=$el.index(element)+1;i<$el.length;i++) {
            $el.eq(i).val("");
            $el.eq(i).change();
   }
}

I didn't realize you could put conditions based on attributes on the selector. So this prevents any errors because no fields that are missing onchanges, or even name values are being processed by this function.

nohope4you
  • 25
  • 6