使用javascript将输入值替换为mailto

Question

我必须通过电子邮件发送一些信息，但我不能使用PHP。我已设置输入以获取用户的电子邮件地址。

<form name="email-form">
    <div class="email">
        Enter your email:
        <input type="email" name="email-value">
    </div>
    <a type="submit" class="email-link" value="Email Results"></a>
</form>

我认为我可以做的是设置这样的onClick事件，并将用户输入附加到mailto：part的末尾。

var emailAddy = $("email-value").val();
    $(".email-link").on("click", function(){
        $(".email-link").prop("href", "mailto:").append( emailAddy );

    });

在运行此代码时不会出现任何错误，但是当邮件客户端出现时，“to：”部分为空。这甚至可能吗？

Answer 1

这里有很多事情要做。

• $("email-value")与任何东西都不匹配。你想要$('input[name="email-value"]')。
• 您试图在页面加载时捕获全局变量中的电子邮件地址，然后用户才有机会输入任何内容，因此它始终为空。相反，您应该在使用它的函数内捕获该值。
• .append在文档中添加了一个文本节点。你想要的是将电子邮件地址连接到字符串“mailto：”，所以只需使用连接（+）。
• <a>标签没有value属性。请改用标签内的文本节点。
• <a>标签没有type属性，并且不是表单的提交按钮。幸运的是，你正在做的是构建一个常规的锚链接，所以它不需要是一个提交按钮;表单的唯一用途是输入字段。
• 锚点上没有href属性，因此浏览器不会将其设置为链接。
• href是一个属性，而不是道具：使用.attr()。 prop适用于checked或disabled等布尔。
• 您在同一个点击事件期间改变了链接的href，这会触发该链接。这似乎工作 - 有点意外 - 但意味着链接上的悬停指示器将是不正确的（因为在用户单击链接之前href不存在。）我将在输入字段上使用更改事件（最好在更改链接href之前验证电子邮件地址。）

这是您的代码的更正版本：

$('input[name="email-value"]').on("change", function() {
  var emailAddress = $(this).val();
  // validate the address here
  $(".email-link").attr("href", "mailto:" + emailAddress);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
  <div class="email">
    Enter your email:
    <input type="email" name="email-value">
  </div>
</form>
<a href="#" class="email-link">Email Results</a>

Answer 2

您需要使用attr而不是append来设置属性值

$(".email-link").on("click", function(){
  var emailAddy = $("input[name='email-value']").val();
  $(this).attr("href", "mailto:" + emailAddy);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
    <div class="email">
        Enter your email:
        <input type="email" name="email-value">
    </div>
    <a type="submit" class="email-link" value="Email Results">Submit</a>
</form>

编辑：您的值的选择器未定义，按类，名称，ID等目标...