0

I have a form which is largely populated by checkboxes. The checkboxes each have an ID "value" that corresponds to an item within a javascript array. The array items hold some text that will populate a textarea.

I would like to include some dropdown boxes to clean up the site; however, I cannot seem to assign an array ID to the dropdown options? Can this be done in a selectbox option? Is there a workaround to simulate a selectbox without using the tab?

My html is basically:

    <div>
    <input type=checkbox id=array1 name=textArray></input>
    <input type=checkbox id=array1 name=textArray></input>
    <input type=checkbox id=array1 name=textArray></input>
    ...
    <select><option 1><option 2>...</select>
    </div>
    <div>
    <form>
    <textarea id=outPut></textarea>
    </form>
    </div>

And my js is:

var textArray = {

array1: 'some text here',
array2: 'some more text',
array3: 'some other text',
...
array90: 'the last text'

};

// variable assigned to chosen item
var selectedInputs = document.getElementsByName("textArray");
for (var i = 0; i < selectedInputs.length; i++) {
    selectedInputs[i].onchange = function() {
        chosenItem = this;
        printText();        
    };
}
// Script to add items to the Comments section text area
var mytextbox = document.getElementById('outPut');
var chosenItem = null;

function printText(){
    if(chosenItem !== null){
       mytextbox.value += textArray[chosenItem.id] + "";
        // resets the radio box values after output is displayed
        chosenItem.checked = false;
        // resets these variables to the null state
        chosenItem = null;
    }
}

How can I associate an item in my js array with one of the selectbox choices?

2 Answers 2

1

I found it very difficult to understand what you're asking but I threw this together and hopefully it'll be helpful.

Important bit is

var selectNode = document.getElementById('select'); // <select id="select">
selectNode.onchange = function () {
  if (selectNode.selectedIndex !== 0) {
    chosenItem = selectNode.options[selectNode.selectedIndex];
    selectNode.selectedIndex = 0;
    printText();
  }
}

and not to use the id attribute for what you're doing (I used data-i).


I'd also like to say that if you're cleaning up code this would be a good time to strongly reconsider how you're passing variables between functions; setting a value in the global namespace and relying on it in the next invocation is just asking for trouble (race conditions, conflicts with other bits of code, etc).

Sign up to request clarification or add additional context in comments.

5 Comments

Sorry for the less than precise verbiage. I tried to be a bit succinct, without getting too crazy with my example code. I'll try to take your suggestion and see how it would fit. My actual site where I would be implementing this is at hematogones.com/BMbiopsies_3.html.
Also, I read up on using an arbitrary attribute within my HTML, and it seems that this usage is utilized in HTML5; unfortunately, many of my users will not have access to Chrome or Firefox, and are stuck with IE7 and 8. So my code might have to be a bit primitive so that all can use it.
@user1837608 I can't test on IE7/8, but I would've expected .getAttribute to work for unknown attributes and for .selectedIndex to function as expected (iirc in IE6 it was readonly). If the onchange fires then there should be no problem with any of the code.
Just tested my fiddle in IE7 mode of IE9 (F12, Browser Mode: IE7) and it worked fine with no errors in console.
Okay, I tried on our IE7 at work and you are right, it did fire onchange. Thanks for the input. I'll play around and see how best to implement your suggestion.
0

<option value="whatever">1</option> This has been part of HTML from the beginning.

1 Comment

Thanks. I know I could do it this way, but it doesn't work for the way my end user will build their text within the text area.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.