입력 필드의 변수 설정

Question

전자 메일 주소의 입력 필드가있는 양식이 있습니다. 양식에 제출 버튼이 없습니다. 대신 스트라이프 checkout.js 스크립트를 사용하여 양식을 제출하기 전에 (신용 카드를 처리하기 위해) 스트라이프로의 왕복을 유발하는 버튼을 제공합니다. checkout.js 스크립트는 사전 설정된 이메일 주소를 스트라이프 체크 아웃 양식으로 전달할 수있는 선택적 변수 data-email을 허용합니다. 내 양식에 이메일 주소 입력란의 값으로 data-email 변수를 설정하고 싶습니다. . 내가 사용해야 알고

<form role="form" class="new_user" id="new_user" action="/users" method="post"> 
    <label for="user_email">Email</label> 
    <input class="form-control" type="email" value="" name="user[email]" id="user_email" /> 
    <script src="https://checkout.stripe.com/v2/checkout.js" 
     class="stripe-button" 
     data-email=document.getElementById('user_email').value 
     data-key="stripe_key" 
     data-description="Product" 
     data-amount="500"> 
    </script> 
</form> 

:

다음은 형태와 스크립트의

데이터 이메일 = document.getElementById를 ('USER_EMAIL') 값을

그러나 data-email이 설정되지 않습니다. 입력란에 onchange 속성을 추가해야합니까? 그게 어떻게 생겼어? 그 이상이 필요합니까? 당신이 조각을 실행하면

var stripe = document.getElementById("stripe"); 
 
document.getElementById("email").onkeypress = function() { 
 
    stripe.setAttribute("data-email", this.value); 
 
}

<input id="email"> 
 
<script id="stripe"></script>

및 입력 요소를 검사 : 사용자가 페이지에 자신의 이메일을 입력 한 경우

Answer 1

, 당신은뿐만 아니라 단지 그들이 입력 할 때 스크립트를 업데이트 할 수 있습니다 그런 다음 입력하면 지정된 스트라이프 스크립트 태그에 대해 data-email 속성 업데이트가 표시됩니다. 이 양식을 양식에 적용 할 수 있어야합니다.