CODEWITHSUNDEEP
javascripthtmlhtml-select
user3363781
user3363781

Reputation: 15

How to show different messages (not popup) if different options selected. Javascript

I want to show different messages on the page itself if different combinations are selected. Here is what I already have:

http://jsfiddle.net/uDJd8/

<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".

Upvotes: 0

Views: 793

Answers (2)

shenku
shenku

Reputation: 12458

I have forked your jsfiddle link to the following: http://jsfiddle.net/6aBsy/1/

Just one thing to note, your markup that you supplied is invalid, so if you are posting to the server it wont work.

So based on the following markup:

 <button class="submit-action">test</button><br>

<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>
<br/>
<label class="message"></label>

And the following Javascript (You need jquery)

  var messages = [{
    option1: 0,
    option2: 1,
    message: 'Awesome'
},{
    option1: 1,
    option2: 0,
    message: 'Lame'
}]; // etc.

$('.submit-action').click(function(){

    var optionA = $('#A').val();
    var optionB = $('#B').val();
    $('.message').text('');

    $(messages).filter(function(index){ 
        if (messages[index].option1==optionA && messages[index].option2==optionB) {
          $('.message').text(messages[index].message);
        }
    });

});

Basically just fill the json with the results and messages you want.

Upvotes: 0

Yuriy Galanter
Yuriy Galanter

Reputation: 39777

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:

Demo

Upvotes: 1

Related Questions