Trim textboxes and texareas on submit prevent form to submit

Question

I am trimming all textboxes and textareas on submit. It does not work for all view pages.

I have taken simple html inputs + kendo DropDownList + kendo AutoComplete in my form.

Below is my submit method which doesn't work, when there are Kendo UI control on my form.

$('input[type="submit"]').click(function () {
   $('input[type=text], textarea').each(function () {
     if($(this).val()!=''){
       $(this).val($.trim($(this).val())); //Exception in chrome: paused on exception typeerror. Msg: undefined in not function.
     }
   });
});

I don't know what's wrong. I found this issue specific to chrome browser.

maybe there somewrong with this `$(this).val($.trim($(this).val()));`, try to add `alert('test')` after that if its not alerting the above code is wrong; and if($(this).val()) would be find (no need to have this `!=''`) — bumbumpaw, Aug 05 '14 at 04:21
Are you using document.ready in your view? Have you checked by putting an `alert` inside `submit click scope`? — RajeshKdev, Aug 05 '14 at 05:33
Have you checked your Browser Console? The Same workout is working fine in Chrome. Take a look at [Fiddle](http://jsfiddle.net/xw452/1/) — RajeshKdev, Aug 05 '14 at 05:39
@RJK I am using document.ready() and submit is inside it. In chrome it pause on exception 'typeerror'. message: undefined is not a function. — Dhwani, Aug 05 '14 at 05:39
I think you have a problem in defining the `click` event may be — Just code, Aug 05 '14 at 06:03

score 2 · Answer 1 · answered Aug 05 '14 at 04:30

It it just the kendo controls? Their DropDownList for instance renders this (from the demo)

<input id="color" value="1" data-role="dropdownlist" style="display: none;">

Note there is no type=text attribute so your selector is probably not including this.

score 2 · Answer 2 · answered Aug 05 '14 at 05:48

It seems there is no problem in your normal HTML and Js code. Check other piece of codes in your project, Weather its blocking your code.

Probably check the Kendo UI Syntax / Format / Attributes for Html controls. It might be a problem.

Take a look at my fiddle workout. I have Tested its working fine.

There is no exception Like -- //Exception in chrome: paused on exception typeerror

score 0 · Accepted Answer · answered Aug 06 '14 at 03:46

I don't know what's wrong. So I updated the function as below:

$('input[type="submit"]').click(function () {
   $('#textbox1,#textbox2,#textarea1').each(function () {
     if($(this).val()!=''){
       $(this).val($.trim($(this).val()));
     }
   });
});

I wrote ids of all textboxes and textarea which I need to trim inside each. And it works fine. But still I have question why generalize function didn't work.

Trim textboxes and texareas on submit prevent form to submit

3 Answers3