I am trying to send values from HTML form to javascript file but I saw that the values for email subject and message were sent as undefined in alert window or console , while the name was correctly fetched from input and transferred to js,I am quite new to javascript so this question might be very silly but I am unable to figure out the reason why undefined is sent and also I don't understand that when in what order the javascript and HTML code is executed, I Sometimes see the javascript is being executed first before the button is clicked heres my html form stored in temp.html
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" id="email" placeholder="Email">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" id="subject" placeholder="Subject">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
file.js located in js folder
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
output image that I get
ID in html are unice you can't use id="name" for 3 inputs.
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3">
<input type="text" placeholder="Email" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3">
<input type="text" class="form-control mb-3" id="subject" placeholder="Subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto">
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;">Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</body>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
and js its ok
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
Need to give the attribute id to the input element not for the div
function contactuser(){ var Name = document.getElementById("name").value; var Email = document.getElementById("email").value; var subject = document.getElementById("subject").value; var message = document.getElementById("message").value; alert("Button Clicked" + "Name: " + Name + "Email:" + Email + " subject:"+ subject); }
<form id="connect-form" method="POST"> <div class="row"> <div class="card-body col-lg-6 col-sm-12 col-md-6"> <div class="md-form mt-3"> <input type="text" id="name" class="form-control" required="required"> <label for="materialContactFormName">Name</label> </div> <div class="md-form mb-3" placeholder="Email"> <input type="text" class="form-control mb-3" id="email" required="required"> <label for="email">Email</label> </div> <div class="md-form mb-3" placeholder="Subject"> <input type="text" class="form-control mb-3" id="subject" required="required"> <label for="subject">Subject</label> </div> </div> <div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6"> <div class="md-form"> <textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea> <label for="message">Message</label> </div> </div> </div> <div class="form-action" style="text-align: center;margin: auto" > <button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button> </div> <script type="text/javascript" src="js/file.js"></script> </form> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.