Question

我正在尝试将值从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>

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

我得到的输出图像

https://ibb.co/dfjBUU

Answer 1

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>

和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

需要将非输入div的属性ID赋予输入元素

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 个答案: