Change textbox value using jQuery

Question

I usually don't program in jQuery so I'm a big newbie. I got an HTML input form (type=text) and I want that when website is loaded, the value of the textbox should change.

I got this in fill-in.php file:

<script src="fill.js"></script>
<body>
<label class="txtlabel">Username/Email</label>
<input id="username" value="Moin" type="text" name="login-username">
<label class="txtlabel">Kennwort</label>
<input id="kennwort" value="Passwort" type="password" name="login-password">
</body>

And in fill.js file I wrote this:

$(document).ready(function(e) {
    $('#username').val('some random text')
});

fill.js is correctly linked to my fill-in.php file.

Can someone give me a hint where I made a mistake?

Cheers

whether jQuery library is included.... check your browser console to see whether there are any errors — Arun P Johny, Oct 02 '13 at 12:22
f12 is your friend, what is the error in the console if there is one? — epascarello, Oct 02 '13 at 12:22
It's working just fine, even with the wrong markup and the missing semicolon. http://jsfiddle.net/jTX7X/ — emerson.marini, Oct 02 '13 at 12:24
@AdamWolski the right question is: Why not? It doesn't cause any harm to keep the markup well formed. — emerson.marini, Oct 02 '13 at 12:25
There is an error: "Uncaught ReferenceError: $ is not defined". What about this? Have I to write `jQuery` instead of `$`? — roemel, Oct 02 '13 at 12:26
@MelanciaUK http://stackoverflow.com/questions/13232121/closing-html-input-tag-issue — Adam Wolski, Oct 02 '13 at 12:31
@MelanciaUK + html5 spec http://www.w3.org/html/wg/drafts/html/master/forms.html#the-input-element — Adam Wolski, Oct 02 '13 at 12:32
@MelanciaUK yes, this is valid in XHTML, but it is not necessary with html5 — Adam Wolski, Oct 02 '13 at 12:33
@AdamWolski Not every single browser/browser version renders HTML5. So, I still prefer to keep them closed. It's just an extra character anyway. — emerson.marini, Oct 02 '13 at 12:33

score 2 · Answer 1 · answered Oct 02 '13 at 12:28

2

Add this in your header section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

answered Oct 02 '13 at 12:28

Satinder singh

10,100
16
60
102

score 1 · Accepted Answer · answered Oct 02 '13 at 12:27

1

If you're planning to use jQuery, the very first thing you need is the library. You can reference it from a CDN or download it:

http://jquery.com/download/

<!-- CDN reference (Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="fill.js"></script>

answered Oct 02 '13 at 12:27

emerson.marini

9,331
2
29
46

Ah nice. Didn't know this because I usually not programming in jQuery. Thanks :) – roemel Oct 02 '13 at 12:29
1

No worries dude. It happens. – emerson.marini Oct 02 '13 at 12:30

score 1 · Answer 3 · answered Oct 02 '13 at 12:28

1

you need to include the jquery library before the fill.js, you can download it from the jQuery site or use a CDN version as given below

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>

answered Oct 02 '13 at 12:28

Arun P Johny

384,651
66
527
531

Change textbox value using jQuery

3 Answers3