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

我正在制作一个嵌入了小部件的捐赠表单。该小部件将用户选入我们的移动捐赠计划，该计划使用独立软件，而不是我们的捐赠形式。我被要求查看我们是否可以使小部件不可见，但将表单数据转移给它并在用户提交捐赠表单时提交。我已经遇到了将表单数据转移到小部件的问题。如何使用Javascript自动填充窗体输入的窗口小部件？

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

下面是我试过的，但它似乎并没有工作。该表单的代码是相对较长的，所以我只包含了相关的字段，但这里是链接到完整表单：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帖子。 ;）

我很感谢您的帮助！

来源

2016-08-22 kskelton

你的意思是小部件生活在'//www.mobilecause.com/feature/subscription-widget'这个iis不是你的服务器，如果是这样的话，就忘了它，你需要在服务器上用curl或类似的方法来做 - 除非它们有一个支持CORS的API – mplungjan

您的主要问题是，您在移动提示表单中引用了输入，就好像它们处于相同的表单中一样，但是它们位于另一个表单中（嵌套在您的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那些

注：我留下的“如果是空的”验证简化。无论如何，我不认为这是真的需要，如果一个值是空的，没有重大的问题，只是复制到手机的原因值。

来源

2016-08-22 18:22:11 yuriy636

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

回答

相关问题