如何使用 Javascript 使用表单输入自动填充小部件？答案

【问题标题】：How do I autofill a widget with form inputs using Javascript?如何使用 Javascript 使用表单输入自动填充小部件？
【发布时间】：2016-08-22 17:48:49
【问题描述】：

我正在处理一个嵌入了小部件的捐赠表格。该小部件选择用户加入我们的移动捐赠计划，该计划使用与我们的捐赠表格不同的软件。我被要求查看我们是否可以使小部件不可见，但将表单数据传输给它并在用户提交捐赠表单时提交。不过，我已经遇到了将表单数据传输到小部件的问题。

表单应从表单中获取捐赠者的名字、姓氏和电话号码，然后在单击表示用户希望接收移动更新的复选框时自动填充小部件。

以下是我尝试过的方法，但似乎没有用。表单的代码比较长，所以我只包含了相关字段，但这里是完整表单的链接：http://support.ddfl.org/site/Donation2?df_id=9442&mfc_pref=T&9442.donation=form1

我对 Javascript 很陌生，所以我不完全确定这是否可行。仅供参考，我还包括控制台语句，以便我可以查看这些值是否有效。

<input type="text" name="billing_first_namename" id="billing_first_namename"

<input type="text" name="billing_last_namename" id="billing_last_namename"

<input type="text" name="donor_phonename" id="donor_phonename"

<input type="checkbox" name="mcoptin" onclick="FillMobileCause(this.form)" value="this.form"> Opt in to receive mobile updates.

<a href="//www.mobilecause.com/feature/subscription-widget" id="powered-by-mobilecause">Mobile messaging powered by Mobilecause</a><script>!function(d,s){var s=d.createElement("script"),h=(document.head||d.getElementsByTagName('head')[0]);s.src="https://app.mobilecause.com/public/messaging_widgets/q71xd/source";h.appendChild(s);}(document);</script>

<script>
function FillMobileCause(f){
  if(f.mcoptin.checked == true){
    console.log(f.billing_first_namename.value);
    console.log(f.billing_last_namename.value);
    console.log(f.donor_phonename.value);

    if(f.billing_first_namename.value.length>=1){
       f.firstname.value = f.billing_first_namename.value;      

    }else {
       f.firstname.value = '';
    }

    if(f.billing_last_namename.length>=1){
       f.lastname.value = f.billing_last_namename.value;      
    }else{
       f.lastname.value = '';
    }

    if(f.donor_phonename.length>=1){
       f.mobilenumber.value = f.donor_phonename.value;      
    }else{
       f.mobilenumber.value = '';
    }

    console.log(f.firstname.value);
  }
}
</script>

如果我遗漏了重要的细节，请告诉我。这也是我的第一篇 StackOverflow 帖子。 ;)

感谢您的帮助！

【问题讨论】：

您的意思是小部件位于//www.mobilecause.com/feature/subscription-widget，这不是您的服务器。如果是这样，那就忘记它。您需要使用 curl 或类似工具在服务器上执行此操作 - 除非他们有支持 CORS 的 API

标签： javascript forms

【解决方案1】：

您的主要问题是您在 mobilecause 表单中引用输入，就好像它们在同一个表单中，但它们在另一个表单中（嵌套在您的 f 主表单中）。

function FillMobileCause(f){
  var mcF = f.getElementsByClassName('mc-triggersubscription')[0];

  if(f.mcoptin.checked == true){
    mcF.firstname.value = f.billing_first_namename.value;
    mcF.lastname.value = f.billing_last_namename.value;
    mcF.mobilenumber.value = f.donor_phonename.value;
  }
}

f 仍然是主要表单（复选框的父表单）。

但现在我们有了另一个 mcF (mobilecauseForm)，它是使用 getElementsByClassName 选择的（这将搜索具有 mc-triggersubscription 类的子级）。 [0] 部分是选择第一个匹配项（getElementsByClassName 返回一个数组。

之后，我们需要做的就是将f 输入的值分配给mcF 的值。

注意：为了简化，我留下了“如果为空”验证。无论如何我认为它不是真的需要，如果一个值为空，将它复制到 mobilecause 值没有什么大问题。

【讨论】：