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

【问题标题】：Form submit displays javascript coe instead of executing it表单提交显示 javascript coe 而不是执行它
【发布时间】：2018-06-16 20:39:17
【问题描述】：

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

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

我在 Ubuntu 16.04、Node 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 从仅由 action 属性引用的外部文件移动到同一页面中对 a 的引用。

【问题讨论】：

你的表单动作看起来像action="/script-file.js"

标签： javascript html forms form-submit nodemailer

【解决方案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>

【讨论】：

呃哦，非常抱歉。由于 stackoverflow 抛出了一个不特定的错误，我不得不重新发布我的问题，而且我似乎没有在我的最后一篇文章中包含我的 HTML 表单代码。我的脚本现在正在执行，因此您的解决方案有效。我现在得到一个不同的错误，但由于它不同，我可能应该将它作为另一个问题发布。感谢您的帮助！