CODEWITHSUNDEEP
javascripthtml
adpcd
adpcd

Reputation: 9

listbox select count not work dont work

I recently trying to make a form with multiple select box. When someone select the options the number of selected options will be display on another text. I'm a beginner in JavaScript.

The function is called, but it doesn't count the number of the selected options.

<select name="element_17_1[ ]"
        size="7" multiple="multiple"
        class="element select medium"
        id="element_17_1[ ]"
        onfocus="selectCount(this.form);"
        onClick="selectCount(this.form);"
    >
    <option value="Opt1">Opt1</option>
    <option value="Opt2">Opt2</option>
    <option value="Opt3">Opt3</option>
    <option value="Opt4">Opt4</option>
    <option value="Opt5">Opt5</option>
    <option value="Opt6">Opt6</option>
    <option value="Opt7">Opt7</option>
</select>

and this is the function I tried in the <head>

function selectCount(f) {
    var selObj = myForm.elements['element_17_1[]'];
    var totalChecked = 0;
    for (i = 0; i < selObj.options.length; i++) {
        if (selObj.options[i].selected) {
            totalChecked++;
        }
    }
    f.element_9.value = totalChecked;
}

Upvotes: 0

Views: 982

Answers (3)

RobG
RobG

Reputation: 147483

In your HTML you have:

> <select name="element_17_1[ ]"
>          size="7" multiple="multiple"
>          class="element select medium"
>          id="element_17_1[ ]"
>          onfocus="selectCount(this.form);"
>          onClick="selectCount(this.form);"
>      >

Note that in the listener, this references the element itself, so just pass that:

           onfocus="selectCount(this);"
           onClick="selectCount(this);"

So a reference to the element is passed directly to the function, which can be:

function selectCount(selObj) {

    // The following line isn't needed now
    // var selObj = myForm.elements['element_17_1[]'];

    var totalChecked = 0;
    for (i = 0; i < selObj.options.length; i++) {
        totalChecked += selObj.options[i].selected? 1 : 0;
    }
    // The next line needs the form, so

    selObj.form.element_9.value = totalChecked;
}

Now you don't care what the select element is called. :-)

Edit

To click element_9 you might do:

<input name="element_9" onclick="
 this.value = selectCount(this.form['element_17_1[ ]']);
">

Then the function is modified to:

function selectCount(selObj) {
    var totalChecked = 0;
    for (i = 0; i < selObj.options.length; i++) {
        totalChecked += selObj.options[i].selected? 1 : 0;
    }
    return totalChecked;
}

Enough homework for now. ;-)

Upvotes: 0

The Alpha
The Alpha

Reputation: 146239

Change your select's name name="element_17_1"and id id="element_17_1" and in also you don't have myForm in your function so var selObj = myForm.elements['element_17_1']; should be var selObj = f.elements['element_17_1']; and also you can use only on event as follows

onChange="selectCount(this.form);"

instead of

onfocus="selectCount(this.form);"
onClick="selectCount(this.form);"

Complete function:

function selectCount(f) {
    var selObj = f.elements['element_17_1'];
    var totalChecked = 0;
    for (i = 0; i < selObj.options.length; i++) {
        if (selObj.options[i].selected) {
            totalChecked++;
        }
    }
    f.element_9.value = totalChecked;
}

Update:

For your php scriptyou can keep your select's name name="element_17_1[]" and so in the function it should be var selObj = f.elements['element_17_1[]']; but without space like[ ]

DEMO.

Upvotes: 0

cHao
cHao

Reputation: 86555

You're trying to get an element named element_17_1[], but your select box is named element_17_1[ ]. JavaScript just sees the name as a bunch of characters, and that space makes a difference.

Upvotes: 1

Related Questions