0

I have a form that I want to auto save based on the inputs changing value, but am having problems with my selector. My problem seems to be specifically with the inputs I am trying to exclude as the function still fires when those inputs change.

$('#OrderDetailsTabs').on('change',
    'form[id^="frmWorkOrderHdr"] input[type=text],form[id^="frmWorkOrderHdr"] input[type=number], form[id^="frmWorkOrderHdr"] select, form[id^="frmWorkOrderHdr"] textarea, input:not("#WOHdr_FinishedGoodsItemId_AutoComplete, .itemSelectorCategory1, .itemSelectorCategory2")',
    function () {
    saveWOHdr(event, this);
})

So for example, when input #WOHdr_FinishedGoodsItemId_AutoComplete changes, the saveWOHdr event is still firing and the this object is indeed the #WOHdr_FinishedGoodsItemId_AutoComplete input.

The selector I have so far is what I came up with after reading this other SO answer.

I think the inclusionary selector string I have could also be cleaned up to reduce the repetitive form[id^="frmWorkOrderHdr"]parent qualifier...but I didn't want to get too fancy until I got it at least performing the way I want.

Community
  • 1
  • 1
crichavin
  • 4,672
  • 10
  • 50
  • 95

1 Answers1

0

Give them a common class. 

<input class="save-auto some-other-style-class">

Makes the selector sooooo simple

$('#OrderDetailsTabs').on('change','.save-auto', saveWOHdr);

Much easier to read and much simpler to see those elements for troubleshooting

charlietfl
  • 170,828
  • 13
  • 121
  • 150