来个实时更新文本框关于某个项的值

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

<html xmlns="http://www.w3.org/1999/xhtml">
4

<head id="Head1">
5

<title>
7

</title>
9

<base target="_self" />
10

function $(id)
13

{
14

return document.getElementById(id);
15

}
16

String.prototype.trim = function()
17

{
18

var reExtraSpace = /^\s+(.*?)\s+$/;
19

return this.replace(reExtraSpace, "$1");
20

}
21

function AddMoney(objDropDownList,sTextBoxID,sMoney)
22

{
23

var objSel = objDropDownList;
24

var objTxt = $(sTextBoxID);
25

var sNewAmount = objSel.options[objSel.selectedIndex].text;
26

var sMoney = sMoney + "元"; //e.g. 50元
27

var strNewValue = sNewAmount + "张";
28

// if (sNewAmount.trim() == "")
30

// return;
31

objTxt.value = sNewAmount;
33

var oMemo = $("txtMemo");
34

var rePatten = /(\d+\S+元)/;
35

var strSource = oMemo.value;
36

if (rePatten.test(strSource))
37

{
38

var strTmpSource = RegExp.$1;
39

var strFind = sMoney;
40

var arrSource = strTmpSource.split(",");
42

var arrLen = arrSource.length;
43

var IsExistsValue = false;
44

for (var i = 0;i < arrLen;i++)
45

{
46

var sTmpSource = arrSource[i];
47

//alert(sTmpSource);
48

var iTmpIndex = sTmpSource.indexOf(strFind);
49

if (iTmpIndex > -1)
50

{
51

if (sNewAmount == "")
52

{
53

arrSource[i] = null;
54

}
55

else
56

arrSource[i] = sTmpSource.replace(sTmpSource.substring(0,iTmpIndex),strNewValue);
57

IsExistsValue = true;
58

break;
59

}
60

}
62

var arrResult = [];
63

var j = 0;
64

/*解决当数据删除时留下“,”的问题*/
65

for (var i = 0;i < arrSource.length; i++)
66

{
67

if (arrSource[i] == null || arrSource[i] == "")
68

continue;
69

arrResult[j] = arrSource[i];
70

j ++;
71

}
72

arrSource = arrResult;
73

if (! IsExistsValue)
74

{
75

arrSource[arrLen] = strNewValue + sMoney;
76

}
77

// alert(strSource + " ," + arrSource);
78

strSource = strSource.replace(rePatten,arrSource);
79

oMemo.value = strSource;
80

}
81

else
82

{
83

if (oMemo.value.trim() == "")
84

oMemo.value = strNewValue + sMoney;
85

else
86

oMemo.value += "\r\n" + strNewValue + sMoney;
87

}
88

}
89

function IsEqualMoney()
91

{
92

var oMoney = $("txtChangeAmount");
93

var oMemo = $("txtMemo");
94

var iAmount = parseInt(oMoney.value);
95

var reMoneyPatten = "元";
96

var reAmountPatten = "张";
97

var iTotalAmount = 0;
98

var rePatten = /(\d+\S+元)/;
100

var strSource = oMemo.value;
101

if (rePatten.test(strSource))
102

{
103

var strTmpSource = RegExp.$1;
104

var arrSource = strTmpSource.split(",");
105

var arrLen = arrSource.length;
106

for (var i = 0;i < arrLen; i++)
107

{
108

var sTmp = arrSource[i];
109

var iTmpIndex = sTmp.indexOf(reAmountPatten);
110

if (iTmpIndex > -1)
111

{
112

var iTmpCount = sTmp.substring(0,iTmpIndex);
113

iTmpCount = parseInt(iTmpCount);
114

var iTmpAmount = sTmp.substring(iTmpIndex + 1,sTmp.length - 1);
115

iTmpAmount = parseInt(iTmpAmount);
116

var iTmpResult = 0;
117

iTmpResult = iTmpAmount * iTmpCount;
118

//alert(iTmpCount + " 张 " + iTmpAmount + " " + iTmpResult);
119

iTotalAmount += iTmpResult;
120

}
121

}
122

}
123

124

if (iTotalAmount != iAmount)
125

{
126

alert("请确认兑换金额一致：兑换金额：" + iAmount + "\r\n而备注中的金额为：" + iTotalAmount);
127

oMoney.focus();
128

oMoney.select();
129

return false;
130

}
131

return true;
132

133

}
134

135

function CheckData()
136

{
137

var oMoney = $("txtChangeAmount");
138

var oMemo = $("txtMemo");
139

140

if (!IsEqualMoney())
141

{
142

return false;
143

}
144

145

return true;
146

147

}
148

</script>
149

150

.style1 {
152

text-align: center;
153

}
154

</style>
155

156

</head>
157

<base target="_self" />
158

<body scroll="no">
159

<form name="form1" method="post" action="#" id="form1">
160

<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%" id="infotable">
161

<tr align="right">
162

<td>
163

兑换金额</td>
164

<td align="left">
165

<input name="txtChangeAmount" type="text" id="txtChangeAmount" style="border-style:Groove;172px;" /></td>
166

<tr>
167

<td colspan="2" height="70px" valign="middle">
168

<table width="100%" cellpadding="0" cellspacing="0" border="0">
169

<tr>
170

<td align="right" style=" 7%">
171

50元 </td>
172

<td align="left" width="10%">
173

<input name="txtFifty" type="text" id="txtFifty" style="border-style:Groove;30px;" /><select name="ddlFifty" id="ddlFifty" onchange="AddMoney(this,'txtFifty','50')" style="20px;">
174

<option value=""></option>
175

<option value="1">1</option>
176

<option value="2">2</option>
177

<option value="3">3</option>
178

<option value="4">4</option>
179

<option value="5">5</option>
180

<option value="6">6</option>
181

<option value="7">7</option>
182

<option value="8">8</option>
183

<option value="9">9</option>
184

<option value="10">10</option>
185

186

</select>张</td>
187

<td width="5%" align="right">
188

20元 </td>
189

<td align="left" width="10%">
190

<input name="txtTwenty" type="text" id="txtTwenty" style="border-style:Groove;30px;" /><select name="ddlTwenty" id="ddlTwenty" onchange="AddMoney(this,'txtTwenty','20')" style="20px;">
191

<option value=""></option>
192

<option value="1">1</option>
193

<option value="2">2</option>
194

<option value="3">3</option>
195

<option value="4">4</option>
196

<option value="5">5</option>
197

<option value="6">6</option>
198

<option value="7">7</option>
199

<option value="8">8</option>
200

<option value="9">9</option>
201

<option value="10">10</option>
202

203

</select>张</td>
204

<td width="5%" align="right">
205

10元 </td>
206

<td align="left" width="10%">
207

<input name="txtTen" type="text" id="txtTen" style="border-style:Groove;30px;" /><select name="ddlTen" id="ddlTen" onchange="AddMoney(this,'txtTen','10')" style="20px;">
208

<option value=""></option>
209

<option value="1">1</option>
210

<option value="2">2</option>
211

<option value="3">3</option>
212

<option value="4">4</option>
213

<option value="5">5</option>
214

<option value="6">6</option>
215

<option value="7">7</option>
216

<option value="8">8</option>
217

<option value="9">9</option>
218

<option value="10">10</option>
219

220

</select>张</td>
221

</tr>
222

<tr>
223

<td style=" 7%" class="style1">
224

5元 </td>
225

<td align="left" width="10%">
226

<input name="txtFive" type="text" id="txtFive" style="border-style:Groove;30px;" /><select name="ddlFive" id="ddlFive" onchange="AddMoney(this,'txtFive','5')" style="20px;">
227

<option value=""></option>
228

<option value="1">1</option>
229

<option value="2">2</option>
230

<option value="3">3</option>
231

<option value="4">4</option>
232

<option value="5">5</option>
233

<option value="6">6</option>
234

<option value="7">7</option>
235

<option value="8">8</option>
236

<option value="9">9</option>
237

<option value="10">10</option>
238

239

</select>张</td>
240

<td align="right" width="5%">
241

2元 </td>
242

<td align="left" width="10%">
243

<input name="txtTwo" type="text" id="txtTwo" style="border-style:Groove;30px;" /><select name="ddlTwo" id="ddlTwo" onchange="AddMoney(this,'txtTwo','2')" style="20px;">
244

<option value=""></option>
245

<option value="1">1</option>
246

<option value="2">2</option>
247

<option value="3">3</option>
248

<option value="4">4</option>
249

<option value="5">5</option>
250

<option value="6">6</option>
251

<option value="7">7</option>
252

<option value="8">8</option>
253

<option value="9">9</option>
254

<option value="10">10</option>
255

256

</select>张</td>
257

<td width="5%" align="right">
258

1元 </td>
259

<td align="left" width="10%">
260

<input name="txtOne" type="text" id="txtOne" style="border-style:Groove;30px;" /><select name="ddlOne" id="ddlOne" onchange="AddMoney(this,'txtOne','1')" style="20px;">
261

<option value=""></option>
262

<option value="1">1</option>
263

<option value="2">2</option>
264

<option value="3">3</option>
265

<option value="4">4</option>
266

<option value="5">5</option>
267

<option value="6">6</option>
268

<option value="7">7</option>
269

<option value="8">8</option>
270

<option value="9">9</option>
271

<option value="10">10</option>
272

273

</select>张</td>
274

</tr>
275

</table>
276

</td>
277

</tr>
278

<tr>
279

<td align="right">
280

备注信息</td>
281

<td align="left">
282

<textarea name="txtMemo" rows="2" cols="20" id="txtMemo" style="border-style:Groove;height:130px;462px;"></textarea></td>
283

</tr>
284

<tr>
285

<td colspan="2" style="text-align: center">
286

<table border="0" cellpadding="3" cellspacing="0" width="500">
287

<tr>
288

<td width="20%" style="height: 20px">
289

 </td>
290

<td width="20%" style="height: 20px">
291

 </td>
292

<td width="20%" style="height: 20px">
293

<input type="button" name="imgBtnSave" id="imgBtnSave" value="确定" onclick="return CheckData();" style="border-0px;" /></td>
294

<td width="20%" style="height: 20px">
295

</td>
296

<td width="20%" style="height: 20px">
297

 </td>
298

</tr>
299

</table>
300

</td>
301

</tr>
302

</table>
303

</form>
304

</body>
305

</html>
306

转载请注明出处［http://samlin.cnblogs.com/］

欢迎关注本人公众号：

作者赞赏