Member Avatar for kavitha N

Hi,
I am looking for when you select a value from dropdown and submit. The results has to show in the same page with percentage. It is like voting.

Thanks in advance.

  • 3 Contributors
  • 12 Replies
  • 396 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 12 Replies

Member Avatar for minitauros

Do you want an AJAX request to be executed when that happens? And do you maybe have some more information about the case? Like what does the <select> element look like, and how does the percentage get calculated?

Member Avatar for kavitha N

Any kind of script is fine for me. When you select any option in dropdown and submit, the result has to show within the page.
Example in dropdown options will be like Apple, Banana, Mango.
In Result it has to show Apple 50%, Banana 25%, Mango 25%.

Member Avatar for minitauros

What about something like:

$(document).ready(function()
{
    $('select#id').change(function()
    {
        var value = $(this).val();
        $('span#id').html(value);
    });
});
Member Avatar for kavitha N

Hey can you explain me in detail nad i am beginner for javascript and jquery.

Member Avatar for minitauros

Yes of course :). Note that in order for this to work you need to have loaded jQuery.

// As soon as the document becomes ready we want to execute a function. We cannot
// do this earlier, as our target elements won't exist yet when the Javascript is 
// parsed.
$(document).ready(function()
{
    // When the select with the ID of "id" changes, we want to execute a function.
    $('select#id').change(function()
    {
        // Let's get the value of the selected option.
        var value = $(this).val();

        // And let's then set the innerHTML of the <span> (which is what goes 
        // between the <span> and </span> tags) with the ID of "id" to
        // be that value.
        $('span#id').html(value);
    });
});
Edited by minitauros
Member Avatar for JorgeM

To expand on minitauros' example, i think a bit more logic is needed. Rather than just showing the value that was selected, for a "voting" type function, you need to maintain a record of each option that is selected as well as total selections so that you can keep a running total.

Here is a simple example put together fairly quickly. With some additional work, you can make the code more efficient by leveraging arrays, functions, etc..

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<select id="dropdown">
<option>Vote</option>
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
</select>
<br/><br>

<table>
<tr><td>Apple:</td><td><span id="result1">0</span>%</td><td></tr>
<tr><td>Banana:</td><td><span id="result2">0</span>%</td><td></tr>
<tr><td>Mango:</td><td><span id="result3">0</span>%</td><td></tr>
</table>

<script>
$(document).ready(function(){

    var total = 0;
    var apple = 0;
    var banana = 0;
    var mango = 0;
    $("#dropdown").change(function() {    
      var n = $(this).val();
      switch (n)
      {
      case "Apple":
       total +=1;
       apple +=1
       break;
      case "Banana":
       total +=1;
       banana +=1;
       break;
      case "Mango": 
       total +=1;
       mango +=1;
       break;
      }
      $(this).val("Vote")
      $('#result1').html(((apple/total)*100).toFixed(0));
      $('#result2').html(((banana/total)*100).toFixed(0));
      $('#result3').html(((mango/total)*100).toFixed(0));
    });

});
</script>

</body>
</html>

Demo --> http://itg.somee.com/dw/dw-466517/

Edited by JorgeM
Member Avatar for kavitha N

Hey thank you very much this is what i am looking.

And is it passible in the table we can show one more colum with numbers of people voted.

Member Avatar for JorgeM

Yes, since the total is already being tracked, just display it to another span element.

<span id="total">0</span>

In the JavaScript function... $('#total').html(total);

see the updated demo.

Member Avatar for kavitha N

sorry man disturbing again and again.

Now this is working fine in all the systems, but it is not showing already voted nos list. its showing from 0.

My requirement is it has to show the updated list whoever it opens the page.

Member Avatar for JorgeM

My requirement is it has to show the updated list whoever it opens the page.

This can't be implemented with javascript alone. You need some server side help.

You'd have to store the information in a data source such as a database. Or it can be done without a database where the server just holds the values in memory but a restart of web services would recycle the values.

Ether solution requires a lot more development.

Member Avatar for kavitha N

Thanks for your inputs. And i am trying to use XML to store data.

Member Avatar for JorgeM

You are going to need some type of server side scripting to help you read and write to an XML file, such as PHP, ASP.NET, JAVA, etc...

Since the example discussed so far has focused on client side, there is no centralized storage component.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.