Javascript trim whitespace on click

Question

I have an email form field. On click, it executes this javascript ...

$(document).on('click', '#add_delegate', function() {
  RegistrationHelper.added_delegate = true;
  // var button = $(event.target);
  var button = $(this);
  var uri = button.data('url');
  if (typeof uri === 'undefined') {
    return false;
  }
  var input = $('#email_search');
  var data = {email:input.val()};
  data.text().replace(/ /g,'');
  var spinner = $('#delegate_add_spinner');

  spinner.css({display:'inline-block'});

  $.ajax({type:'POST', url: uri, data:data}).success(function(card) {

    var html = $(card);
    var data_id = html.attr('data-id');
    var existing_elem = $('.mini_addresscard[data-id=' + data_id + ']');
    if (existing_elem.length < 1) {

      input.popover('hide');
      // this is in a seperate timeout because IE8 is so damn stupid; it crashes if run directly
      setTimeout(function () {
        $('#address_cards').append(html);
        var last_card = $('#address_cards div.mini_addresscard').last();
        //last_card.get(0).innerHTML = card;
        // html.attr("id", 'sdklfjaklsdjf');
        last_card.css({display:'none'}).show('blind');
      }, 10);

    } else {

      var background = existing_elem.css('background');
      existing_elem.css({'background':'#FFFFAC'});
      existing_elem.animate({
        'background-color':'#EBEDF1'
      }, {
        complete: function() {
          existing_elem.css({background:background});
        }
      });
      // var border_color = existing_elem.css('border-color');
      // existing_elem.css({'border-color':'#EFF038'});
      // existing_elem.animate({'border-color':border_color});
    }

  }).complete(function(data) {
    spinner.hide();
  }).error(function(data) {
    var input = $('#email_search');
    input.popover("destroy");

    var error = 'Please try again later'; //incase something crazy happens
    if(data.status == "422"){
        error = 'You cannot add yourself as a supervisor.';
      }
    if(data.status == "404" ){
        error = 'Could not find anyone with that email address.';
      }
    add_popover(input, error);
    input.popover('show');
  });

  return false;
});

My goal is to trim the whitespace before the AJAX request

So as you can see in the code above I added the line

data.text().replace(/ /g,'');

... but now it renders that button useless. In other words the button does nothing when clicked.

Answer 1

The trim supposed to remove the spaces at beginning and end of the input:

var input = $('#email_search').val();
input = input.replace(/^\s+/, '').replace(/\s+$/, '');

Answer 2

Since you're using jQuery, why not make use of .trim():

This:

var data = {email:input.val()};
data.text().replace(/ /g,'');

Becomes:

var data = {email:$.trim(input.val())};