Question

Im trying to get a dynamic update of my select list depending on what radio button is checked.

I have 3 files:

maleweight.html:

<option value="blank"></option> 
<option value="Pluma -64.0 kg">Pluma -64.0 kg</option>
<option value="Pena -70.0 kg">Pena -70.0 kg</option>
<option value="Leve - 76.0 kg">Leve - 76.0 kg</option>
<option value="Médio -82.3 kg">Médio -82.3 kg</option>
<option value="Meio-Pesado -88.3 kg">Meio-Pesado -88.3 kg</option>      
<option value="Pesado -94.3 kg">Pesado -94.3 kg</option>        
<option value="Super Pesado -100.5 kg">Super Pesado -100.5 kg</option>      
<option value="Pesadíssimo +100.5 kg">Pesadíssimo +100.5 kg</option>

femaleweight.html:

<option value="blank"></option> 
<option value="Rooster -48.5 kg">Rooster -48.5 kg</option>
<option value="Super Feather -53.5 kg">Super Feather -53.5 kg</option>
<option value="Feather -58.5 kg">Feather -58.5 kg</option>
<option value="Light - 64.0 kg">Light - 64.0 kg</option>
<option value="Middle -69.0 kg">Middle -69.0 kg</option>
<option value="Medium Heavy -74.0 kg">Medium Heavy -74.0 kg</option>        
<option value="Heavy -79.3 kg">Heavy -79.3 kg</option>      
<option value="Super Heavy -84.3 kg">Super Heavy -84.3 kg</option>      
<option value="S. Super Heavy +84.3 kg">S. Super Heavy +84.3 kg</option>

newuser.php:

    <tr>
    <td><b>K&oslash;n:</b></td>

    <td><input type="radio" name="Mand" value="Mand" id="male" onclick="update()">Mand
    <input type="radio" name="Kvinde" value="Kvinde" id="female" onclick="update()">Kvinde</td>
    </tr>

    <tr>
    <td><b>V&aelig;gt:</b></td>
    <td><select id="weight" name="vægt" id="selectv">               
    <script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">

        function update() {

            if (document.getElementById('male').checked) {
                $("#weight").load("maleweight.html");
            }

            else if (document.getElementById('female').checked) {
                $("#weight").load("femaleweight.html");
            }
        }

    </script>
    </select></td>
    </tr>   

I have 2 problems:

1. The radio buttons seem broken, i can choose both at the same time and i can not “uncheck” them. – Maybe because of the script not workind properly?
2. When i click either of the radio buttons the select list is not updated.

I have tried:

• Including (just naming the file ex: maleweight.php).
• Javascript (could not make it work).
• .get instead of load.
• Tried .checked == true
• Tried different solutions (not for the exactly same) listed here on SO.

Niether of them will work for me. What am i missing?

Thanks in advance!

Best regards,
Casper

EDIT:

The page where everything is going down: http://www.casperwmn.dk/tiljonas/nyprofil.php

Answer 1

I see a few obvious problems with your code.

1. You should use the same name for both radio buttons, if you want to make sure only of one them can be selected.
2. You shouldn’t put the JavaScript within your select-element. As soon as the the first .load() method completes, it will remove the entire JavaScript as it replaces the content of your select-element. I’m also fairly certain that it is invalid HTML to do so (a <select> element can only have <option> elements as children).
3. You cannot both load an external JavaScript-file and write your own JavaScript with the same <script> tag, you will have to have two separate <script> tags – one for loading the jQuery source, and one for writing your own JavaScript.
4. Your <select> element has two ID attributes, which isn’t valid HTML. Remove one of them, and use the one you keep as the selector in your JavaScript.
5. <script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
is not the right way to load a JavaScript. Instead of language="text/javascript" it should be type="text/javascript", but you could just as well get rid of the attribute all together, as JavaScript is the default language for the <script> element.

Since you are using jQuery to load the content, why not use it for the complete solution? If you change the name of your radio-buttons to say gender, and the values to male/female, and remove the inline onlick-attribute. Then you could do it all with a small piece of jQuery.

$(function() {
   $("input[name='gender']").on("click", function() {
        var gender = $(this).val();
        $("#weight").load(gender + "weight.html");
   });
});