CODEWITHSUNDEEP
javascriptphphtmlforms
Martin
Martin

Reputation: 45

Pass all option values in form

Within a form, I have a select element with id="keywords". This element has size="6", but no option elements in the HTML file. A JavaScript function that executes when the page loads populates the list as follows:

function setKeywords() {
    for (i = 0; i <= 5; i = i + 1) {
        var option;
        option = document.createElement("option");
        option.name = "keyword" + (i + 1).toString();
        option.value = "null";
        option.text = "";
        document.getElementById("keywords").add(option);
    }
}

Users then can add and remove up to six values to the list via other JavaScript functions (the code of which isn't useful for the purpose of this question), and then I wish to pass the values of these six option elements (among other inputted values in the form) to another page via POST. I thought that since I named these elements keyword1, keyword2, etc., that these values would then pass with the rest of the form. The other inputted values in the form are being passed successfully, but that's not happening with these keywords.

What must I change in order to pass the values of these option elements with the rest of the form?

EDIT 1: This is the HTML code that creates the select element in question.

<select id="keywords" size="6"></select>

EDIT 2: These are the JavaScript functions used to add and remove options to/from the select element. keywordslist is another select element in the form with keywords the user may add to the keywords element.

var keywordsArea = document.getElementById("keywords");
var keywordslist = document.getElementById("keywordslist");
function addKeyword() {
    if (keywordsArea.options[5].value === "null") {
        for (i = 0; i <= 5; i = i + 1) {
            if (keywordsArea.options[i].value === "null") {
                keywordsArea.options[i].value = keywordslist.value;
                keywordsArea.options[i].text = keywordslist.value;
                break;
            }
        }
    }
}
function removeKeyword() {
    if (keywordsArea.selectedIndex >= 0 && keywordsArea.selectedIndex <= 5) {
        for (i = keywordsArea.selectedIndex; i <= 5; i = i + 1) {
            if (i === 5) {
                keywordsArea.options[i].value = "null";
                keywordsArea.options[i].text = "";
            } else {
                keywordsArea.options[i].value = keywordsArea.options[i + 1].value;
                keywordsArea.options[i].text = keywordsArea.options[i + 1].text;
            }
        }
    }
}

Upvotes: 2

Views: 424

Answers (2)

Martin
Martin

Reputation: 45

I came up with the following solution:

I changed the submit element of the form to a button that executes submitForm() when clicked. submitForm() does the following:

function submitForm() {
    for (i = 0; i <= 5; i = i + 1) {
        var keyHidden;
        keyHidden = document.createElement("input");
        keyHidden.setAttribute("type", "hidden");
        keyHidden.value = keywordsArea.options[i].value;
        keyHidden.name = "keywords[]";
        videoForm.appendChild(keyHidden);
    }
    videoForm.submit();
}

Thus, the values of the options in the keywords element are placed in hidden input elements and passed in that manner.

Upvotes: 1

Ali Shaikh
Ali Shaikh

Reputation: 149

Change:

<select name="name" ...

To:

<select name="name[]" ...

Try to do this and the values will be added to an array

From the HTML code you posted

Change:

<select id="keywords" size="6"></select>

to:

<select name="keywords[]" id="keywords" size="6"></select>

Upvotes: 1

Related Questions