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.
kavitha N 0 Newbie Poster
minitauros 151 Junior Poster Featured Poster
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?
kavitha N 0 Newbie Poster
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%.
minitauros 151 Junior Poster Featured Poster
What about something like:
$(document).ready(function()
{
$('select#id').change(function()
{
var value = $(this).val();
$('span#id').html(value);
});
});
kavitha N 0 Newbie Poster
Hey can you explain me in detail nad i am beginner for javascript and jquery.
minitauros 151 Junior Poster Featured Poster
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);
});
});
JorgeM 958 Problem Solver Team Colleague Featured Poster
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/
kavitha N 0 Newbie Poster
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.
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.
kavitha N 0 Newbie Poster
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.
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.
kavitha N 0 Newbie Poster
Thanks for your inputs. And i am trying to use XML to store data.
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.