Talk:DOM:element.setAttribute

From MDC

[edit] Problem with setting Attributes

The following code doesn't actually set the 'selected' attribute. After the nodeName is set to 'option', the element behaves as an HTMLOptionElement. Some attributes (like selected & defaultSelected) are accessable only as properties. Using the getAttribute or setAttribute methodes will not work (as tested on Mozilla 1.3).

  for (i=0 ; i < (dataform.elements.length - 1) ; i++) {  //where dataform is an HTMLForm Element
    currentel = dataform.elements[i].cloneNode(false);
    currentel.defaultValue = dataform.elements[i].value;
    currentel.defaultChecked = dataform.elements[i].checked;
    if (dataform.elements[i].type == 'select-one') {
      for (j=0; j<dataform.elements[i].length; j++) {
        optionel = document.createElement('option');
        if (dataform.elements[i].options[j].selected) {
          optionel.setAttribute('selected','selected');
        }
        var logadd = (dataform.elements[i].options[j].value
               + dataform.elements[i].options[j].selected
               + optionel.selected
               + '-' + optionel.getAttribute("selected") + '-'
               + xmlText(optionel)  //xmlText is from google's library
               + '\n'
        );
        log.value += logadd; //log is a textbox
        currentel.appendChild(optionel);
      }
    }
    formxml += xmlText(currentel);
  }

When this is performed on:

<form id="data" method="post" action="#">
Name:<input type="text" name="name" value="David"/><br/>
Address:<input type="text" name="add1"/><br/>
Address:<input type="text" name="add2"/><br/>
City:<input type="text" name="city" value="Minneapolis"/><br/>
State:<input type="text" name="st"/><br/>
Zip:<input type="text" name="zip"/><br/>
Inclued Email:<label for="input.radio1">a.</label>
      <input id="input.radio1" title="Radio button" type="radio" name="radio" value="radio1"/>
      <label for="input.radio2">b.</label>
      <input id="input.radio2" title="Radio button" type="radio" name="radio" value="radio2"/>
      <br/>
<p><label for="select">Single selection:</label>
        <select id="select" class="select" title="Select" xml:lang="en" name="select">
	    <option id="option" class="option" title="Option" xml:lang="en" value="Opt1">Option 1</option>
	    <option value="Opt2">Option 2</option>
	    <option value="Opt3">Option 3 (disabled)</option>
	    <option value="Opt4">Option 4 (disabled)</option>
	  <option value="Opt5">Option 5</option>
	  <option selected="selected" value="Opt6">Option 6 (default)</option>
	</select>
      </p>
</form>

The log yields:

Opt1falsefalse-null-<OPTION/>
Opt2falsefalse-null-<OPTION/>
Opt3falsefalse-null-<OPTION/>
Opt4falsefalse-null-<OPTION/>
Opt5falsefalse-null-<OPTION/>
Opt6truetrue--<OPTION/>