How to limit checkbox selections to one in a html document when the list containing the checkboxes is being gennerated by .js

Question

The intent is to use an html dialog box as a settings page for a program. In this settings page, the user can create a list of salespeople that can be selected later on from a drop-down box. My goal now, is to add a checkbox that indicates witch salesperson is the default selection in that drop-down list.

Here's what i have so far:

This is the .js function that creates the html salespersons-table list.

function addSalespersonRow(id, name, phone, email, defsales) {
var newRow = $('<tr>'+
    '<td><input type="hidden" class="id" /><input class="name" size="20" /></td>'+
    '<td><input class="phone" size="15"/></td>'+
    '<td><input class="email" size="30"/></td>'+
    '<td><input type="checkbox" class="defsales"</td>'+
    '<td><a href="#" onclick="$(this).parent().parent().remove(); return false;">Delete</a></td>'+
    '</tr>');
if (id === undefined) {
    id = new Date().getTime();
}
$('.id', newRow).val(id);


if (name !== undefined) {
    $('.name', newRow).val(name);
}
if (phone !== undefined) {
    $('.phone', newRow).val(phone);
}
if (email !== undefined) {
    $('.email', newRow).val(email);
}
if (defsales !== undefined) {
    $('. defsales', newRow).val(defsales)
}

$('#salespersons-table tbody').append(newRow);

return false;

This is the part of the html that displays the list.

    <fieldset>
        <legend>Sales Person Information</legend>
        <table class="text-c" id="salespersons-table" width=100%>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Default</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <a href="#" onclick="return addSalespersonRow();">Add new Salesperson</a>
        <input type="hidden" id="salespersons" />
    </fieldset>

So far the only thing that's not working is that the user can select any or all checkboxes. "I need help figuring out how to limit them to one choice as the default."

Then when the user saves the settings, this part of the .js saves the data to .dat file.

function saveSettings() {

var salespersons = [];
$('#salespersons-table tbody tr').each(function(){
    var salesperson = '{';
    salesperson += '"id"=>"' + $('.id', this).val() + '",';
    salesperson += '"name"=>"' + $('.name', this).val() + '",';
    salesperson += '"phone"=>"' + $('.phone', this).val() + '",';
    salesperson += '"email"=>"' + $('.email', this).val() + '",';
    salesperson += '"defsales"=>"' + $('. defsales', this).val() + '"';
    salesperson += '}';
    salespersons.push(salesperson)
});
$('#salespersons').val('['+salespersons.join(', ')+']');

The .dat entry looks like this.

 "defsales"on"name"Bob Summers"id"1254233372387"phone"(953) 684-9557"email"[email protected]

As you can see, the checkbox for this person was checked. This value is either "on" or "". The problem i have now is that when the settings.html is reopened, the above salespersons checkbox is not checked indicating no default selection was made. So if the user does not notice this and re-saves their settings, there previous choice will be lost.

any help you can give would be great.

thanks for enduring my long question-explanation.

Answer 1

Why not simply use a drop-down box, which only allows the user to select one of the sales people? This will greatly simplify the JavaScript as you will only need code to update the sales people in the drop down.

Answer 2

I figured out how to limit their choices to one. As it turns out, I needed to be using radio buttons. Radio buttons buy default, only allow one to be selected. In order for this to work, the radio button will need to compare itself with all others of its kind to know if it's the only one checked. So to do this, I had to give all of the dynamically created radios the same name.

So I corrected this line:

'<td><input type="checkbox" class="defsales"</td>'+

To look like this:

'<td><input type="radio" name="ds" class="defsales" /></td>'+

Now all I need, is to figure out how to get the radio to display the saved selection at lunchtime.

Any suggestions?

Cheers,