Radio button and textbox

[StarLavender]

I need to do for a system that calculate the marks. At first, I had created the radio buttons and textboxes for user to insert the marks, but it seems not so user friendly.

So I decide to change them into automatically calculate the marks which means that when the user select the radio button, the system will automatically calculate and display the marks in the textbox.

For example, maximum marks for question 1 is 5 and rating=1,2,3,4,5 (radio button) and user select 1, therefore the textbox will display value 1. But, for example, when the maximum marks for question 1 is 10 and rating=1,2,3,4,5 (radio button) and user select 3, I believe that most of the people will code the system to calculate and display at textbox witht the value 6. But in manual the marks can be 5 or 6. Therefore, is there any appropriate ways to do this?or any kinds of suggestion or comments which is more suitable to solve this problem are appreciated. Thanks in advance.

The maximum marks and most of the data are retrieved from database and display using looping.

If I want the user select the radio button and directly calculate for the value and display in textxbox, then how?Furthermore, How can I save the value of radio button and textbox (the value which calculate automatically) in the database?

[acoder]

Why can't the rating correspond to the maximum mark, so if it's 10, the rating would be 1 to 10 and not 1 to 5?

Saving the values in the database depends on the language and database you're using. Ask in the appropriate forum.

[StarLavender]

@acoder
If the maximum value is more than 30, there will too many radio button. Which forum is appropriate?

[acoder]

Then don't use radio buttons. Either use a text field or a drop down (select element).

This forum is appropriate for your original question, but if you want to know how to save the values to the database, it will depend on the language/database you're using.

[StarLavender]

@acoder
Ya. I used drop down list now. May I know after I select the marks, then how I can calculate them and show in a textbox? For example, once I select the marks, it will show in the textbox, then when I select the second, the third, and so on, they are going to add one by one and display in the textbox. How I can do for this? Thanks.

[acoder]

When a mark has been selected, use onchange to detect that it has. This can call a function to add up the marks. You can set the values of the ones that haven't been selected yet to 0, so the total mark is correct. Use parseInt to convert the string to an integer.

[StarLavender]

@acoder
Thanks. Can I do the same for my original question, which is the radio button? I just want to multiply. For example, if user choose (radio button) 5, then times 2 and do the same for the rest of the question with different number to multiply. And I need to display each of the value in a textbox and total up them again in a textbox. So I just need to loop all the questions and multiply one-by-one?

[StarLavender]

while($row = mysql_fetch_array($result))
                { 
                    echo "<td width='50' align='center'>$row[no]</td>";
                    echo "<td width='500' align='left'>$row[question]</td>";
                    echo "<td align='center' width='50'>$row[max_mark]</td>";
                    echo "<td align='center' width='500'><input type='radio' name='rating[$i]' id='rating$i' value='1' onClick='calcRadio()'/>1
                                                               <input type='radio' name='rating[$i]' id='rating$i' value='2' onClick='calcRadio()'/>2
                                                            <input type='radio' name='rating[$i]' id='rating$i' value='3' onClick='calcRadio()'/>3
                                                            <input type='radio' name='rating[$i]' id='rating$i' value='4' onClick='calcRadio()'/>4
                                                            <input type='radio' name='rating[$i]' id='rating$i' value='5' onClick='calcRadio()'/>5</td>";
                    echo "<td align='center' width='50'><input name='score[$i]' type='text' id='title'size='5' align='middle'></td>";
                                        echo "</tr>";
 
                    $i++;
 
 
                }

I know I need to create a function onClick at radio button and immediately show the value in the textbox. And save both the value of radio button and textbox in the database but I don't how to calculate. Can anyone show me? Thanks in advance.

[StarLavender]

I had try this. But why it show in all textbox once a radio button was clicked? Moreover, it didn't calculate the value I expected. For example, for question 1, no matter what radio button (1,2,3,4,5) I clicked, it remains show value 1 in all the textbox. Why? Didn't the .value property will read the value for that radio button (for example, value 1,2,3,4,5) when it was checked and multiply with the number I write?

function calcRadio()
{
    var rating1 = parseInt(document.getElementById("rating[1]").value);
    document.getElementById("score[1]").value = rating1*1;
 
    var rating2 = parseInt(document.getElementById("rating[2]").value);
    document.getElementById("score[2]").value = rating2*5;
 
    var rating3 = parseInt(document.getElementById("rating[3]").value);
    document.getElementById("score[3]").value = rating3*2;
 
//for the rest are same as above except the number to multiply
}
 

[acoder]

With radio buttons you need to get all of them and loop over them to check which has been checked. You can use document.getElementsByName to get all radio buttons with the same name.

[StarLavender]

Now I can choose my radio button. So now where do I need to place the statement for textbox to display the value of radio button. Because I put as below, the number display at the different textbox, not the textbox that corresponding with the radio button when I select the radio button. Thanks in advance.

function calcRadio(radio, val)
{    
        var arr = new Array();
        arr = document.getElementsByName(radio);
 
        for(var i = 0; i < arr.length; i++)
        {
            if(document.getElementsByName(radio).item(i).checked)
            {
                var obj = document.getElementsByName(radio).item(i);    
                document.getElementById("score"+i).value = val / 5 * obj.value;
            }        
        }
}
 

[acoder]

You'll probably be better off passing the ID of the text box to the function so you can use that instead of score+i

[StarLavender]

Sorry. I am not very clear. Can you show how I can do that? Thanks.

[acoder]

function calcRadio(radio, val, textID) {

where textID would be the ID of the text box, then you can use that in place of "score"+i on this line

document.getElementById("score"+i).value = val / 5 * obj.value;

[StarLavender]

yes. I get it already. Now I want to add up all the value in the textbox. But nothing display in the new textbox.

var sum = 0; 
for(var i=1;i<=7;i++) 
{ 
sum += parseInt(document.getElementById("score"+i).value);
} 
document.getElementById(sum).value=sum;
 

[acoder]

You've used sum for the ID and the sum. Use a different variable name for one of the two.

[StarLavender]

The textbox remain display NaN until all the radio button were checked, then display the correct value. Why?

var sum = 0;  
for(var i=1;i<=7;i++)  
{  
sum += parseInt(document.getElementById("score"+i).value); 
}  
document.getElementById('total').value=sum; 
 

[acoder]

Because the textboxes don't have a value. Either set them to 0 initially, or use isNaN (with parseInt) to avoid NaN* results.

*Not a Number