将这部分Javascript与另一部分结合起来？

Question

Since I am a complete n00b in every aspect when it comes down to JS, JQuery and PHP, I will be needing some help.

Probably it's really simple for someone with basic knowledge of JS, but it ain't that simple for me.

I have the following part in my index.php:

<form method="get" id="searchform" action="http://wwwapps.ups.com/WebTracking/track?HTMLVersion=5.0&loc=nl_NL&Requester=UPSHome&WBPM_lid=homepage%2Fct1.html_pnl_trk" target="_blank" >
<input type="text" value="" name="trackNums" id="ups" />
<input type="hidden" name="track.x" value="Traceren">
<input type="hidden" name="loc" value="nl_NL">
<input type="image" src="afbeeldingen/search_btn.png" id="searchsubmit" />
</form>

In the .js file I have this:

$(document).ready(function() {
    $("#ups").attr("value", "UPS Trackingscode...");
    var text = "UPS Trackingscode...";
    $("#ups").focus(function() {
        $(this).addClass("active");
        if($(this).attr("value") == text) $(this).attr("value", "");
    });
    $("#ups").blur(function() {
        $(this).removeClass("active");
        if($(this).attr("value") == "") $(this).attr("value", text);
    });
});

I added this (at the top of) the .js file:

function removeSpaces(string) {
    return string.split(' ').join('');
}

But when I add this part to the index.php (form-section) it doesn't work:

<input type="text" onblur="this.value=removeSpaces(this.value);">

I guess I have to incorporate it to the current JS as well, but I have no clue how to do this or what to change / add.

What I am trying to achieve here, is that whenever I paste a trackingcode into the text field, it should automatically remove the spaces (if there are any, because a bad copy/paste action).

It's not for any special website, but just for my personal use, so I can track packages more easily from my own starting page.

I hope I explained it correctly. Probably it takes less than a minute for someone with basic JS skills, but for me it's very difficult. :(

Answer 1

The function itself is working well. It's solely a scoping issue. You have two options:

1) You move your function outside the $(document).ready(function() { }) part

2) You remove the onblur="this.value=removeSpaces(this.value);" from your element, discard your function and write an according event-handler

// identifier or class needed to target the element, i use id="target"
$("#target").on("focusout",function(){
   this.value = this.value.replace(/\s*/g,"");
});

The second way (using event handlers) is considered the cleaner and better way. But valid are both.

Sidenotes:

to remove spaces from your string, it's better to use the replace method with an according regular expression /\s*/g (replace zero or more whitespaces \s* in your entire string (globally g) ).

Instead of $(this).attr("value") use $(this).val().