在javascript中未定义的输入字段值

Question

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 我正在尝试将值从HTML表单发送到javascript文件，但我看到电子邮件主题和消息的值在警报窗口或控制台中以未定义的形式发送 ，而名称是从输入中正确提取并转移到js的，我是一个很新的人到javascript，所以这个问题可能很愚蠢，但是我无法弄清楚为什么发送undefined的原因，而且我也不明白，以什么顺序执行javascript和HTML代码时，有时我会看到javascript正在执行首先，在单击按钮之前，将我的html表单存储在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 js文件夹中的file.js

  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 https://ibb.co/dfjBUU

Answer 1

ID in html are unice you can't use id="name" for 3 inputs. html中的ID是唯一的，您不能为3个输入使用id =“ name”。

<!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 和js没关系

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

Answer 2

Need to give the attribute id to the input element not for the div 需要为输入元素提供属性ID，而不是给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>

在javascript中未定义的输入字段值

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-10-13 16:56:56

解决方案2
1 2018-10-13 16:57:15

在javascript中未定义的输入字段值

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-10-13 16:56:56

解决方案2 1 2018-10-13 16:57:15

解决方案1
1 已采纳 2018-10-13 16:56:56

解决方案2
1 2018-10-13 16:57:15