입력 값 및 기본값 추가

사용자가 드롭 다운 메뉴에서 첫 번째 옵션을 선택하면이 세 가지 필드가 나타납니다. 첫 번째 필드는 기본값을 가지지 만 다른 두 필드는 사용자가 채워야합니다. 그런 다음 세 가지 필드의 합계를 얻어야합니다. 사용자가 두 번째 옵션을 선택하면 세 필드가 나타나지 않습니다. 지금,이 내가있어 무엇 :입력 값 및 기본값 추가

HTML

<select id="select1"> 
    <option value="A">New</option> 
    <option value="B>Satisfied</option> 
</select> 

<div id="d1> 
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;"/> 
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;"/> 
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;"/> 
    <label>Total:</label><input type="text" id="txt1" value=""/> 
</div>

JQuery와

$("#select1").change(function(){ 
     if($(event.target).val() == 'A'){ 
      $('#d1').show(); 
     }else{ 
      $('#d1').hide(); 
     } 
    });

JS 언급 한 바와 같이

function total(){ 
    var a = $("#input1").val(); 
    var b = $("#input2").val(); 
    var c = $("#input3").val(); 

    var d = parseFloat(a, 10); 
    var e = parseFloat(a, 10); 
    var f = parseFloat(a, 10); 

    total = d + e + f; 
    $('#txt1').val(total.toFixed(2));$(
}

출처

2014-12-24 Jennifer

그래서 문제가 무엇을하려고? –

문제는 무엇입니까? – kyo

나는 내 총에서'NaN'을 얻는다. 나는 사용자가 입력 한 입력을 호출 할 때 올바른 일을했는지 알지 못합니다. – Jennifer

, 난의그 질문이 무엇인지 분명히하지 마라. 나는 당신이 문제라고 생각하고있다. 그냥 작동하지 않는다. 코드를 보면 그렇지 않을 것입니다. 나는 물건의 일부를 다시 쓴 나는 이것이 당신이 존재하지 않는 번호를 떠하려고 원인 당신이 NaN을 받고있어

$("#select1").change(function(event){ 
    if($(this).val() == 'A'){ 
    $('#d1').show(); 
    }else{ 
    $('#d1').hide(); 
    } 
}); 

$("input").blur(function(){ 
    total(); 
}); 

function total(){ 
    var a,b,c = 0; 

    var a = $("#input1").val(); 
    var b = $("#input2").val(); 
    var c = $("#input3").val(); 

    if(a != ""){ 
    var d = parseFloat(a, 10); 
    }else{ 
    var d = 0; 
    } 

    if(b != ""){ 
    var e = parseFloat(b, 10); 
    }else{ 
    var e = 0; 
    } 

    if(c != ""){ 
    var f = parseFloat(c, 10); 
    }else{ 
    var f = 0; 
    }  

    var calcTotal = d + e + f; 
    $('#txt1').val(calcTotal.toFixed(2)); 
}

찾고있는 생각합니다. 당신은 해당 필드에 값이 있는지 확인하지 않으면 것은 렌더링 할 수있는 0

FIDDLE

UPDATE 당신이 사업부를 숨길 때 바로 값을 재설정 충분히 간단

NEW FIDDLE

출처

2014-12-24 05:47:21 jmore009

감사합니다. 내 첫 번째 질문에 지금 답변했습니다. 그러나 여전히 전체의 가치는 변하지 않습니다. 고객이 "만족"을 선택하거나 세 필드가 숨겨져 있으면 합계가 0으로 돌아갑니다. – Jennifer

코드를 복사하여 붙여 넣기 만하면됩니다. 그것은 당신과 같은 코드입니다, 나는 Jquery에서 몇 가지 기본적인 수정을했는데 html로 실수도있었습니다 ....... plz 그것을 확인, 완벽하게 작동합니다. 또한 그들은 당신이 "을 폐쇄하지 않은 B에 대한 선택에 같은 몇 가지 오류가 그리고 당신의 HTML을 변경 마십시오 : thnx

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script > 
$(document).ready(function() { 
$("#select1").change(function(){ 
     if($(event.target).val() == 'A'){ 
      $('#d1').show(); 
     }else{ 
      $('#d1').hide(); 
     } 
    }); 
}); 

</script> 
<script type="text/javascript"> 

function total(){ 

    var a = $("#input1").val(); 
    var b = $("#input2").val(); 
    var c = $("#input3").val(); 

    var d = parseFloat(a, 10); 
    var e = parseFloat(a, 10); 
    var f = parseFloat(a, 10); 

    total = d + e + f; 
    document.getElementById('txt1').value=total; 
} 
</script> 

</head> 

<body> 
<select id="select1"> 
    <option value="A">New</option> 
    <option value="B">Satisfied</option> 
</select> 

<div id="d1"> 
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;"/> 
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;"/> 
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;"/> 
    <label>Total:</label><input type="text" id="txt1" value="" onclick="total();" /> 
</div> 
</body> 
</html>

출처

2014-12-24 05:54:01

이 시도.

$("#select1").change(function(event){ 
 
    if($(event.target).val() == 'A'){ 
 
     $('#d1').show(); 
 
    }else{ 
 
     $('#d1').hide(); 
 
    $('#txt1').val(0); 
 

 
    } 
 
}); 
 

 
$("input").on('blur',function(){ 
 
total(); 
 
\t 
 
}); 
 

 
function total(){ 
 
    var a = $("#input1").val(); 
 
    var b = $("#input2").val(); 
 
    var c = $("#input3").val(); 
 
    var total=0; 
 
if(a.length > 0){ 
 
    var d = parseFloat(a, 10); 
 
    total=total+d; 
 
} 
 
if(b.length > 0){ 
 
    var e = parseFloat(b, 10); 
 
    total=total+e; 
 
} 
 
if(c.length > 0){ 
 
    var f = parseFloat(c, 10); \t 
 
    total=total+f; 
 
} 
 

 
    $('#txt1').val(total.toFixed(2)); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value="A">New</option> 
 
    <option value="B">Satisfied</option> 
 
</select> 
 

 
<div id="d1"> 
 
    <label>This is a default value</label><input type="text" id="input1" placeholder="$75,000" style="width: 100px;" > 
 
    <label>Preferred Value:</label><input type="text" id="input2" value="" style="width: 100px;" /> 
 
    <label>Number of Contributors:</label><input type="text" id="input3" value="" style="width: 100px;" /> 
 
    <label>Total:</label><input type="text" id="txt1" value=""/> 
 
</div>

출처

2014-12-24 05:55:14

jQuery(function($) { 
 
    $("#select1").change(function() { 
 
    $('#d1').toggle($(this).val() == 'A'); 
 
    }); 
 

 
    $('#input1, #input2, #input3').change(total) 
 

 
    function total() { 
 
    var a = $("#input1").val(); 
 
    var b = $("#input2").val(); 
 
    var c = $("#input3").val(); 
 

 
    var d = parseFloat(a, 10) || 0; 
 
    var e = parseFloat(b, 10) || 0; 
 
    var f = parseFloat(c, 10) || 0; 
 

 
    total = d + e + f; 
 
    $('#txt1').val(total.toFixed(2)); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value="A">New</option> 
 
    <option value="B">Satisfied</option> 
 
</select> 
 
<div id="d1"> 
 
    <label>This is a default value</label> 
 
    <input type="text" id="input1" placeholder="$75,000" style="width: 100px;" /> 
 
    <label>Preferred Value:</label> 
 
    <input type="text" id="input2" value="" style="width: 100px;" /> 
 
    <label>Number of Contributors:</label> 
 
    <input type="text" id="input3" value="" style="width: 100px;" /> 
 
    <label>Total:</label> 
 
    <input type="text" id="txt1" value="" /> 
 
</div>

출처

2014-12-24 05:56:06

입력 값 및 기본값 추가

답변

관련 문제