CODEWITHSUNDEEP
javascripthtml
Mahesh Jamdade
Mahesh Jamdade

Reputation: 20379

input fields values undefined in javascript

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

https://ibb.co/dfjBUU

Upvotes: 0

Views: 354

Answers (2)

NIDHIN VINCENT
NIDHIN VINCENT

Reputation: 235

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>

Upvotes: 1

Shyqa
Shyqa

Reputation: 46

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);
}

Upvotes: 1

Related Questions