添加输入值和默认值

我有这种简短的形式，当用户在下拉菜单中选择第一个选项时，会出现三个字段。第一个字段有一个默认值，而另外两个字段应该由用户填写。然后我需要得到三个字段的总和。如果用户选择第二个选项，则三个字段不会出现。截至目前，这是我的本钱：添加输入值和默认值

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(); 
     } 
    });

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

如前所述，我的不清楚问题是什么。我假设你是问题，这是行不通的。看着你的代码它不会。我重新写自己的东西，我觉得这是你在找什么

$("#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)); 
}

你得到NaN的原因，而是试图浮起了一些不存在的。您可以检查该字段有一个值，如果不呈现0

FIDDLE

UPDATE

这是很简单的，当你隐藏的div只是重置值

NEW FIDDLE

来源

2014-12-24 05:47:21 jmore009

谢谢。我的第一个问题现在回答了。但总的来说，价值并没有改变。如果客户选择“满意”或三个字段隐藏，则总数应该返回到0 – Jennifer

只需复制并粘贴代码即可。它与你的代码是一样的，我已经在Jquery中做了一些基本的修改，并且在你的html中也有错误....... plz检查它，它将完美工作。日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

试试这个：而请不要改变你的HTML也是他们喜欢一些错误的选择对于B你没有关闭"。

$("#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

添加输入值和默认值

回答

相关问题