使用 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: 部分的末尾。

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

    });

在运行这段代码中没有任何错误，但是当邮件客户端出现时， "to:" 部分是空白的。这可能吗？

Answer 1

您需要使用 attr instend of 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>

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

Answer 2

这里发生了很多事情。

$("email-value") 不匹配任何内容。你想要 $('input[name="email-value"]').
您正试图在页面加载时在全局变量中捕获电子邮件地址，在用户有机会输入任何内容之前，因此它始终为空。相反，您应该在使用它的函数中捕获该值。
.append 向文档添加一个文本节点。您想要的是将电子邮件地址连接到字符串 "mailto:"，因此只需使用连接 (+).
<a> 标签没有 value 属性。请改用标签内的文本节点。
<a> 标签没有 type 属性，也不是表单的提交按钮。幸运的是，您正在做的是构造一个常规锚点 link，因此 不需要 作为提交按钮；表单的唯一用途是输入字段。
锚点上没有 href 属性，因此浏览器不会将其设置为 link。
href 是属性，不是道具：使用 .attr()。 prop 用于布尔值，例如 checked 或 disabled。
您在将触发 link 的同一点击事件期间更改 link 的 href。这似乎确实有效——有点出乎意料——但意味着 link 上的悬停指示器将不正确（因为 href 在用户单击 link 之前不存在）。我会使用输入字段上的更改事件（最好在更改 link 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>

使用 javascript 将输入值替换为 mailto

Use javascript to replace input value into mailto

javascript

mailto

jquery