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
– Sangeet Menon, Commented Apr 18, 2011 at 8:50

Jess · Accepted Answer · 2023-02-07 14:34:30Z

608

Javascript

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

jQuery

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

YUI

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

edited Feb 7, 2023 at 14:34

Jess

25.4k21 gold badges134 silver badges158 bronze badges

answered Apr 18, 2011 at 8:52

Sangeet Menon

9,9238 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timo Over a year ago

goodForm.coolinput.value='foo', is not possible, why cant I use it instead of addressing the input directly by id`? Wait, here..

Calum · Accepted Answer · 2011-04-18 08:49:22Z

87

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

answered Apr 18, 2011 at 8:49

Calum

5,3361 gold badge24 silver badges27 bronze badges

1 Comment

Kamil Kiełczewski Over a year ago

@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

Bogdan Mates · Accepted Answer · 2015-09-02 11:04:24Z

7

The following works in MVC5:

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

answered Sep 2, 2015 at 11:04

Bogdan Mates

5664 silver badges8 bronze badges

2 Comments

qbantek Over a year ago

javascript != MVC5

Matthew Nichols Over a year ago

And yet he gave the correct answer. There are newbies that will find this question based on this answer.

thug-gamer · Accepted Answer · 2016-05-19 12:24:35Z

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, 2016 at 12:24

thug-gamer

3656 silver badges9 bronze badges

Comments

Nimantha · Accepted Answer · 2021-11-28 16:04:31Z

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, 2021 at 16:04

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Jun 22, 2016 at 19:11

BSounder

1349 bronze badges

1 Comment

Pogrindis Over a year ago

Just for brevity and future reference, all id's on the page should ALWAYS be unique

WRFan · Accepted Answer · 2025-07-24 04:48:12Z

arguments[0] = Element.prototype.querySelector.call(document.body, "#gadget_url")
HTMLElement.prototype.removeAttribute.call(arguments[0], "value")

or:

arguments[1] = Object.prototype.__lookupSetter__.call(HTMLInputElement.prototype, "value")
arguments[1].call(arguments[0], String())

note that when changing the "value" attribute's value through javascript, chrome browsers may behave very erratically if using the back button to return to the page (even if the cache is cleared, or you are testing a page on your hard disk, i.e., the page is indeed reloaded!). The new input value attribute will indeed be set to a new value (you can see the new value in F12 Developer Tools or can query it programmatically thru javascript), but the browser will still visually display the old value. It seems to happen if you set the value by using "value = ''" or by using the "_lookupSetter_", which is the same thing, or if you are creating the input on the fly with a "value" attribute present and a value assigned to it:

SomeParentNode.innerHTML = '<input class="jump-input" type="text" value="' + Math.random() + '">'

Use removeAttribute / setAttribute instead. however, this won't help if you type something into the input field manually, then return to the page by using the back button, 'cause the browser prefills the value you typed before (even if cache cleared or using a local page on your hard disk), so you need to wait until it does that before removing the attribute:

setTimeout.call(self, function()
{
    //Element.prototype.setAttribute.call(arguments[0], "value", "")

    arguments[0].value = ""

}, 1, arguments[0])

Kamil Kiełczewski · Accepted Answer · 2022-04-23 14:17:50Z

-6

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, 2022 at 14:17

answered Apr 12, 2019 at 14:10

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

Set Value of Input Using Javascript Function

7 Answers 7

Javascript

jQuery

YUI

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Shortest

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Javascript

jQuery

YUI

1 Comment

1 Comment

2 Comments

Comments

1 Comment

Comments

Shortest

Comments

Linked

Related