다시로드하지 않고 제출 버튼을 클릭하지 않고 계산 스크립트를 찾으십시오.

웹 사이트에서 원하는 항목의 양만 변경하고 가격을 즉시 변경하는 여러 가지 양식을 보았습니다. 다시로드하지 않고 제출 (또는 계산) 버튼을 클릭하지 않습니다.다시로드하지 않고 제출 버튼을 클릭하지 않고 계산 스크립트를 찾으십시오.

내가 찾고있는 것은 같지만 매우 간단합니다.

Amount of pages: [textfield] 
price: [answer]

그게 전부입니다. 코드는 [textfield]의 입력을 받아야하고 특정 숫자 (코드에서 변경할 수 있음)를 곱해야합니다. 계산 결과는 [대답]에 표시해야합니다.

Google에서 둘러 보았지만 제출 버튼을 사용하는 매우 어렵고 큰 양식 만 찾을 수 있습니다. 그리고 내 PHP/아약스/자바 스크립트는 te 코드를 직접 작성하기에 충분하지 않습니다. Stackoverflow에 여러 개의 제출 양식이 있다는 것을 알고 있지만 원하는대로 편집 할 수있는 방법을 이해할 수 없습니다.

코드를 넣을 멋진 양식을 만들었습니다. 분명히 모든 주요 브라우저에서 작동해야합니다.

편집 : Khòi에서 제공 한 코드를 사용해 보았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script src="jquery-1.8.2.min.js" type="text/javascript" defer="defer"> 
$('#pages').change(function(ev){ 
var total = $('#pages').val() * 0.2; 
$('#total').html((total).toFixed(2)); 
});? 
</script> 
</head> 
<body> 

Pages: <input type="text" name="pages" id="pages" /> 
<br/><br/> 
Total: <span id="total">0.00</span> 

</body> 
</html>

을하지만 그것은 작동하지 않습니다? :

나는이 함께 연주 시도했습니다 Jquery 파일을 다운로드하여이 페이지와 동일한 폴더에 넣었습니다.

출처

2012-10-09 Vinnie Van Rooij

그럼 아무 것도 시도하지 않았습니까? –

예,했으나 알아 내지 못했습니다. 내가 원했던 것을하지 못하게하는 몇 가지 형태를 시도 했으므로 나는 그들이 원하는대로 할 수 있도록 노력했다 .... 그러나 일하지 않았다. 나는 몇몇 브라우저가 작동하는 것을 발견했지만 모든 브라우저에서는 그렇지 않습니다. 그리고 지금은 PHP 스크립트가 있는데 작동합니다 ...하지만 제출 버튼이 있고 결과를 보여주기 위해 다시로드됩니다. 저는 PHP/ajax/javascript 등 매우 숙련되지 않았습니다. 그래서 제가 편집 할 수있는 것을 찾아 내서 그것을 작동시키는 것은 매우 어렵습니다. –

몇 가지 기본 JQuery를 배우는 것이 좋습니다. 이러한 것들은 JQuery로 매우 효율적으로 수행 할 수 있으며 학습 곡선이 너무 가파르지 않습니다. 당신이 떠나지 않고 계산하기 위해 찾고 있다면

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 

<title>test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#pages').keyup(function(ev){ 
     var total = $('#pages').val() * 0.2; 
     $('#total').html((total).toFixed(2)); 
    }); 
}); 
</script> 
</head> 
<body> 

Pages: <input type="text" name="pages" id="pages" /> 
<br/><br/> 
Total: <span id="total">0.00</span> 

</body> 
</html>

출처

2012-10-09 12:47:39

와우! 감사! 그것은 이미 끝내 보입니다. 나는 너의 충고를 받아 들일 것이다. 그만한 가치가있는 것 같아. 나는 배은망덕 한 소리를 내고 싶지 않습니다. 그러나 텍스트 필드 외의 곳을 클릭하지 않고도 다시 계산할 수있는 쉬운 방법이 있습니까? 그래서 당신이 타이핑 할 때 모든 것을 계산합니다. 당신의 일을 끝낼 때가 아닙니다. 나는 당신이 내 뜻을 알기를 바랍니다. 나는 자신을 설명하는 것을 잘하지 못합니다. –

나는이 beginbox를 편집해야만했다. 나는이 코멘트 박스에 코드를 게시 할 수 없었다. ... –

하나의 HTML 페이지에도 완전한 작업 코드를 추가했다. –

: 여기 http://jsfiddle.net/jRs3n/

은 하나의 작업 HTML 페이지의 전체 코드입니다 :

나는 당신에게 당신이 시작하는 바이올린을 만든 change에서 keyup으로 이벤트를 변경해야하는 상자를 사용하면 특정 필드의 각 키를 누른 후에 업데이트 할 수 있습니다.

출처

2012-10-09 21:18:53 kwelch

야 .... 그 위대한 트릭이야. D. 이제는 페이지에 넣는 방법을 알아 냈습니다. 나는 당신에게 당신의 대답에 대해 어떤 점수를 주는지를 모른다. 그러나 나는 그것을 "올릴"것이다. (나는 조금 새로운 .... ....) –

또한'keyup'에서 뭔가를하고 데이터를 검증하고 싶다면 응답 필드에 NaN을 얻을 수 있습니다. – kwelch

예제를 위해 추가 된 키 - http://jsfiddle.net/jRs3n/6/ –

다시로드하지 않고 제출 버튼을 클릭하지 않고 계산 스크립트를 찾으십시오.

답변

관련 문제