How To Save Data From HTML Form To A Database Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript HTML | Written & Updated By - Pragati
In this article we will show you the solution of how to save data from html form to a database using JavaScript, in an HTML file, if we submit a form, we can save the data using JavaScript localStorage object.
Using the localStorage object, we can store data that will never expire. The key and values are stored in localStorage.
Step By Step Guide On How To Save Data From Html Form To A Database Using JavaScript :-
The syntax of localStorage object is,
localStorage.setItem(key, value);
let us see an example to save data from HTML form to a database using JavaScript,
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> how to save data from html form to a database using JavaScript </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
.container {
display: flex;
padding-top: 60px;
align-items: center;
justify-content: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
form input{
margin: 2px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> how to save data from html form to a database using JavaScript </h3>
<div class="container">
<form onsubmit="MyFunction(event)">
<div>
<label for=""> First Name: </label>
<input type="text" id="f_name" required>
</div>
<div>
<label for=""> Last Name: </label>
<input type="text" id="l_name" required>
</div>
<div>
<label for=""> Date of Birth: </label>
<input type="date" id="DOB" required>
</div>
<div>
<label for=""> Gender: </label>
<input type="radio" name="gender" id="gender" required> Male
<input type="radio" name="gender" required> Female
</div>
<input type="submit" value="submit">
</form>
</div>
<script>
function MyFunction(event) {
event.preventDefault();
var f_name = document.getElementById( "f_name" ).value ;
var l_name = document.getElementById( "l_name" ).value ;
var DOB = document.getElementById( "DOB" ).value ;
var temp_gender = document.getElementById( "gender" ) ;
temp_gender.checked ? gender = "Male" : gender="Female" ;
localStorage.setItem('first_name', f_name) ;
localStorage.setItem('last_name', l_name) ;
localStorage.setItem('date_of_birth', DOB) ;
localStorage.setItem('gender', gender) ;
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with the class container. Between that <div> create a form using the HTML input property.
- Created the <style> tag to add CSS to the HTML page.
- to add JavaScript Create a <script> tag.
- Create a variable for all the input tag and use the .getElementById to access the input by Id.
- Now because the gender tag has the radio tag, we use a ternary operator here.
- Using the localStorage.setItem(key, value) to save every data.
Conclusion :-
At last here in conclusion, here we can say that with this article’s help, we can how to save data from HTML form to a database using JavaScript.
I hope this article on how to save data from html form to a database using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
