Question

I don’t understand why my javascript doesn’t work… everything looks ok though…

<form id = "lol" method="get" name="lol" action="" style="display:inline; vertical-align:middle">
    <table style="display:inline; vertical-align:middle">
        <tr>
            <td style="width:80%">
                xxx
            </td>
            <td>
                <select name="A">
                    <option value="xxx">xxx</option>
                    <option value="xxx">xxx</option>
                    <option value="xxx">xxx</option>
                </select>
            </td>
            <td>
                <input type="submit" value="Valider"/>
                <input type="hidden" name="B" value=""/>
                <input type="hidden" name="C" value=""/>
            </td>
        </tr>
    </table>
</form>

And my javascript:

<script>
var form=document.getElementById("lol");
form.elements['A'].value="xxx";
</script>

The form is found, but the element A is not found…

Answer 1

You need to ensure that your JavaScript code is running after the DOM elements in question have been created. If you do, your code works.

You can ensure that by either

1. Putting the code after the elements in the document (as shown below), or

2. Using a load or ready style of event.

Live example

<form id = "lol" method="get" name="lol" action="" style="display:inline; vertical-align:middle">
  <table style="display:inline; vertical-align:middle">
      <tr>
          <td style="width:80%">
              xxx
          </td>
          <td>
              <select name="A">
                  <option value="xxx">xxx</option>
                  <option value="xxx">xxx</option>
                  <option value="xxx">xxx</option>
              </select>
          </td>
          <td>
              <input type="submit" value="Valider"/>
              <input type="hidden" name="B" value=""/>
              <input type="hidden" name="C" value=""/>
          </td>
      </tr>
  </table>
</form>
<script>
  var form=document.getElementById("lol");
  form.elements['A'].value="xxx";
</script>