Fill in a form with jQuery

Question

I am trying to use jQuery to fill in a form with some default values.

The form is contained in a div which has an id. In fact every element has an id, I did so just to be able to quickly select every piece of the form using $("#id") syntax.
Here is the form:

<div id="panel" style="position: absolute; left: 190px; top: 300px; width: 400px; height: 300px; border: medium groove brown; background: none repeat scroll 0% 0% black; z-index: 100; color: white;">
<form id="form_coord_0">  
X <input type="text" style="height: 25px; font-size: 10px;" size="2" name="X" id="coordX_0"/>  
Y <input type="text" style="height: 25px; font-size: 10px;" size="2" name="Y" id="coordY_0"/>  
<input type="button" id="edit_0" value="M"/>  
<input type="button" id="remove_0" value="-"/>  
<input type="button" id="add_0" value="+"/>  
<input type="button" id="go_0" value="go!"/>  
</form>
</div>

I need to set the coordX_0 text field with some value, let's say: 123.

I thought I could do

$("#coordX_0").text.value = 123;

But it doesn't seem to work. Any hint?

Thank you Jasper, I'm quite a novice with jQuery (well, even with js:D ) I didn't even know the val() method existed. — nick2k3, Jan 18 '12 at 17:23
@nick2k3 The first thing I did when learning jQuery was to go through the API documentation and see all the functions available and the demos of how to use them. I did that so I could have at least a basic idea of what the framework will allow me to do. For instance the `.val()` function can take a function as an argument if you want to handle multiple form inputs at once, you can see my answer below for an example of how to do this: http://stackoverflow.com/questions/8914161/fill-in-a-form-with-jquery/8914281#8914281 — Jasper, Jan 18 '12 at 17:42
@Jasper my confusion was because when I googled how to edit a form with javascript I always found something like document.form[0].text.value= "123". While with jquery I have to look for some function that does that.. I only have to practice:) — nick2k3, Jan 18 '12 at 17:57
@nick2k3 That will select the input named `text` in the first form in the DOM (notice the zero index means first) and set it's value to `123`. In your case you would use `document.forms[0]['coordX_0'].value = "123";` Here is a demo: http://jsfiddle.net/86UdQ/. I still recommend reading the docs thouroughly, there **will** be some things in there you didn't know existed. — Jasper, Jan 18 '12 at 17:59

score 33 · Accepted Answer · answered Jan 18 '12 at 17:03

33

You can use the val() function to set input values

$("#coordX_0").val(123);

Incidentally, your original code could be made to work by setting value property on the actual, underlying dom element. You access the dom element by indexing your jQuery results:

$("#coordX_0")[0].value = 123;

answered Jan 18 '12 at 17:03

Adam Rackis

82,527
56
270
393

Thank you very much! That solved it. Do you or anyone happen to know where I can find an extensive documentation on what method I can call on such objects? (something like the JavaDoc but for javascript and DOM). – nick2k3 Jan 18 '12 at 17:18
Well the jQuery docs are fantastic - but native dom docs?? - not off the top of my head. – Adam Rackis Jan 18 '12 at 17:20
3

@nick2k3 Try the MDN docs: https://developer.mozilla.org/en/DOM/HTMLInputElement. Just search Google (or whatever) for `[the property I want to know about] MDN` where `[the property I want to know about]` would be something like, `element value`. – Jasper Jan 18 '12 at 17:44

Jasper · Answer 2 · 2012-01-18T17:16:44.980

All the answers are the exact same so I thought I'd post something different:

var inputs_to_values = {
    'coordX_0' : 'some value',
    'coordY_0' : 'some other value',
    'edit_0'   : 'N',
    'remove_0' : '_',
    'add_0'    : '-',
    'go_0'     : 'stop?'
};
$('#form_coord_0').find('input').val(function (index, value) {
    return inputs_to_values[this.id];
});

You can pass .val() a function, whatever is returned from the function for each element will be the new value:

A function returning the value to set.

this is the current element.

Receives the index position of the element in the set and the old value as arguments.

Source: http://api.jquery.com/val

The above code expects that each input will have a property in the inputs_to_values object so you can convert the ID of the input to the new value for that input.

Here is a demo: http://jsfiddle.net/zYfpE/

I was searching something like that, i was sure there was a native method in jquery, but this anyway is enough compact. Really like it. — AndreaBogazzi, Nov 24 '14 at 11:22
This short and easy to extend method is just what I needed and think it answers the question perfectly. Thanks! — Yatko, Jan 09 '15 at 17:47

score 3 · Answer 3 · answered Jan 18 '12 at 17:03

3

To set the value of an input field its

$("#coordX_0").val(123)

answered Jan 18 '12 at 17:03

Pastor Bones

7,183
3
36
56

score 3 · Answer 4 · answered Jan 18 '12 at 17:04

3

$("#coordX_0").val("123");

You need the quotes too I think. Although it might work both ways.

answered Jan 18 '12 at 17:04

Tom

12,776
48
145
240

score 3 · Answer 5 · answered Jan 18 '12 at 17:04

3

Try this instead, using the val method:

$("#coordX_0").val('some string or number');

answered Jan 18 '12 at 17:04

Matt Fenwick

48,199
22
128
192

score 3 · Answer 6 · edited Jan 18 '12 at 17:08

3

Just write:

$("#coordX_0").val(123);

In jQuery, text is a function to extract text in dom.

edited Jan 18 '12 at 17:08

Jasper

75,717
14
151
146

answered Jan 18 '12 at 17:05

Lai Yu-Hsuan

27,509
28
97
164

score 2 · Answer 7 · answered Jan 18 '12 at 17:04

2

Use val method to set the text of any input field.

$("#coordX_0").val(123);

answered Jan 18 '12 at 17:04

ShankarSangoli

69,612
13
93
124

score 2 · Answer 8 · answered Jan 18 '12 at 17:04

2

use the val function

$("#coordX_0").val("123");

answered Jan 18 '12 at 17:04

Jason

15,915
3
48
72

score 1 · Answer 9 · answered Jan 18 '12 at 17:04

1

Use this instead:

$("#coordX_0").val("123");

answered Jan 18 '12 at 17:04

Kyle Trauberman

25,414
13
85
121

Fill in a form with jQuery

9 Answers9

Linked