Save the counts of each variable using JQuery

StackOverflow https://stackoverflow.com/questions/23591070

Вопрос

I'm working on a JQuery question that takes an input from the select-box (A,B,C and D) and each time the 'submit' button is clicked it displays a table within the same page that shows all these variables with their frequency (counts).

I've managed to do everything except the part where it actually saves the count of the variables each time a user press the submit button. You can see the codes below I've done so far...

Do I have to use an array outside the submit function in the script file to save the counts of each variable..?? I hope someone could help... Thanks-in advance!

HTML file:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="jquery.js"></script>
        <script src="Script.js"></script>
        <title>Grade Values</title>
    </head>
    <body> 
        <div id="gradesS">
        <form action="abcd.php">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit">Submit</button>
        </form>
        </div>
        <div id="result"> </div>
    </body>
</html>

php File: (abcd.php)

<?php
$A=0;
$B=0;
$C=0;
$D=0;
if($_REQUEST['grades']=="A"){
    $A++;
}
if($_REQUEST['grades']=="B"){
    $B++;
}
if($_REQUEST['grades']=="C"){
    $C++;
}
if($_REQUEST['grades']=="D"){
    $D++;
}
$output='';
$output.='<table border="1"><tr><td>Grades</td><td>Frequency</td>';
$output.='<tr><td> A</td><td>'.$A.'</td></tr>';
$output.='<tr><td> B</td><td>'.$B.'</td></tr>';
$output.='<tr><td> C</td><td>'.$C.'</td></tr>';
$output.='<tr><td> D</td><td>'.$D.'</td></tr>';
$output.='</table>';

echo($output);

?>

JavaScript file (JQuery):

$(document).ready(function () {
    $('#gradess').submit(function() {
         event.preventDefault();
         $.get('abcd.php', {'grades': $('#grades :selected').val()}, function(data) {
        $('#result').html(data);
    });
});
});
Это было полезно?

Решение

If you don't want use DB you can save the counters in window property, but the counters will lose if you refresh the page:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Grade Values</title>
        <script type="text/javascript">
            $(document).ready(function () {
                window.A = 0;
                window.B = 0;
                window.C = 0;
                window.D = 0;
            $("#gradess").on('click', function() {
                 var value = $('#grades :selected').val();
                 if(value == "A")      window.A++;
                 else if(value == "B") window.B++;
                 else if(value == "C") window.C++;
                 else if(value == "D") window.D++;

                 $("#A").html(window.A);
                 $("#B").html(window.B);
                 $("#C").html(window.C);
                 $("#D").html(window.D);
                 return false;
                });
            });
        </script>
    </head>
    <body> 
        <div id="gradesS">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit" id="gradess">Submit</button>
        </div>

            <div id="result">
                <table border="1"><tr><td>Grades</td><td>Frequency</td>
                    <tr><td> A</td><td id="A">0</td></tr>
                    <tr><td> B</td><td id="B">0</td></tr>
                    <tr><td> C</td><td id="C">0</td></tr>
                    <tr><td> D</td><td id="D">0</td></tr>
                </table>
        </div>
    </body>
</html>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top