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

Question

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

我通过直接从Ubuntu终端运行它进行了测试，并成功收到了一封电子邮件。

我正在Ubuntu 16.04的Node v6.14.3上运行它。 HTM1使用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从仅由action属性引用的外部文件移动到同一页面中对的引用。

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而不是执行它

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-06-16 20:50:42

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-06-16 20:50:42

解决方案1
0 已采纳 2018-06-16 20:50:42