Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change value of input on form submit in JavaScript?
In JavaScript, you can change the value of an input field when a form is submitted using the document object. This is useful for modifying form data before submission or performing dynamic updates.
Syntax
document.formName.inputName.value = newValue;
Basic Example
Here's a form with a hidden input field that gets modified on submit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Input Value on Submit</title>
</head>
<body>
<form name="studentForm" onsubmit="submitForm()">
<input type="hidden" name="txtInput" value="10000" />
<input type="submit" value="Submit Form" />
</form>
<script>
function submitForm() {
// Change the hidden input value before form submission
document.studentForm.txtInput.value = 'STUDENT-100';
console.log('Input value changed to:', document.studentForm.txtInput.value);
}
</script>
</body>
</html>
Modern Approach with Event Listener
For better practice, use event listeners instead of inline handlers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Form Handling</title>
</head>
<body>
<form id="myForm">
<label>Name: <input type="text" id="nameInput" value="John Doe"></label><br><br>
<input type="hidden" id="hiddenInput" value="original-value">
<input type="submit" value="Submit Form">
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent actual form submission for demo
// Change input values
const nameInput = document.getElementById('nameInput');
const hiddenInput = document.getElementById('hiddenInput');
nameInput.value = nameInput.value.toUpperCase();
hiddenInput.value = 'USER-' + Date.now();
console.log('Name changed to:', nameInput.value);
console.log('Hidden value changed to:', hiddenInput.value);
alert('Form values updated! Check console for details.');
});
</script>
</body>
</html>
Using getElementById Method
You can also use getElementById() for more flexibility:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Input with getElementById</title>
</head>
<body>
<form onsubmit="changeInputValue()">
<input type="text" id="userInput" value="Default Value" placeholder="Enter text"><br><br>
<input type="submit" value="Transform and Submit">
</form>
<script>
function changeInputValue() {
const inputElement = document.getElementById('userInput');
const originalValue = inputElement.value;
// Transform the value (e.g., add timestamp)
inputElement.value = originalValue + ' - ' + new Date().getTime();
alert('Value changed from "' + originalValue + '" to "' + inputElement.value + '"');
}
</script>
</body>
</html>
Key Points
- Use
document.formName.inputName.valueto access form inputs by name - Use
document.getElementById()for more flexible element selection - Event listeners provide better separation of HTML and JavaScript
- Use
preventDefault()to stop form submission if needed - Changes made during form submission will be included in the submitted data
Conclusion
Changing input values on form submit is straightforward using JavaScript's DOM manipulation methods. The modern approach with event listeners is preferred over inline handlers for better code organization and maintainability.
Updated on: 2026-03-15T23:18:59+05:30
6K+ Views
Advertisements