表单提交显示 javascript coe 而不是执行它

Question

我正在尝试创建一个 HTML 表单，该表单将使用输入的信息发送电子邮件。但是现在，我只是将信息硬编码到脚本本身中，因此字段输入无关紧要。但是，每当我按下提交按钮时，只是在屏幕上显示 Javascript 而不是执行它。该脚本与 HTML 位于同一目录中。

我直接从 Ubuntu 终端通过运行对其进行了测试，并成功收到了来自它的电子邮件。

我是运行 Ubuntu 16.04，节点 v6.14.3。 HTMl使用Bootstrap 4，邮件处理用Nodemailer。非常感谢您的宝贵时间。

-乔尔

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
 service: 'gmail',
 auth: {
        user: 'redacted',
        pass: 'redacted'
    }
});

const mailOptions = {
 from: 'redacted',
 to: 'redacted',
 subject: 'hey',
 text : 'text',
 html: '<p>Your html here</p>',


 attachments:[
  {
   filename: 'anglerite.png',
   path: '/home/joel/Desktop/Anglerite/img/anglerite.png' 
  }
 ]
};

transporter.sendMail(mailOptions, function (err, info) {
   if(err)
     console.log(err)
   else
     console.log(info);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap-social.css">
    <link rel="stylesheet" href="css/styles.css">



    <title>Redacted</title>
</head>

<form" class = "col-sm-6" action = "app4.js" method = "POST" > 
     <div class = "row form-row form-group">
     
      <div class = "col-sm-5">
       <input type = "text" class = "form-control-plaintext full-width" id = "name" placeholder = "Your name here">
      </div>

      <div class = "col-sm-2">
      </div>
     
      <div class = "col-sm-5 widen-slightly">
       <input type = "text" class = "form-control-plaintext full-width" id = "staticEmail" placeholder = "email@example.com">
      </div>
     </div>

     <div class = "row form-row form-group">
      
      <div class = "col-sm-12 widen-slightly">
       <input type = "text" class = "form-control-plaintext full-width" id = "phone" placeholder = "Phone number with area code">
      </div>

     </div>

     <div class = "row form-row form-group">
      
       <div class = "col-sm-12 widen-slightly">
        <input type = "text" class = "form-control-plaintext full-width" id = "subject" placeholder = "Subject">
       </div>
     </div>

     <div class = "row form-row form-group">
      
       <div class = "col-sm-12 widen-slightly">
        <textarea rows = "6" class = "form-control-plaintext full-width" id = "Description" placeholder = "Description"></textarea>
       </div>
     </div>

     <div class = "row form-row form-group">
      <label  class = "col-sm-3 col-form-label" >Any Photos</label>

      

      <div class = "col-sm-7">
       <input type = "file" class = "form-control-file full-width" id = "">
      </div>

      <div class = "cl-sm-2"> 
       <button type="submit" class="btn btn-default" id = "submit">Submit</button>
      </div>
     </div>


      
     
    </form>

编辑：Chris Happy 的回答建议将 Javascript 从仅由操作属性引用的外部文件移动到同一页面中对 a 的引用。

Answer 1

我怀疑您正在重定向到您的脚本文件，而不是运行提交时的代码。

换句话说，您的表单如下所示：

<form action"script-file.js" method="GET">
  <input type="text" value="Some text">
  <input type="submit" value="Save">
</form>

但是，这将重定向到您的脚本文件，并将以纯文本形式显示在浏览器上。

而是像这样显示您的表单和代码：

<form id="myForm" action="/" method="GET">
  <input type="text" value="Some text">
  <input type="submit" value="Save">
</form>


<!-- Use: <script src="myscripts.js"></script> or -->
<script>
  const myForm = document.getElementById('myForm');

  myForm.addEventListener("click", () => {
    var nodemailer = require('nodemailer');

    var transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: 'redacted',
        pass: 'redacted'
      }
    });

    const mailOptions = {
      from: 'redacted',
      to: 'redacted',
      subject: 'hey',
      text: 'text',
      html: '<p>Your html here</p>',


      attachments: [{
        filename: 'anglerite.png',
        path: '/home/joel/Desktop/Anglerite/img/anglerite.png'
      }]
    };

    transporter.sendMail(mailOptions, function(err, info) {
      if (err)
        console.log(err)
      else
        console.log(info);
    });
  });
</script>

表单提交显示 javascript coe 而不是执行它

Form submit displays javascript coe instead of executing it

html

javascript

forms

form-submit

nodemailer