2013-07-10 2 views
6

저는 비영리 단체에 돈을주고 돈을 사용하도록 지정한 사람들을위한 기부 페이지를 만들려고합니다. 기부자가 금액을 입력 할 때 각 필드에 넣는 금액을 총계로 설정했습니다. 각 필드에 입력 마스크를 추가하려고하지만 자바 스크립트가 충돌하고 아무것도 수행하지 않습니다.jQuery 입력 마스크가 작동하지 않습니다.

<script src="/js/jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var calcTot = function() { 
      var sum = 0; 
      $('.toTotal').each(function(){ 
       sum += Number($(this).val()); 
       }); 
      $('#giveTotal').val('$' + sum.toFixed(2)); 
     } 

     calcTot(); 

     $('.toTotal').change(function(){ 
      calcTot(); 
      }); 
     }); 
</script> 

'toTotal'까지 추가 할 필요가 모든 입력 상자에 지정된 클래스 이름입니다; 여기에 어떤 마스크 전에 완벽하게 작동 내가 현재 가지고있는 코드입니다 마스크가 필요한 클래스이기도합니다. 'giveTotal'은 전체 필드의 ID입니다.

나는 StackOverflow 및 다른 사이트에서 발견 한 몇 가지 변형을 시도했다.

전체 코드 :

<html> 
<head> 
    <script src="/js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      //This is one of the masking codes I attempted. 
      $('.toTotal').mask('9.99', {reverse: true}); 

      //other options I have tried: 
      //$('.toTotal').mask('9.99'); 
      //$('.toTotal').mask('0.00'); 
      //$('.toTotal').inputmask('9.99'); 
      //$('.toTotal').inputmask('mask', {'mask': '9.99'}); 

      var calcTot = function() { 
       var sum = 0; 
       $('.toTotal').each(function(){ 
        sum += Number($(this).val()); 
        }); 
       $('#giveTotal').val('$' + sum.toFixed(2)); 
      } 
      calcTot(); 

      $('.toTotal').change(function(){ 
       calcTot(); 
       }); 

      //I have tried putting it here, too 

      }); 
    </script> 

    <title>Addition</title> 
</head> 
<body> 
<input type="text" class="toTotal"><br /> 
<input type="text" class="toTotal"><br /> 
<input type="text" class="toTotal"><br /> 
<input type="text" id="giveTotal"> 
</body> 
</html> 
+0

당신이 오류의 원인이되는 마스크 코드를 제공 할 수 있습니다 :

그런 다음 'jquery.js'줄 뒤에 다음 스크립트 참조를 추가? –

+0

내가 말했듯이 나는 많은 종류를 시도했다. 내가 원했던 것은'$ ('. to total') 마스크 ('000,000.00', {reverse : true});였다. 나는 또한'.inputmask'를 사용하고,'{reverse : true}'가 있거나 없거나, 0 대신에 9s를 사용하는 변이를 시도했다. 게재 위치가 문제 인지도 모르겠습니다. 내 첫 번째 옵션은'var calcTot = function() {'앞에이 코드를 삽입하는 것이다. 나는 또한 준비된 기능의 끝과 그것의 중간에 그것을 tryied했다. – Andrew

+0

특정 문제를 보지 않고도 대답 할 수 없으므로 전체 코드 샘플을 질문에 제공 할 수 있습니까? 내가 이것을 보지 않고 생각할 수있는 유일한 해결책은 Mask Plugin 스크립트가 포함되지 않았다는 것입니다. –

답변

7

샘플 코드에 참조 된 마스킹 라이브러리 스크립트가 없습니다. Digital Bush Masked Input Plugin Script을 다운로드하여 JS 폴더에 복사해야합니다.

<script src="/js/jquery.maskedinput.min.js"></script> 
+0

고맙습니다! 나는 그것이 내가 잃어버린 엄청나게 작은 어떤 것이어야한다는 것을 알았다. – Andrew