The use of JavaScript functions and the acquisition of drop-down boxes, text boxes, and radio values are combined with a Taobao bidding case. . .

Taobao bidding case:

JavaScript code:

<script type="text/javascript">
			function Pay(){
				var Price = 2000;
				var AddPrice = document.getElementById("AddPrice").value;
				if(AddPrice=="")
				{
					document.getElementById("span2").innerHTML='<font color="red">Pro, please enter the added price</font>';
				}
				var num = document.getElementById("num").value;
				if(num=="")
				{
					document.getElementById("span3").innerHTML='<font color="red">Dear, please enter the number you want to shoot</font>';
				}
				var sex = sex1.checked ? 'male' : 'female';
				 was totalMoney;
				var Pay1 = document.getElementById("Pay1");
				var index = Pay1.selectedIndex;
				switch(index) {
					case 0:
						document.getElementById("span1").innerHTML='<font color="red">10% discount on WeChat payment</font>';
						totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
						break;
					case 1:
						document.getElementById("span1").innerHTML='<font color="red">Alipay 20% off</font>';
						totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.8;
						break;
					case 2:
						document.getElementById("span1").innerHTML='<font color="red">30% off for UnionPay payment</font>';
						totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.7;
						break;
					case 3:
						document.getElementById("span1").innerHTML='<font color="red">10% off QQ payment</font>';
						totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num)*0.9;
						break;
					case 4:
						document.getElementById("span1").innerHTML='<font color="red">No discount for credit card payment</font>';
						totalMoney = (parseInt(Price) + parseInt(AddPrice)) * parseInt(num);
						break;
						default:document.getElementById("span1").innerHTML='<font color="red" >Pro, you can choose the payment method</font>';
				}
              if(totalMoney==undefined)
              {
              	document.getElementById("span5").innerHTML='<font color=red>The total price cannot be calculated</font>';
              }else
              {
              	document.getElementById("TotalPrice").value=totalMoney;
              }
				
			}
		
		</script>

HTML part of the code:

<body>
		<form action="#" method="post">
			<h2>Welcome to Taobao auction</h2>
			<h3>This auction item is: Guide Dogs</h3> Reserve price:
			<input type="text" id="Price" value="2000" /><br/><br/>
			 Markup:
			<input type="text" id="AddPrice" /><br/>
			<span id="span2"></span><br/> 数量：
			<input type="text" id="num" /><br/>
			<span id="span3"></span><br/> 性别：
			<input type="radio" id="sex1" name="sex"  checked="checked"/>男
			<input type="radio" id="sex2" name="sex" />女<br/><br/> 付款方式：
			<select id="Pay1">
				<option>WeChat Pay</option>
				<option>Alipay payment</option>
				<option>UnionPay Payment</option>
				<option>QQ payment</option>
				<option>Pay by card</option>
			</select><br/>
			<span id="span1" ></span><br/> 总价：
			<input type="text" id="TotalPrice" /><br/><span id="span5" ></span><br/>
			<input type="button" value="确认" name="dj" onclick="Pay()" />
		</form>
	</body>

Result run graph:

The use of JavaScript functions and the acquisition of drop-down boxes, text boxes, and radio values are combined with a Taobao bidding case. . .

Guess you like