Question

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

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

我在Ubuntu 16.04，Node v6.14.3上运行它。 HTMl使用Bootstrap 4，电子邮件进程使用Nodemailer。非常感谢你的时间。

-Joel

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的引用。

Answer 1

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

换句话说，您的表单看起来像这样：

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

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

相反，请显示您的表单和代码：

＆＃13;

<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>

＆＃13;

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

1 个答案: