使用“表单操作”使用变量填充“mailto：”值答案

【问题标题】：using a variable to populate the "mailto:" value using "form action"使用“表单操作”使用变量填充“mailto：”值
【发布时间】：2021-08-31 18:34:39
【问题描述】：

新手问题2，先见谅！

我设法创建了一个带有各种选择框的表单，其中一个是表单应该将电子邮件发送到的电子邮件（使用 mailto:)。我已经设法将电子邮件字段的值存储为变量（“emailtouse”），现在我正在尝试在“mailto：”代码中使用该变量，但它没有，我要么空白要么当我尝试这个过程时，变量名本身。

谢谢伊恩

***variable setting within script in header***
 var emailtouse = "mailto:"+emailgoto[value]

***form action***

<form action='+emailtouse+'? 
cc=u16@myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request" method="post" 
enctype="text/plain">

【问题讨论】：

mailto: urls for form actions are hopelessly unreliable。根本不要使用它们。
我想你可能会假设 emailtouse 变量的值是反应式的——也就是说，一旦用户在电子邮件字段中输入内容，它就会更新。然而，情况并非如此——要获得反应变量，您可以使用其中一个 js 框架，例如 alpine.js 或 vue
@CJK - 谢谢，我有变量在第一个下拉列表的更改事件之后根据编码值设置，即用户选择“Under 7”，它将另一个下拉列表设置为“under7@ football.co.uk”，然后将其用作变量。我添加了一个警报，以表明它肯定（无论如何在我眼中！）获得了价值。所以如果我想（我是否应该这样做没有实际意义，因为这只是概念证明）我会怎么做呢？谢谢

标签： html forms mailto

【解决方案1】：

即使您的变量已更新，“动作”在变量更改后也不会更新，因此它包含在渲染页面时计算的原始值。请参阅以下 CodePen 示例，了解如何在提交前更新表单操作：

    <form 
          id="form1"
          onsubmit="return updateAction(this)"
          action="javascript:;" 
          method="post">
      <button type="submit">Do it!</button>
    </form>

... 和 JS 更新表单操作，并测试它是否真的有效：

    let emailtouse = "testemail@somewhere.com";
    
    function updateAction(element) {
      element.action =
        emailtouse +
        "&cc=u16@myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request";
      checkIfItReallyWorks();
      return false; // change to true to submit!!!
    }
    
    function checkIfItReallyWorks() {
      let form = document.getElementById("form1");
      alert(form.action);
    }

CodePen上面的代码：https://codepen.io/cjkpl/pen/vYxPJQd

【讨论】：