Develop Reference

Can't change attribute of input tag using Javascript

I have an <input> tag which I would like to change programmatically. The input don't have inner text, it save its values on aria attributes.
So, here is the <input>:
<input type="text" id="foo" aria-valuemin="1" aria-valuemax="10" autocomplete="off" role="spinbutton" aria-valuenow="1">
Consider that we save the tag to the following bla variable:
var bla = document.getElementById("foo");
Below is a list of commands I tried using. But none of them worked.
bla.value = 2;
bla.value = "2";
bla.setAttribute("aria-valuenow",2);
bla.setAttribute("aria-valuenow","2");
Any ideas why? The id of the element is unique, I checked it.
I am working on somebody's else code. Could it be possible that other developers changed the behavior of the <input>?

As pointed out my other users, please use unique Id while naming the id of an element. Below is the solution to your problem using setAttribue().
var input = document.getElementById("input");
input.setAttribute("aria-valuenow",2); // To set attribute to input element
console.log(input.hasAttribute('aria-valuenow')) // To check if input has the mentioned attribute
console.log(input.getAttribute('aria-valuenow')); // To access the value of the attribute
<input type="text" id="input" aria-valuemin="1" aria-valuemax="10" autocomplete="off" role="spinbutton" aria-valuenow="2">

You can use,
document.getElementById("mytext").value = "My value";

how do I append the inserted URL into image after the inputed text?

I have written the code but the jquery code isn't getting executed.
Enter URL :<input type="text">
<button id="btn"> continue
</button>
<div contenteditable="true"
id="bod">
Click on this text to start writting</div>
$(document).ready(function(){
$("btn").click(function(){
$("bod").append($('input').html('<img alt="" src="'+$(this).val()+'">'))
})
});
Also I wanna use "input" or "textarea" instead of since I wanna tag that field with ng-model(angularjs).

I believe this is what you're trying to accomplish:
For one, you are trying to reference your elements with an id selector without #.
$("bod") should be $("#bod"), etc. '#" indicates an ID.
And also the way you were retrieving the value for input was all wrong.
Also if you want the value of one item, use an ID. Otherwise you'll get an array just using a generic element selector. I gave your input an id, so you weren't just trying to get a value off of $('input')
(I put a placeholder image address in your value, you can remove that)
Also view the snippet full screen. The small view makes it look like your text is being removed, but it's not really. It's just that when the img is appended, the baseline for everything is lower than the window in the snippet viewer.
$(document).ready(function(){
$("#btn").click(function(){
$("#bod").append('<img alt="" src="'+$('#inp').val()+'">');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter URL :<input id="inp" type="text" value="http://placehold.it/300">
<button id="btn">continue</button>
<div contenteditable="true" id="bod">Click on this text to start writting</div>

If i have understood your requirement correctly then JQuery code should be like this:
$(document).ready(function(){
$("#btn").click(function(){
var bodElem = $("#bod");
var url = $("input").val();
$('<img alt="" src="'+ url +'">').insertAfter(bodElem);
});
});

Change label text for multiple inputs

I have a dynamic page that can have a lot of input[type="file"] fields. I need to change the label of every input once a file is selected.
So, for each input, if:
Empty: text = "upload";
File selected: text = name of file.
Here is a sample of HTML:
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>
I know how to do this for a single input, using this code:
$('label[for="upload-qm1"] span').text($(this).val());
However, I don't know how many input fields I will have on my page. I tried something like this:
$(this).parent('label').find('span').text($(this).val());
but unfortunately it doesn't work. Any help on how I can get a method for changing all input fields?

You can use DOM traversal to find the span related to the input which was changed. Try this:
$('input:file').change(function() {
$(this).prev('span').text($(this).val());
})
Working example

The most of the code you tried ist corret.
The problem is that you have set a parameter for the parent() function.
Try something like this:
$(this).parent('label').find('span').text($(this).val());
Also make sure that $(this) is the input field not the label itself,
if you click on the label $(this) is the label.

$('input[type="file"]').on('change', function() {
id = $(this).attr('id');
console.log("change event")
var file = $('#'+id).val().split('\\').pop();
if(file!='') {
$('label[for="'+id+'"] span').text(file)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>

How to erase the text input that the user typed using JavaScript

<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.

.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');

Here's a pure javascript solution:
document.getElementById('keyword').value = '';

Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.

Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";

Jquery Setting Value of Input Field

I have an input field and i am trying to set its value using its class
<form:input path="userName" id="userName" title="Choose A Unique UserName" readonly="${userNameStatus}" class="formData"/>
Which renders as:
<input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/>
I am using the following jquery but this does not seem to work. Can someone tell me where i am going wrong.
$(".formData").html("");
Edited JQuery Function that handles the event
$('#reset').click(function (){
$("#userNameErr").text("");
$('#badgeNoErr').text("");
$(".errors").html("");
$(".formData").val("");
});
nor is $(".formData").text("") or $(".formData").val("") working.

This should work.
$(".formData").val("valuesgoeshere")
For empty
$(".formData").val("")
If this does not work, you should post a jsFiddle.
Demo:
$(function() {
$(".resetInput").on("click", function() {
$(".formData").val("");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="formData" value="yoyoyo">
<button class="resetInput">Click Here to reset</button>

If the input field has a class name formData use this :
$(".formData").val("data")
If the input field has an id attribute name formData use this :
$("#formData").val("data")
If the input name is given use this :
$("input[name='formData']").val("data")
You can also mention the type. Then it will refer to all the inputs of that type and the given class name:
$("input[type='text'].formData").val("data")

change your jquery loading setting to onload in jsfiddle . . .it works . . .

use this code for set value in input tag by another id.
$(".formdata").val(document.getElementById("fsd").innerHTML);
or
use this code for set value in input tag using classname="formdata"
$(".formdata").val("hello");

You just write this script. use input element for this.
$("input").val("valuesgoeshere");
or by id="fsd" you write this code.
$("input").val(document.getElementById("fsd").innerHTML);

$('.formData').attr('value','YOUR_VALUE')

Put your jQuery function in
$(document).ready(function(){
});
It's surely solved.