How to bind the value in html from JS? [duplicate] - javascript

How would you set the default value of a form <input> text field in JavaScript?

This is one way of doing it:
document.getElementById("nameofid").value = "My value";

I use setAttribute():
<input type="text" id="example"> // Setup text field
<script type="text/javascript">
document.getElementById("example").setAttribute('value','My default value');
</script>

if your form contains an input field like
<input type='text' id='id1' />
then you can write the code in javascript as given below to set its value as
document.getElementById('id1').value='text to be displayed' ;

2023 Answer
Instead of using document.getElementById() you can now use document.querySelector() for different cases
more info from another Stack Overflow answer:
querySelector lets you find elements with rules that can't be
expressed with getElementById and getElementsByClassName
EXAMPLE:
document.querySelector('input[name="myInput"]').value = 'Whatever you want!';
or
let myInput = document.querySelector('input[name="myInput"]');
myInput.value = 'Whatever you want!';
Test:
document.querySelector('input[name="myInput"]').value = 'Whatever you want!';
<input type="text" name="myInput" id="myInput" placeholder="Your text">

If you are using multiple forms, you can use:
<form name='myForm'>
<input type='text' name='name' value=''>
</form>
<script type="text/javascript">
document.forms['myForm']['name'].value = "New value";
</script>

Try out these.
document.getElementById("current").value = 12
// or
var current = document.getElementById("current");
current.value = 12

The answer is really simple
// Your HTML text field
<input type="text" name="name" id="txt">
//Your javascript
<script type="text/javascript">
document.getElementById("txt").value = "My default value";
</script>
Or if you want to avoid JavaScript entirely: You can define it just using HTML
<input type="text" name="name" id="txt" value="My default value">

<input id="a_name" type="text" />
Here is the solution using jQuery:
$(document).ready(function(){
$('#a_name').val('something');
});
Or, using JavaScript:
document.getElementById("a_name").value = "Something";
Happy coding :)

The simple answer is not in Javascript the simplest way to get the placeholder is through the place holder attribute
<input type="text" name="text_box_1" placeholder="My Default Value" />

document.getElementById("fieldId").value = "Value";
or
document.forms['formId']['fieldId'].value = "Value";
or
document.getElementById("fieldId").setAttribute('value','Value');

It's simple; An example is:
<input type="text" id="example"> // Setup text field
<script type="text/javascript">
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>

If the field for whatever reason only has a name attribute and nothing else, you can try this:
document.getElementsByName("INPUTNAME")[0].value = "TEXT HERE";

<form>
<input type="number" id="inputid" value="2000" />
</form>
<script>
var form_value = document.getElementById("inputid").value;
</script>
You can also change the default value to a new value
<script>
document.getElementById("inputid").value = 4000;
</script>

This part you use in html
<input id="latitude" type="text" name="latitude"></p>
This is javaScript:
<script>
document.getElementById("latitude").value=25;
</script>

You can also try:
document.getElementById('theID').value = 'new value';

Direct access
If you use ID then you have direct access to input in JS global scope
myInput.value = 'default_value'
<input id="myInput">

The following code work perfectly well:
var $div = ('#js-div-hour input');
$div.attr('value','2022/01/10');

Related

how to convert input text to uppercase while typing using javascript

In Below code, I want to change the input field to uppercase dynamically i.e. while entering the letters.
I know the style option i.e. text-transform but I want to do it using javascript.
I am practicing javascript concepts and as a part of learning, I want to do it.
<html>
<body>
<input type="text" size="40" id="name" name="name">
</body>
</html>
var upCase = getElementById('id').value.toUpperCase();
document.getElementById('id').value = upCase;
I believe you can just call the .toUpperCase() function on the innerHTML of the class or id you are trying to select. If you are using a class you can use .getElementsByClassName().
Edit:
I missed onKeyUp, this: onkeyup="this.value = this.value.toUpperCase();"
should work if you only want to use this in the one place.
You need to look the following post
Change Input to Upper Case
You can combine onkeyup event:
https://www.w3schools.com/jsref/event_onkeyup.asp
With toUpperCase method:
https://www.w3schools.com/jsref/jsref_touppercase.asp
How about this:
$("#input , #textarea").on('input', function(evt) {
var input = $(this);
var start = input[0].selectionStart;
$(this).val(function (_, val) {
return val.toUpperCase();
});
input[0].selectionStart = input[0].selectionEnd = start;
});
http://jsfiddle.net/22Jap/
Actually I got the answer but i dint found any answer like this thats why I have asked this question.
Thanks for your reply guys..
Below is the answer:
<!DOCTYPE html>
<html>
<body>
<input type="text" size="40" id="name" oninput="convertToUpperCase()">
<!-- Vishal Biradar-->
<script>
function convertToUpperCase(){
var name=document.getElementById("name").value;
if(name!=""){
name=name.toUpperCase();
}
document.getElementById("name").value=name;
}
</script>
</body>
</html>
I'm wondering why there is no answer here.
There is a css that answers your question
text-transform: uppercase
You just need to add that style to your text input.
<input type="text" name="LastName" style="text-transform: uppercase;">
function converttoUpperCase(e)
{
var pPosition = e.target.selectionStart;
e.target.value=e.target.value.toUpperCase();
e.target.selectionStart=pPosition;
e.target.selectionEnd=pPosition;
}
function checkOnInput(e)
{
if(hasLowerCase(e.target.value))
converttoUpperCase(e);
}
function hasLowerCase(str)
{
return (/[a-z]/.test(str));
}
<input oninput="checkOnInput(event);" type="text" size="40" id="name" name="name">

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

Pass input tag value to as href parameter

I want to pass the value of input tag as parameter(quantita) in href.
Should i use javascript to do this?Sorry for my english
Thanks
<input type="text" id="qta_field" value="${item.value}"/>update
The easiest way to do it with link and without any library:
<input type="text" id="qta_field" value="${item.value}"/>
update
To send data from an input to the server, you should use a form.
<form action="updateItem">
<input id="qta_field" name="quantita" value="${item.value}">
<input type="hidden" name="codice" value="${item.key.codice}">
<button>update</button>
</form>
set an id or a class to your <a> for example : <a id='myA'>
So you can use jQuery like this :
jQuery(document).ready(function(){
jQuery('qta_field').change(function(){
var tmpVal = jQuery('#qta_field').val();
var tmphref = jQuery('#myA').attr('href');
tmphref = tmphref+tmpVal;
jQuery('#myA').attr('href',tmphref);
});
});
You can use the document.queryselector to locate and manipulate the href attribute with js
Example:
input = document.querySelector('input');
a = document.querySelector('a');
a.setAttribute('href',a.getAttribute('href')+input.value);
<input type="text" id="qta_field" value="test"/>
update

How to make a input field readonly with JavaScript?

I know you can add readonly="readonly" to an input field so its not editable. But I need to use javascript to target the id of the input and make it readonly as I do not have access to the form code (it's generated via marketing software)
I don't want to disable the input as the data should be collected on submit.
Here is the page I have added in the below suggestion with no luck so far:
https://www.pages05.net/engagedigital/inputReadOnly/test?spMailingID=6608614&spUserID=MTI5MDk4NjkzMTMS1&spJobID=Nzk4MTY3MDMS1&spReportId=Nzk4MTY3MDMS1
Make sure you use <body onload="onLoadBody();"> for anyone using this in the future.
You can get the input element and then set its readOnly property to true as follows:
document.getElementById('InputFieldID').readOnly = true;
Specifically, this is what you want:
<script type="text/javascript">
function onLoadBody() {
document.getElementById('control_EMAIL').readOnly = true;
}
</script>
Call this onLoadBody() function on body tag like:
<body onload="onLoadBody">
View Demo: jsfiddle.
The above answers did not work for me. The below does:
document.getElementById('input_field_id').setAttribute('readonly', true);
And to remove the readonly attribute:
document.getElementById('input_field_id').removeAttribute('readonly');
And for running when the page is loaded, it is worth referring to here.
document.getElementById('TextBoxID').readOnly = true; //to enable readonly
document.getElementById('TextBoxID').readOnly = false; //to disable readonly
document.getElementById("").readOnly = true
Try This :
document.getElementById(<element_ID>).readOnly=true;
<!DOCTYPE html>
<html>
<body>
<input id="balloons" type="number" step="10" min="1" max="1000" size="25" value="60" >
<input id="bloquear" type="checkbox" onclick="validate()" />
<p id="demo1"></p>
<p id="demo2"></p>
<script type=text/javascript>
function validate(){
document.getElementById("bloquear").checked == (bloquear.checked == 1 ? false : true );
document.getElementById("demo1").innerHTML = bloquear.checked;
document.getElementById("demo2").innerHTML = balloons.readOnly;
if (balloons.readOnly) document.getElementById("balloons").removeAttribute("readonly");
else balloons.setAttribute("readonly", "readonly");
}
</script>
</body>
</html>
Here you have example how to set the readonly attribute:
<form action="demo_form.asp">
Country: <input type="text" name="country" value="Norway" readonly><br>
<input type="submit" value="Submit">
</form>
I think you just have readonly="readonly"
<html><body><form><input type="password" placeholder="password" valid="123" readonly=" readonly"></input>

Grabbing value and appending to textarea with Javascript?

I'm stuck!
I have this simple form:
<p><input type="text" name="hometown" id="hometown" size="22" /></p>
<p><textarea name="comment" id="comment"></textarea></p>
What I need is to append the input value from #hometown to textarea! It mustn't replace text already written there. In the best case, it'd just print at the end of whatever is written on ''submit'' click.
This is how far I've got with my Javascript, but nothing seems to work.
function addtxt(input) {
var hometown = document.getElementById('hometown').value;
var obj=document.getElementById(comment)
var txt=document.createTextNode(lol)
obj.appendChild(txt)
}
Textarea has value property to operate with its contents. Just use += to append text:
document.getElementById("comment").value +=
document.getElementById("hometown").value;
Try this
var oldval=$('#comment').val();
var newval=$('#hometown').val();
S('#comment').val(oldval+' '+newval);
Here's an example for you I've put on JSFiddle, using pure javascript and the onClick listener
http://jsfiddle.net/vyqWx/1/
HTML
<input type="text" name="hometown" id="hometown" size="22" />
<textarea name="comment" id="comment"></textarea>
<input type="submit" onClick="doMagic();">
JS
function doMagic(){
var homeTown = document.getElementById("hometown").value;
document.getElementById("comment").value += homeTown;
}

Categories

Resources