Issue
I want to show different messages on the page itself if different combinations are selected. Here is what I already have:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>testpage</title>
</head>
<body>
<input value="test" onclick="return send();"
type="submit"><br>
<form name="form1"></form>
<span ="">
<select name="A" id="A">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span><span ="">
<select name="B" id="B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</span>
</body>
</html>
For example I want to get a message in red font below all that says "Good Choice" if I press the "test" button and in the first box "1" is selected and in the second "0". And if you select "0" in the first box and "1! in the second it should say for example "Bad Choice".
Solution
If you don't want popups, you have to dedicate an element on the page to display the messages via its innerHTML property. Note the SPAN at the bottom:
HTML
<input value="test" onclick="return send();" type="button"><br>
<select name="A" id="A">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="B" id="B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<span id="result" style="color:red" ></span>
With this setup all you have to do is to implement function send(). It has to check values of your dropdown boxes and assign respective message to the SPAN:
JavaScript
function send() {
var i1 = document.getElementById('A').value;
var i2 = document.getElementById('B').value;
var spn = document.getElementById('result');
if (i1 == "1" && i2 == "0")
spn.innerHTML = 'Good Choice!'
else if (i1 == "0" && i2 == "1")
spn.innerHTML = 'Bad Choice!'
else
spn.innerHTML = 'Whatever!'
}
Give it a spin:
Answered By - Yuriy Galanter
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.