Set value using javascript

How to set the value of a form element using Javascript

As we have seen in earlier articles, in order to work with forms in JavaScript, it is imperative to obtain references to the form object and its elements. In this article, we will be using the forms collection of the document object and the elements collection of the form object to set the values of the form elements. The syntax for accessing the form object is as below:

oFormObject = document.forms['myform_id']; 

For accessing individual elements, we use the following code:

oformElement = oFormObject.elements[index]; 

oFormElement = oFormObject.elements["element_name"]; 

In the above code, “index” refers to the position of the element in the “elements” collection array, and “element_name” is the name of the element. Both approaches give us a reference to the desired form element.

Setting the value of a textarea element using JavaScript

In order to set the value of a textarea field element in a form, we can use the following code:

oFormObject.elements["element_name"].value = 'Some Value'; 

If we are accessing the form object through any of the form’s elements itself, we can also use the following code:

this.form.elements["element_name"].value = 'Some Value'; 

Let us look at a simple form example.

 form id="register_complaint" action="#">  Full Name: input type="text" size="30" maxlength="155" name="name" />  Email Id: input type="text" size="30" maxlength="155" name="email" />  Service Complaint: textarea name="service_complaint" rows="7" cols="50">textarea>  input type="button" name="submit" value="Submit Complaint" onclick="showElements(this.form);" />  form> 

When the page loads, the textarea field “service_complaint” has a note written for the user: “Please enter your complaint briefly”, but when focus is set to that field, this message disappears, as it should. In order to implement this feature, we would need to write an onLoad event handler for the tag that would set the initial value of the textarea element:

 body onload="initForm(document.forms[0], 'service_complaint', 'Please enter your complaint in brief');"> 

The initForm function could be implemented this way:

 function initForm(oForm, element_name, init_txt)   frmElement = oForm.elements[element_name];  frmElement.value = init_txt; > 

You must have also noticed that this initial message does not re-appear even after the focus is removed and again given to this field. We do this by writing an onFocus event handler for the textarea element. The code below is generic, that can be used for other fields like the text input field as well:

 function clearFieldFirstTime(element)   if(element.counter==undefined)    element.counter = 1;  >  else    element.counter++;  >   if (element.counter == 1)    element.value = '';  > > 

The first time the textarea element is given focus, the property “counter” for the textarea element is not defined, and so we can set the counter, by giving it the initial value 1. Thereafter, on subsequent focus, this counter increments. The value of the textarea is reset only the first time the textarea field gets focus, by setting its value attribute to the empty string.

Setting the value of the text input element through JavaScript

In order to set the value of a text input field element in a form, we can use the following code:

oFormObject.elements["element_name"].value = 'Some Value'; 

Let us look at an example to illustrate how to set the value of the text input element through javascript.

The form in this demo has a “membership_period” text input field that is updated through the use of two JavaScript button elements. Have a look at the way the HTML is coded:

 form id="register_complaint" action="#">  Full Name: input type="text" size="30" maxlength="155" name="name" />  Email Id: input type="text" size="30" maxlength="155" name="email" />  Service Complaint: textarea name="service_complaint" rows="7" cols="50">textarea>  Months as member: input type="text" size="5" maxlength="5" name="membership_period" />  input type="button" name="increase" value="+" onclick="monthModify(this.form.elements["membership_period"], 'incr');" />  input type="button" name="decrease" value="-" onclick="monthModify(this.form.elements["membership_period"], 'decr');" />  input type="button" name="submit" value="Submit Complaint" onclick="showElements(this.form);" />  form> 

As you must have seen in the demo, the text field named “membership_period” has a default value of 6 when the form loads, which can be changed either by directly entering the value in the text input field, or by adjusting the value through the two javascript buttons labeled “+” or “-” . We now need to write a javascript function that can serve as the onClick event handler of the two buttons:

In the function, we would first need to identify which of the two buttons was clicked:

 switch(btnElement.name)  case 'increase':  // code to handle incrementing the value of the  // text input field referenced by txtElement  case 'decrease':  // code to handle decrementing the value of the  // text input field referenced by txtElement  > 

For the case ‘increase’, we would need to check if the value we are trying to increment is an integer, and if it is, then we increment it:

 case 'increase':  if(isEmpty(txtElement.value))    txtElement.value = '1';  >  else if(isInteger(txtElement.value))    txtElement.value ++;  >  else    alert('The value you are trying to increment is not a number');  txtElement.value = '';  >  break; 

The function isEmpty() checks whether the value of the text input field is empty or not, and the function isInteger() checks if the value is an integer. If all these tests return true, we increment the value using the construct: txtElement.value ++. Have a look at the code sample for the implementation of these functions.

For the case ‘decrease’ the code is very similar; have a look at the code sample.

See Also

Источник

Set value using javascript

Last updated: Jan 11, 2023
Reading time · 3 min

# Set the Value of a Select Element using JavaScript

Use the value property to set the value of a select element, e.g. select.value = ‘new value’ .

The value property can be used to set or update the value of a select element. To remove the selection, set the value to an empty string.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body style="margin-top: 60px; margin-left: 100px"> select name="fruits" id="fruit-select"> option value="">--Choose an option--option> option value="apple">Appleoption> option value="banana">Bananaoption> option value="kiwi">Kiwioption> select> button style="margin-top: 10px" id="btn">Clickbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const select = document.getElementById('fruit-select'); // ✅ set select value select.value = 'apple'; console.log(select.value); // 👉️ "apple" // ✅ unset select value // select.value = ''; // -------------------------------- const allOptions = Array.from(select.options).map(option => option.value); console.log(allOptions); // 👉️ ['', 'apple', 'banana', 'kiwi'] // -------------------------------- // ✅ get select value on change select.addEventListener('change', function handleChange(event)  console.log(event.target.value); // 👉️ get selected VALUE >); // -------------------------------- // ✅ Set select element value on button click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick()  select.value = 'banana'; >); 

We used the value property to set the value of a select element.

A convention for when you don’t have a default value is to have the value of the first option element be an empty string.

# Removing the selection

To remove the selection, set the value property of the select element to an empty string.

Copied! 
const select = document.getElementById('fruit-select'); // ✅ set select value select.value = 'apple'; console.log(select.value); // 👉️ "apple" // ✅ unset select value select.value = ''; 

# Getting an array of the values of all option elements

If you need an array of the values of all the option elements, use the map() method to iterate over the elements and return the value of each option .

Copied! 
const select = document.getElementById('fruit-select'); // ✅ set select value select.value = 'apple'; console.log(select.value); // 👉️ "apple" const allOptions = Array.from(select.options).map(option => option.value); console.log(allOptions); // 👉️ ['', 'apple', 'banana', 'kiwi'] 

# Changing the value of a select element

The value of a select element can be changed in the same way it is set, just update the value property.

Copied! 
const select = document.getElementById('fruit-select'); select.value = 'apple'; console.log(select.value); // 👉️ "apple" select.value = 'banana'; console.log(select.value); // 👉️ "banana" 

If you set a select element’s value to a value that is not present among the option elements, the value of the select element gets reset.

Copied! 
const select = document.getElementById('fruit-select'); select.value = 'does-not-exist'; console.log(select.value); // 👉️ "" 

You can create an object that stores the values of the option elements to avoid misspelling values.

Copied! 
const select = document.getElementById('fruit-select'); const values =  apple: 'apple', banana: 'banana', kiwi: 'kiwi', >; select.value = values.apple; console.log(select.value); // 👉️ "apple" select.value = values.banana; console.log(select.value); // 👉️ "banana" 

This is a much better solution than hard-coding strings all over the place because it leverages your IDE’s autocompletion.

It also helps the readers of your code know what the alternative values of the select element are.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник