Javascript를 사용하여 양식 입력으로 위젯을 자동 완성하는 방법은 무엇입니까?

Question

위젯이 내장 된 기부 양식을 작성 중입니다. 이 위젯은 사용자가 기부 양식과 별도의 소프트웨어를 사용하는 모바일 기부 프로그램에 사용자를 참여시킵니다. 나는 우리가 위젯을 보이지 않게 만들 수 있는지를 물어 보았지만 사용자가 기부 양식을 제출할 때 양식 데이터를 전송하여 제출했다. 하지만 이미 양식 데이터를 위젯으로 전송하는 데 문제가 있습니다.

양식에서 기증자의 이름, 성 및 전화 번호를 양식에서 가져온 다음 사용자가 모바일 업데이트를 받기를 원한다는 체크 상자를 클릭하면 위젯이 자동 완성됩니다.

아래 내용은 시도했지만 작동하지 않는 것 같습니다. 양식의 코드가 비교적 길기 때문에 관련 필드가 포함되었지만 전체 양식에 대한 링크는 다음과 같습니다. http://support.ddfl.org/site/Donation2?df_id=9442&mfc_pref=T&9442.donation=form1

저는 이것이 매우 새로운 것인지 잘 모르겠습니다. 그냥 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는 여전히 기본 폼 (체크 박스의 부모 인 것)이다.

이제 우리는 클래스의 자식을 검색 할 getElementsByClassName을 사용하여 선택되는 mcF (mobilecauseForm)을 또 하나 가지고 있습니다. . 첫 경기가 선택되어 있도록 [0] 부분은 (getElementsByClassName 배열을 반환 한 후

을, 우리가해야 할 일은 mcF들에 f 입력 '값을 할당입니다

참고 :. 나는 남겨 "empty if"단순화를위한 검증. 어쨌든 값이 비어 있다면 값을 비우면 mobilecause 값으로 복사하는 데 큰 문제가 없다.