Question

Ok, so I’m finally getting into jQuery but having what I hope are basic issues getting my functions to run. I have 3 input fields on a page, two of them are disabled. My goal is that when the user enters text into the first input field, the values of the other 2 fields would be changed on keyup() to the value entered by the user in the first input field.

I tested my function on jsfiddle.net before I was able to put it on my page and it worked fine in all browser, but once i move that function to my web page and run it the function won’t work. It seems to work in Firefox 3.6 but not any versions after that. It also doesn’t work in chrome or IE for some reason either.

jsfiddle Demo

jQuery

$(document).ready(function () {
    var $title2 = $("#title2"),
        $title3 = $("#title3");
    $("#cheader").keyup(function () {
        $title2.val(this.value);
        $title3.val(this.value);
    });
    $("#cheader").blur(function () {
        $title2.val(this.value);
        $title3.val(this.value);
    });​
});

CSS

.nobox {
border: none;
text-align: center;
color: #000;
background-color: #fff;
text-decoration: underline; 
font-weight: bold;
font-size: 14px;
}

HTML

<input type="text" onClick="if(this.value=='Click Here To Enter Text'){this.value=''}else{this.value=this.value}" onBlur="if(this.value==''){this.value='Click Here To Enter Text'}" style="width:250px;" class="nobox" value="Click Here To Enter Text" maxlength="35" id="cheader"/>

<input type="text" style="width:250px;" class="cheader nobox" value="Click Here To Enter Text" id="title2" disabled disabled="disabled"/>​

<input type="text" style="width:250px;" class="cheader nobox" value="Click Here To Enter Text" id="title3" disabled disabled="disabled"/>​

Answer 1

I changed $(document).ready(function () { to $(function() { and now everything works fine on all browsers. Not really sure why but it works now 😀

$(function() {
var $title2 = $("#title2"),
    $title3 = $("#title3");

$("#cheader").keyup(function() {
    $title2.val(this.value);
    $title3.val(this.value);
});
$("#cheader").blur(function() {
    $title2.val(this.value);
    $title3.val(this.value);
});