如何使用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自動填充窗體輸入的窗口小部件？

回答

相關問題