求一个js表单效果

<form name="tradeSilverAverageForm" method="post" action="/Project/tradeSilverAverage.do">
输入框1：<input type="text" name="averageFoodStuff" value="0" size="2">
输入框2：<input type="text" name="averageCrystal" value="0" size="2" >
输入框3：<input type="text" name="averageMatal" value="0" size="2">
总值：<span id="m">变量（从后台传过来的）</span>
<input type="submit" value="按钮">
</form>我想实现这样的效果就是，当输入框1有值输入的时候，总值即：m.innerHTML取出id为m里面的数值自动减去输入框1的值，并且及时改变总值且显示出来，当输入框2有值输入的时候，也自动减去输入框2的值，并且及时改变总值且显示出来，当输入框3有值输入的时候，也自动减去输入框3的值，并且及时改变总值且显示出来。也就是说不管那个输入框输入数字，都自动减去这个数，并且及时改变总值里面的数显示出来。当都输入完了之后，如果总值<0,那么按钮不可点击。如果总值>0的话，把总值除以3取模，分别给三个输入框的值加上模并且显示出来，把取模之后余下的数在加给输入框1的值。求高手帮忙了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>默认标题 by songpengasp</title>
<script language="javascript">
var m;
function txt_changed()
{
var m_new;
if(typeof(m) == "undefined")
{
m = $("m").innerText;
}

m_new = m;

if($("averageFoodStuff").value != "")
{
m_new = m_new - $("averageFoodStuff").value;
}

if($("averageCrystal").value != "")
{
m_new = m_new - $("averageCrystal").value;
}

if($("averageMatal").value != "")
{
m_new = m_new - $("averageMatal").value;
}

$("m").innerText = m_new;
if (m_new <0)
{
$("btn").disabled = "disabled";
}
else
{
$("btn").disabled = "";
}
}function $(id)
{
return document.getElementById(id);
}
</script>
</head><body>
<form name="tradeSilverAverageForm" method="post" action="/Project/tradeSilverAverage.do">
输入框1： <input type="text" id="averageFoodStuff" name="averageFoodStuff" onblur="javascript:txt_changed()" value="0" size="2">
输入框2： <input type="text" id="averageCrystal" name="averageCrystal" onblur="javascript:txt_changed()" value="0" size="2" >
输入框3： <input type="text" id="averageMatal" name="averageMatal" onblur="javascript:txt_changed()" value="0" size="2">
总值： <span id="m"> 2008 </span>
<input type="submit" id="btn" value="按钮">
</form>
</body>
</html>
那么当m_new >0的时候，点击按钮，但是不提交表单，实现的效果是用m_new 除以3取模，然后把输入框1+模+余数，输入框2和输入框3分别加上模，并且显示出来，再次点击按钮的时候才提交，这要怎么做呢
恩，楼主说的对。我改良了一下，但是还有一个问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY onload='getElements();'>
<form id='tradeSilverAverageForm' name="tradeSilverAverageForm" method="post" action="/Project/tradeSilverAverage.do">
输入框1：<input id='averageFoodStuff' type="text" name="averageFoodStuff" value="0" size="2"><br />
输入框2：<input id='averageCrystal' type="text" name="averageCrystal" value="0" size="2" ><br />
输入框3：<input id='averageMatal' type="text" name="averageMatal" value="0" size="2"><br />
总值：<span id="m">1000</span><br />
总值的余数：<span id="n"></span><br />
                总值的模：<span id="l"></span><br />
<input id='obj_button' type="submit" value="按钮">
</form>
<div id='obj_div' style='display:none;'>只有当模为0的时候这个层才会显示</div>
<script>
function $( str_idName )
{
return document.getElementById( str_idName );
}
function getElements()
{
var obj_inputs = $( 'tradeSilverAverageForm' ).getElementsByTagName( 'input' );
for ( var _int_i = 0; _int_i < obj_inputs.length; _int_i++ )
{
if ( obj_inputs[_int_i].type == 'text' )
{
obj_inputs[_int_i].onchange = function()
{
getRezult( this.id, this.value );
}
}
}
}
function getRezult( obj_id,obj_num )
{
var obj_m = $( 'm' ).innerHTML;
if ( $( obj_id ).value != '' )
{
obj_m -= obj_num;
}
$( 'm' ).innerHTML = obj_m;
if( obj_m < '0' )
{
$( 'obj_button' ).disabled = true;
$( 'obj_div' ).style.display = 'none';
}
else if ( obj_m == '0' )
{
$( 'obj_button' ).disabled = false;
$( 'obj_div' ).style.display = 'block';
}
else
{
$( 'n' ).innerHTML = obj_m % 3;
                                        $( 'l' ).innerHTML = Math.floor(obj_m / 3);
$( 'obj_div' ).style.display = 'none';
}
$( 'averageFoodStuff' ).value = parseInt( $( 'averageFoodStuff' ).value )+parseInt( $( 'l' ).innerHTML ) + parseInt( $( 'n' ).innerHTML );
$( 'averageCrystal' ).value = parseInt( $( 'averageCrystal' ).value ) + parseInt( $( 'l' ).innerHTML );
$( 'averageMatal' ).value = parseInt( $( 'averageMatal' ).value ) + parseInt( $( 'l' ).innerHTML );
}
</script>
</BODY>
</HTML>怎么在输入框输完了之后在执行$( 'averageFoodStuff' ).value = parseInt( $( 'averageFoodStuff' ).value )+parseInt( $( 'l' ).innerHTML ) + parseInt( $( 'n' ).innerHTML );
$( 'averageCrystal' ).value = parseInt( $( 'averageCrystal' ).value ) + parseInt( $( 'l' ).innerHTML );
$( 'averageMatal' ).value = parseInt( $( 'averageMatal' ).value ) + parseInt( $( 'l' ).innerHTML );
这一步呢？
上面那个，每次往输入框里输入值的时候都执行这一步，那么三个输入框的总值将不会等于初始的总值，这个结果是不对的。我希望在输入完之后在执行每个输入框加模
贴代码的时候选中然后加上ubb，否则拷贝出去没法调试，csdn会在其中加些空格。
[ubb]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY onload='getElements();'>
<form id='tradeSilverAverageForm' name="tradeSilverAverageForm" method="post" action="/Project/tradeSilverAverage.do">
输入框1：<input id='averageFoodStuff' type="text" name="averageFoodStuff" value="0" size="2"><br />
输入框2：<input id='averageCrystal' type="text" name="averageCrystal" value="0" size="2" ><br />
输入框3：<input id='averageMatal' type="text" name="averageMatal" value="0" size="2"><br />
总值：<span id="m">1000</span><br />
总值的余数：<span id="n"></span><br />
                总值的模：<span id="l"></span><br />
<input id='obj_button' type="submit" value="按钮">
</form>
<div id='obj_div' style='display:none;'>只有当模为0的时候这个层才会显示</div>
<script>
function $( str_idName )
{
return document.getElementById( str_idName );
}
function getElements()
{
var obj_inputs = $( 'tradeSilverAverageForm' ).getElementsByTagName( 'input' );
for ( var _int_i = 0; _int_i < obj_inputs.length; _int_i++ )
{
if ( obj_inputs[_int_i].type == 'text' )
{
obj_inputs[_int_i].onchange = function()
{
getRezult( this.id, this.value );
}
}
}
}
function getRezult( obj_id,obj_num )
{
var obj_m = $( 'm' ).innerHTML;
if ( $( obj_id ).value != '' )
{
obj_m -= obj_num;
}
$( 'm' ).innerHTML = obj_m;
if( obj_m < '0' )
{
$( 'obj_button' ).disabled = true;
$( 'obj_div' ).style.display = 'none';
}
else if ( obj_m == '0' )
{
$( 'obj_button' ).disabled = false;
$( 'obj_div' ).style.display = 'block';
}
else
{
$( 'n' ).innerHTML = obj_m % 3;
                                        $( 'l' ).innerHTML = Math.floor(obj_m / 3);
$( 'obj_div' ).style.display = 'none';
}
$( 'averageFoodStuff' ).value = parseInt( $( 'averageFoodStuff' ).value )+parseInt( $( 'l' ).innerHTML ) + parseInt( $( 'n' ).innerHTML );
$( 'averageCrystal' ).value = parseInt( $( 'averageCrystal' ).value ) + parseInt( $( 'l' ).innerHTML );
$( 'averageMatal' ).value = parseInt( $( 'averageMatal' ).value ) + parseInt( $( 'l' ).innerHTML );
}
</script>
</BODY>
</HTML>[/ubb]
星辰技术社区:www.netcsharp.cn,我们将帮您以最快的速度找到最佳的解决方案
灌水机代码：www.dullwolf.cn/CSDNer.rar下载。