Set input type value javascript

Установите значение текстового поля ввода с помощью JavaScript/jQuery

В этом посте мы обсудим, как установить значение текстового поля ввода в JavaScript и jQuery.

1. Использование JavaScript

С JavaScript идея состоит в том, чтобы получить доступ к родному value свойство и установить его значение:

JS

HTML

В качестве альтернативы вы можете использовать setAttribute() метод для установки значения атрибута в текстовом поле ввода.

JS

HTML

2. Использование jQuery

С помощью jQuery вы можете использовать .val() метод для установки значения текстового поля ввода, как показано ниже. Обратите внимание, что этот метод не запускает событие изменения, но вы можете вручную вызвать событие изменения после установки значения с помощью .change() или же .trigger(«change») метод.

JS

HTML

Это все, что касается установки значения текстового поля ввода в JavaScript и jQuery.

Средний рейтинг 5 /5. Подсчет голосов: 23

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно

Источник

Input Text value Property

The value property sets or returns the value of the value attribute of a text field.

The value property contains the default value OR the value a user types in (or a value set by a script).

Browser Support

Syntax

Return the value property:

Property Values

Technical Details

More Examples

Example

Get the value of a text field:

Example

var at = document.getElementById(«email»).value.indexOf(«@»);
var age = document.getElementById(«age»).value;
var fname = document.getElementById(«fname»).value;
submitOK = «true»;

if (fname.length > 10) alert(«The name may have no more than 10 characters»);
submitOK = «false»;
>

if (isNaN(age) || age < 1 || age >100) alert(«The age must be a number between 1 and 100»);
submitOK = «false»;
>

if (at == -1) alert(«Not a valid e-mail!»);
submitOK = «false»;
>

if (submitOK == «false») return false;
>

Example

var mylist = document.getElementById(«myList»);
document.getElementById(«favorite»).value = mylist.options[mylist.selectedIndex].text;

Example

var no = document.getElementById(«no»);
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById(«result»).value;
txt = txt + option;
document.getElementById(«result»).value = txt;

Example

An example that shows the difference between the defaultValue and value property:

Источник

How to Set the Value of an Input Field with JavaScript?

One way to set the value of an input field with JavaScript is to set the value property of the input element.

For instance, we can write the following HTML:

Then we can set the value property of the input by writing:

document.getElementById("mytext").value = "My value"; 

Call the setAttribute Method

Also, we can call the setAttribute method to set the value attribute of the input element.

For instance, we can write:

document.getElementById("mytext").setAttribute('value', 'My value'); 

We call setAttribute with the attribute name and value to set the value attribute to ‘My value’ .

Setting the value Property of an Input in a Form

We can also get the input element by using the document.forms object with the name attribute value of the form and the name attribute value of the input element.

For example, we can write the following HTML:

Then we can use it by writing:

document.forms.myForm.name.value = "New value"; 

The form name value comes first.

Then the name value of the input element comes after it.

document.querySelector

We can use the document.querySelector method to select the input.

For instance, we can write the following HTML:

document.querySelector('input[name="name"]').value = "New value"; 

to get the element with querySelector .

We select the input with the name attribute by putting the name key with its value in the square brackets.

Источник

How to Get and Set Input Text Value in JavaScript

On most web pages, it is required to get the input text value from the users in order to enter correct data and ensure data security. For instance, you need to get, set or store some specific data to use it for further processing. In such cases, getting and setting input text value in JavaScript becomes very helpful for protecting data privacy.

This write-up will demonstrate the methods to get and set input text values in JavaScript.

How to Get and Set Input Text Value in JavaScript?

To get and set input text value in JavaScript, utilize:

• “getElementById()” method
• “getElementByClassName()” method
• “querySelector()” method

Go through each of the mentioned methods one by one!

Method 1: Get and Set Input Text Value in JavaScript Using document.getElementById() Method

The “getElementById()” method accesses an element with the specified Id. This method can be applied to access the ids of the input fields and buttons for getting and setting the text value.

Here, “elementID” refers to the specified Id of an element.

The below example explains the discussed concept.

Example
Firstly, include two input type fields and separate buttons for getting and setting the input text values with the “onclick” events which will access the specified functions:

Then, get the value of the input field with the help of the document.getElementById() method:

Now, declare a function named “getAndSetText()”. Here, fetch the input field with the “getText” id and pass the input value to the next input field having “setText” id:

function getAndSetText ( ) {
var setText = document. getElementById ( ‘getText’ ) . value ;
document. getElementById ( ‘setText’ ) . value = setText ;
}

Similarly, define a function named “getText()”. After that, get the input field with “getText” id and pass the particular value to the alert box for getting the input text value:

function getText ( ) {
var getText = document. getElementById ( ‘getText’ ) . value ;
alert ( getText ) ;
}

Method 2: Get and Set Input Text Value in JavaScript Using document.getElementByClassName() Method

The “getElementByClassName()” method accesses an element with the help of the specified class name. This method, similarly, can be applied to access the class of the input field and buttons for entering and setting the text value.

In the above syntax, the “classname” represents the class name of elements.

Example
Similar to the previous example, we will first access the first input field with the “getText” class name. Then, define a function named “getAndSetText()” and get the specified input field based on its class name and set the value in the next input field:

document. getElementByClassName ( ‘getText’ ) . value = «Input Here» ;
function getAndSetText ( )
{
var setText = document. getElementByClassName ( ‘getText’ ) . value ;
document. getElementById ( ‘setText’ ) . value = setText ;
}

Likewise, define a function named “getText()”, add the class name of the first input field and pass the particular value to the alert box to display the fetched value:

function getText ( ) {
var getText = document. getElementByClassName ( ‘getText’ ) . value ;
alert ( getText ) ;
}

This implementation will yield the following output:

Method 3: Get and Set Input Text Value in Javascript Using “document.querySelector()” Method

The “document.querySelector()” fetches the first element that matches the specified selector, and the addEventListener() method can add an event handler to the selected element. These methods can be applied to get the id of the input field and buttons and apply an event handler to them.

Here, “CSS selectors” refer to one or more CSS selectors.

Look at the following example.

Example
Firstly, include input types with their placeholder values and buttons for getting and setting the input text values:

Next, fetch the added input fields and buttons using the “document.querySelector()” method:

let buttonGet = document. querySelector ( ‘#get’ ) ;
let buttonSet = document. querySelector ( ‘#set’ ) ;
let getInput = document. querySelector ( ‘#input-get’ ) ;
let setInput = document. querySelector ( ‘#input-set’ ) ;
let result = document. querySelector ( ‘#result’ ) ;

Then, include an event handler named “click” for both buttons to get and set the values, respectively:

buttonGet. addEventListener ( ‘click’ , ( ) => {
result. innerText = getInput. value ;
} ) ;
buttonSet. addEventListener ( ‘click’ , ( ) => {
getInput. value = setInput. value ;
} ) ;

We have discussed the simplest methods for getting and setting input text value in JavaScript.

Conclusion

To get and set input text value in JavaScript, utilize the “document.getElementById()” method or the

“document.getElementByClassName()” method for accessing the specified input field and buttons based on their ids or class name and then set their values. Moreover, the “document.querySelector()” can also be utilized for getting and setting input text values in JavaScript. This blog explained the methods to get and set input text values in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Change Input Value in JavaScript

1. Change the Input Value Using the value Property in JavaScript
2. Change the Input Value Using the setAttribute() Function in JavaScript

This tutorial will discuss changing the input value using the value property or the setAttribute() function in JavaScript.

Change the Input Value Using the value Property in JavaScript

We use an input tag to get input from a user, and we can use the value property to change the input value. First of all, we need to get the element whose value we want to change using its id or name, and then we can use the value property to set its value to our desired value. To get an element in JavaScript, we can use the getElementById() or the querySelector() function. For example, let’s make a form with input and give it an id to get the element in JavaScript using the getElementById() and set its value using the value property. See the code below.

 html> head>head> body> form>  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.getElementById("123"); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value);  script>  html> 

In the above code, we used the document.getElementById() function to get the element using its id, and on the next line, we printed the current input value using the console.log() function. After that, we used the value property to set the input value to our desired value, and after that, we printed the new value on the console. You can also use the querySelector() function to select the element whose input value you want to change. For example, let’s repeat the above example using the querySelector() function. See the code below.

 html> head>head> body> form>  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.querySelector('input[name="ABC"]'); console.log(Myelement.value); Myelement.value = "New value"; console.log(Myelement.value);  script>  html> 

In the above code, we used the querySelector() function to get the element.

Change the Input Value Using the setAttribute() Function in JavaScript

We can also use the setAttribute() function instead of the value property to set the input value. We can also use the forms() function instead of the getElementById() or querySelector() function to get the element using the form name and input name. For example, let’s repeat the above example with the setAttribute() and froms() function. See the code below.

 html> head>head> body> form name="FormABC">  input type="text" id= "123" name="ABC" value="Some Value">  form>  body> script type="text/javascript"> var Myelement = document.forms['FormABC']['ABC']; console.log(Myelement.value); Myelement.setAttribute('value','New value'); console.log(Myelement.value);  script>  html> 

As you can see, the output of all these methods is the same, so you can use whatever method you like depending on your requirements.

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Related Article — JavaScript Input

Источник