Set Value of Input Using Javascript Function
JavascriptInputYuiValidationJavascript Problem Overview
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 ""
?
Javascript Solutions
Solution 1 - Javascript
Try... for YUI
Dom.get("gadget_url").set("value","");
with normal Javascript
document.getElementById('gadget_url').value = '';
with JQuery
$("#gadget_url").val("");
Solution 2 - Javascript
document.getElementById('gadget_url').value = '';
Solution 3 - Javascript
The following works in MVC5:
document.getElementById('theID').value = 'new value';
Solution 4 - Javascript
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.
Solution 5 - Javascript
document.getElementById('gadget_url').value = 'your value';
Solution 6 - Javascript
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.
Solution 7 - Javascript
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).