Set Value of Input Using Javascript Function

Question

I'm currently using a YUI gadget. I also do have a Javascript function to validate the output that comes from the div that YUI draws for me:

Event.on("addGadgetUrl", "click", function(){
    var url = Dom.get("gadget_url").value;  /* line x ------>*/
    if (url == "") {
        error.innerHTML = "<p> error" /></p>";
    } else {
        /* line y ---> */ 
        /*  I need to add some code in here to set the value of "gadget_url" by "" */
    }
}, null, true);

Here is my div:

<div>
<p>URL</p>
<input type="text" name="gadget_url" id="gadget_url" style="width: 350px;" class="input"/>
<input type="button" id="addGadgetUrl" value="add gadget"/>
<br>
<span id="error"></span>
</div>

As you can see my question is, how can I set the value of gadget_url to be ""?

Try...`Dom.get("gadget_url").set("value","");`...I'm not quite sure though — Sangeet Menon, Apr 18 '11 at 08:50

score 576 · Accepted Answer · edited Feb 07 '23 at 14:34

576

Javascript

document.getElementById('gadget_url').value = '';

jQuery

$("#gadget_url").val("");

YUI

Dom.get("gadget_url").set("value","");

edited Feb 07 '23 at 14:34

Jess

23,901
21
124
145

answered Apr 18 '11 at 08:52

Sangeet Menon

9,555
8
40
58

`goodForm.coolinput.value='foo'`, is not possible, why can`t I use it instead of addressing the input directly by `id`? Wait, [here](https://stackoverflow.com/a/42860401/1705829).. – Timo May 14 '21 at 07:18

score 87 · Answer 2 · answered Apr 18 '11 at 08:49

87

document.getElementById('gadget_url').value = '';

answered Apr 18 '11 at 08:49

Calum

5,308
1
22
27

@Alastair I confirm - that is not using YUI. However OP in title write "Set Value of Input Using Javascript Function" (not YUI function) so answer meet question requirements – Kamil Kiełczewski Sep 16 '19 at 06:38

score 7 · Answer 3 · answered Sep 02 '15 at 11:04

7

The following works in MVC5:

document.getElementById('theID').value = 'new value';

answered Sep 02 '15 at 11:04

Bogdan Mates

520
4
8

17

javascript != MVC5 – qbantek Feb 22 '16 at 18:38
8

And yet he gave the correct answer. There are newbies that will find this question based on this answer. – Matthew Nichols May 09 '16 at 12:38

score 4 · Answer 4 · answered May 19 '16 at 12:24

4

Depending on the usecase it makes a difference whether you use javascript (element.value = x) or jQuery $(element).val(x);

When x is undefined jQuery results in an empty String whereas javascript results in "undefined" as a String.

answered May 19 '16 at 12:24

thug-gamer

355
6
9

score 2 · Answer 5 · edited Aug 24 '20 at 11:53

2

document.getElementById('gadget_url').value = 'your value';

edited Aug 24 '20 at 11:53

frianH

7,295
6
20
45

answered Sep 25 '18 at 07:29

SMD

21
4

score 1 · Answer 6 · edited Nov 28 '21 at 16:04

1

I'm not using YUI, but my issue was that I had duplicate ID's on the page (was working inside a dialog and forgot about the page underneath).

Changing the ID so it was unique allowed me to use the methods listed in Sangeet's answer.

edited Nov 28 '21 at 16:04

Nimantha

6,405
6
28
69

answered Jun 22 '16 at 19:11

BSounder

134
9

Just for brevity and future reference, all id's on the page should **ALWAYS** be unique – Pogrindis Jun 23 '16 at 08:32

Kamil Kiełczewski · Answer 7 · 2022-04-23T14:17:50.727

-5

Shortest

gadget_url.value=''

addGadgetUrl.addEventListener('click', () => {
   gadget_url.value = '';
});

<div>
  <p>URL</p>
  <input type="text" name="gadget_url" id="gadget_url" style="width: 350px;" class="input" value="some value" />
  <input type="button" id="addGadgetUrl" value="add gadget" />
  <br>
  <span id="error"></span>
</div>

This is the shortest working solution (JSFiddle).

edited Apr 23 '22 at 14:17

answered Apr 12 '19 at 14:10

Kamil Kiełczewski

85,173
29
368
345

Set Value of Input Using Javascript Function

7 Answers7

Javascript

jQuery

YUI

Shortest

Linked

Related