Question

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

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

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

我对Javascript很新，所以我不确定这是否可行。只是一个fyi，我还包括控制台语句，所以我可以看到值是否正常。

<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帖子。 ;）

感谢您的帮助！

Answer 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输入＆＃39;值为mcF。

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

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

1 个答案: