Javascript Loop

[AliHurworth]

Evening all,
I'm trying to create a javascript loop to output a range of radio buttons numbered 1 to 10. This is part of a form, which will display the input on the next page.

So I have two problems. For testing only, I'd like to alert the value of the checked button. I'd then like to implement this so that it works in the usual way.

Here's what I have so far:

<li class="label">
With 0 being the lowest and 9 being the highest, how would you rate the redesign the site?
</li>
<li class="data">
    <script type="text/javascript">
       for(i = 0; i < 10; i++)   {
        document.write("<input type=radio name="overall" value="+i+"">"+i);
        }
</script>
</li>

<a href="javascript:alert(document.getElementsByName.('overall').value);">Send the Feedback</a>

Can anyone suggest why this doesn't seem to work?
Thanks

[stbuchok]

Try changing this:
document.write("<input type=radio name="overall" value="+i+"">"+i);

To this:
document.write('<input type="radio" name="overall" value=' + i + '" />' + i);

(Notice the single quotes)

I've always found that in JavaScript it is better to use single quotes for strings than double quotes as you tend to create html elements in those strings.

[Taywin]

The double and single quotation marks are often times interchangeable. In this case, you must distinguish which quotation marks you are using. You could use an escape character (backslash) to make this happen.

document.write("<input type=radio name=\"overall\" value=\""+i+"\">"+i);

[adam.adamski.96155]

That JS line that produces the radio group has gone horribly wrong :D
The best way forward is to look at the exact syntax of a static radio group:

<input type="radio" name="overall" value="0">0

then escape the double quotes:

<input type=\"radio\" name=\"overall\" value=\"0\">0

then put it inside the document.write function:

document.write("<input type=\"radio\" name=\"overall\" value=\"0\">0");

That would produce the static radio button, but we need to make allowance for the changing values (1-10) -

value=\"" + i + "\">" +i

...and altogether:

document.write("<input type=\"radio\" name=\"overall\" value=\"" + i + "\">"+i);

Wrap the for loop inside a function and call it to the page when needed:

<script type="text/javascript">
function makeRadio(){
    for(i = 1; i < 11; i++) {// produce values 1-10, using '0' can be problematic for validation.
        document.write("<input type=\"radio\" name=\"overall\" value=\"" + i + "\">"+i);
    }
}
</script>

This will produce 10 radio buttons, all of the same name, 'overall'. You want to make a link that will alert the currently selected radio button? You tried to use the getElementsByName() function inside a link, and then echo it out... but there are many elements with that name, how can this work without looping through the radio buttons?

We need another function to loop through relevant elements and discover which one is selected:

<script type="text/javascript">
function getSelectedRadio(){
    var radioArray = document.getElementsByName("overall"); //make an array with all radio buttons of name 'overall'
    var total = radioArray.length; //how many are there?
    for(key=0; key<total; key++){
        if(radioArray[key].checked){//find the checked radio button.
            alert(key); //alert the key as it's the same as value.
            }
    }
}
</script>

In the body, produce the radio group:

<script type="text/javascript">
makeRadio();
</script>

And lastly the link to click:

<a href="javascript:;" onclick="getSelectedRadio(); return false;">click</a>

If you don't understand something, say so, it's important that you learn something and don't just copy :)
Good luck!

[AliHurworth]

Thansk for your help everyone, and a special mention to adam.adamski!
The echo line was included for testing - but thanks for an interesting additional solution. I would never have thought of using an array!

[adam.adamski.96155]

Hey that's great :)
Can you mark this thread as solved?
Thanks!