Question

var loc_name = document.forms['create_<?php echo(htmlspecialchars($window_ID)); ?>'].elements['location_name'];
alert(loc_name);

This just gives me the message ‘undefined’

where as…

var loc_name = document.forms['create_<?php echo(htmlspecialchars($window_ID)); ?>'];
alert(loc_name);

Gives me the object form business.

Have I just got this all wrong? What is the ‘proper’ way to access this form element. The form element has the correct name and it has an id, the id is similar but not the same.

HTML

<input type="button" name="create_location" value="Create" onclick="
var pre_row_was = $('#pre_form_row_1').innerHTML;
$('#pre_form_row_1').innerHTML = '&lt;td colspan=\'3\'&gt;Validating...&lt;/td&gt;';
var loc_name = document.forms['create_1'].elements['location_name'];
alert(loc_name);
if(loc_name.value == '') { 
  alert('You can\'t leave the room name blank');
  loc_name.focus(); loc_name.value = 'Enter a name';
  $('#pre_form_row_1').innerHTML = pre_row_was; return false;
}
if(loc_name.value == 'Enter a name') {
  alert('You must enter a room name first'); loc_name.focus();
  $('#pre_form_row_1').innerHTML = pre_row_was;
  return false;
}
$('#pre_form_row_1').innerHTML = pre_row_was;
Window_manager.new_window().load_xml('location/create.php?location_name=' + loc_name.value).display();">

tried formatting it so it is easier to read.

Answer 1

Your HTML is invalid.

A tr element cannot have a form child, and a form cannot have a td child.

Browsers recover from this error in different ways, including (if I remember correctly) moving the form element to after the table while leaving everything else where it is.

Start with a valid document before you try to access the DOM with JS.

When mixing forms and tables you can entire put the entire table in a form, or an entire form in a cell.

A further problem you have is an attempt to modify the innerHTML of a table row. This will break in many versions of Internet Explorer. Never modify bits of a table with innerHTML.