javascript - IE 和 JavaScript

Question

所以我有一个在 Firefox 中运行良好的注册页面，但 IE 6-8 在提交时给我一个 'document.info.altDate1.value' is null or not an object 错误。

这是正文:

<DIV id=wrapper>
<DIV id=outer-space>
<DIV id=hfeed>
<H1>Register for <SPAN>Orientation</SPAN></H1>

<p style="width:550px;">Orientation fee is NON-REFUNDABLE, but can be applied to a later term. By making an online payment, an additional $3.00 processing fee will be added to the $105.00 new student fee.
</p>

<FORM id=info method=post name=info action=/scripts/mailform.asp><INPUT value=mpfefferle@niu.edu type=hidden name=mf_to> 
<FIELDSET id=step_1><LEGEND>Step 1</LEGEND><LABEL for=num_attendees>I am a...</LABEL>     <BR><SELECT id=StudentType name=StudentType> <OPTION id=0 selected value=0>Please Choose</OPTION> <OPTION id=F value=F>Freshman</OPTION> <OPTION id=T value=T>Transfer</OPTION></SELECT> <BR><INPUT type=hidden name=amount> 
<DIV style="PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #333; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" id=attendee_1_wrap class="name_wrap push">
 <P>I would like to attend Freshman Orientation on... </P>


 <P><SELECT id=freshmandate name=""> <OPTION selected value=none></OPTION> <OPTION value=08/20-8:30>Aug. 20 - 8:30</OPTION> <OPTION value=08/21-9:45>Aug. 21 - 9:45</OPTION>     <OPTION value=08/22-8:30>Aug. 22 - 8:30</OPTION> <OPTION value=08/23-9:45>Aug. 23 - 9:45</OPTION></SELECT> </P></DIV>
 <DIV style="PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #333; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" id=attendee_2_wrap class="name_wrap push">
 <P>I would like to attend Transfer Orientation on... </P>

 <P><SELECT id=transferdate name=""> <OPTION selected value=none></OPTION> <OPTION value=08/17-8:30>Aug. 17 - 8:30</OPTION> <OPTION value=08/17-9:45>Aug. 17 - 9:45</OPTION>     <OPTION value=08/18-8:30>Aug. 18 - 8:30</OPTION> <OPTION value=08/18-9:45>Aug. 18 - 9:45</OPTION></SELECT> </P></DIV><BR>
 <P><LABEL for=FirstName>First Name: </LABEL><INPUT id=FirstName></INPUT> </P>
 <P><LABEL for=LastName>Last Name: </LABEL><INPUT id=LastName class=name_input></INPUT> </P>
 <P><LABEL for=Zid>Z-ID: </LABEL><INPUT id=Zid name=StudentID></INPUT> </P>
 <P>Number of Guests: <SELECT name=Guests> <OPTION selected value=0>0</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION></SELECT></P>
 <P><LABEL for=email>Email: </LABEL><INPUT id=Email class="required email" name=Email> </P>
 <P><LABEL for=Address>Street Address: </LABEL><INPUT id=Address maxLength=75 name=Address> </P>
 <P><LABEL for=City>City: </LABEL><INPUT id=City name=City> </P>
 <P><LABEL for=State>State: </LABEL><SELECT id=State name=State> <OPTION selected value=IL>IL</OPTION> <OPTION value=AL>AL</OPTION> <OPTION value=AK>AK</OPTION> <OPTION value=AZ>AZ</OPTION> <OPTION value=AR>AR</OPTION> <OPTION value=CA>CA</OPTION> <OPTION value=CO>CO</OPTION> <OPTION value=CT>CT</OPTION> <OPTION value=DE>DE</OPTION> <OPTION value=DC>DC</OPTION> <OPTION value=FL>FL</OPTION> <OPTION value=GA>GA</OPTION> <OPTION value=HI>HI</OPTION> <OPTION value=ID>ID</OPTION> <OPTION value=IN>IN</OPTION> <OPTION value=IA>IA</OPTION> <OPTION value=KS>KS</OPTION> <OPTION value=KY>KY</OPTION> <OPTION value=LA>LA</OPTION> <OPTION value=ME>ME</OPTION> <OPTION value=MD>MD</OPTION> <OPTION value=MA>MA</OPTION> <OPTION value=MI>MI</OPTION> <OPTION value=MN>MN</OPTION> <OPTION value=MS>MS</OPTION> <OPTION value=MO>MO</OPTION> <OPTION value=MT>MT</OPTION> <OPTION value=NE>NE</OPTION> <OPTION value=NV>NV</OPTION> <OPTION value=NH>NH</OPTION> <OPTION value=NJ>NJ</OPTION> <OPTION value=NM>NM</OPTION> <OPTION value=NY>NY</OPTION> <OPTION value=NC>NC</OPTION> <OPTION value=ND>ND</OPTION> <OPTION value=OH>OH</OPTION> <OPTION value=OK>OK</OPTION> <OPTION value=OR>OR</OPTION> <OPTION value=PA>PA</OPTION> <OPTION value=RI>RI</OPTION> <OPTION value=SC>SC</OPTION> <OPTION value=SD>SD</OPTION> <OPTION value=TN>TN</OPTION> <OPTION value=TX>TX</OPTION> <OPTION value=UT>UT</OPTION> <OPTION value=VT>VT</OPTION> <OPTION value=VA>VA</OPTION> <OPTION value=WA>WA</OPTION> <OPTION value=WV>WV</OPTION> <OPTION value=WI>WI</OPTION> <OPTION value=WY>WY</OPTION></SELECT> </P>
 <P><LABEL for=Zip>Zip Code: </LABEL><INPUT id=Zip maxLength=10 size=5 name=Zip> </P>
 <P><LABEL for=Phone>Telephone: </LABEL><INPUT id=Phone maxLength=13 size=10 name=Phone> </P><INPUT id=VCheck type=checkbox name=VCheck></INPUT> 
 <P style="DISPLAY: inline">I am a military veteran</P><BR><INPUT id=CCheck type=checkbox name=CCheck></INPUT> 
 <P style="DISPLAY: inline">I am a commuter</P><BR><INPUT id=NTCheck type=checkbox name=NTCheck></INPUT> 
 <P style="DISPLAY: inline">I am 25 years or older</P></FIELDSET> 
 <FIELDSET id=step_2><LEGEND>Step 2</LEGEND>
 <P>Do you need to change your major? </P><INPUT id=major_name_toggle_on type=radio name=major_name_toggle_group></INPUT> <LABEL for=major_name_toggle_on>Yes</LABEL> &#8195;     <INPUT id=major_name_toggle_off type=radio name=major_name_toggle_group></INPUT> <LABEL for=major_name_toggle_off>No</LABEL> 
 <DIV id=major_name_wrap><LABEL for=major_name>Desired Major:<BR><SPAN style="COLOR: #ccc; FONT-SIZE: 10px">(Ex. Communication)</SPAN> </LABEL><INPUT id=major_name></INPUT> <LABEL for=major_emphasis>Desired Emphasis:<BR><SPAN style="COLOR: #ccc; FONT-SIZE: 10px">(Ex. Media Studies)</SPAN> </LABEL><INPUT id=major_name></INPUT> </DIV>
 <DIV class=push>
 <P>Will anyone in your group require special accommodations? </P><INPUT id=special_accommodations_toggle_on type=radio name=special_accommodations_toggle></INPUT> <LABEL for=special_accommodations_toggle_on>Yes</LABEL> &#8195; <INPUT id=special_accommodations_toggle_off type=radio name=special_accommodations_toggle></INPUT> <LABEL for=special_accommodations_toggle_off>No</LABEL> </DIV>
 <DIV id=special_accommodations_wrap><LABEL for=special_accomodations_text>Please explain below: </LABEL><TEXTAREA id=special_accomodations_text rows=10 cols=10></TEXTAREA> </DIV></FIELDSET> 
 <FIELDSET id=step_3><LEGEND>Step 3</LEGEND><INPUT id=UCheck value=check type=checkbox></INPUT> 
 <P style="DISPLAY: inline">Are you ready to rock? </P><BR><BR>
 <P><INPUT value=Clear type=reset> <INPUT onclick=javascript:PaymentButtonClick() value="Go to Cart" type=button name=PaymentButton> </P></FIELDSET> </FORM>
 <FORM method=post name=addform action=https://webappsqa.niunt.niu.edu/CreditCard/servlet/Shopping_Cart_Add_Item_Servlet><INPUT value=orient type=hidden name=Dept_ID> <INPUT value=Orientation type=hidden name=Product_Name> <INPUT value=z000000 type=hidden name=Product_Code> <INPUT type=hidden name=amount> <INPUT value=/orientation/index.shtml type=hidden name=return_link> <INPUT value=http://www.niu.edu type=hidden name=return_server> <INPUT value=1 type=hidden name=quantity> <INPUT value=0 type=hidden name=tax> <INPUT value=0 type=hidden name=ship> <INPUT value=DQ83225 type=hidden name=sale_id> <INPUT value=401200 type=hidden name=sale_acct> </FORM>
 <SCRIPT language=Javascript> 


 function PaymentButtonClick( ) { 


 ComCheck="";
 VetCheck="";
 NonTrad="";


 if (document.info.CCheck.checked==true) ComCheck="C";
 if (document.info.VCheck.checked==true) VetCheck="V";
 if (document.info.NTCheck.checked==true) NonTrad="N";


 if (document.info.StudentType.value == 'F')
  {
  document.info.freshmandate.name = 'altDate1';
  document.info.amount.value = '105.00';
  }

 if (document.info.StudentType.value == 'T')
  {
  document.info.transferdate.name = 'altDate1';
  document.info.amount.value = '75.00';
  }



 document.addform.Product_Name.value =  document.info.LastName.value
       + "," + 
       document.info.FirstName.value
       + "," + 
       document.info.StudentID.value
       + "," +
       document.info.altDate1.value
       + "," +
       document.info.Guests.value
       + "," +
       document.info.StudentType.value
       +
       ComCheck+VetCheck+NonTrad;


 document.addform.Product_Code.value = document.info.LastName.value;
 document.addform.amount.value = document.info.amount.value;

 if ((document.info.amount.value != "") && 
      (document.info.amount.value != "x")) {

      if (document.info.LastName.value != "" ||
          document.info.FirstName.value != "" )  {

              document.addform.submit();
      }
      else { 
          alert("Please enter missing information");
      } 
  }
  }


  </SCRIPT>
 </DIV>
 <HR>
 </DIV><!-- End outer-space -->
 <HR>
 </DIV><!-- End wrapper -->

我猜问题出在这个字段上:

<SELECT id=freshmandate name="">

还有这个:

<SELECT id=transferdate name="">

连同这个处理函数:

 if (document.info.StudentType.value == 'F')
  {
  document.info.freshmandate.name = 'altDate1';
  document.info.amount.value = '105.00';
  }

 if (document.info.StudentType.value == 'T')
  {
  document.info.transferdate.name = 'altDate1';
  document.info.amount.value = '75.00';
  }

一个 friend 告诉我使用 GetElementByID 以获得更好的 IE 兼容性，但我查了一下，但不确定如何让它为我想做的事情工作。

编辑 1: 我尝试使用以下方法无济于事，它在 firefox 中不再有效:

if (document.info.StudentType.value == 'F')
{
document.getElementById('freshmandate').name = 'altDate1';
else
document.getElementById('transferdate').name = 'altDate1';
}

Answer 1

您给 select 元素一个 id 属性，但尝试使用 name 引用它引用。

<SELECT id=freshmandate name="">

document.info.freshmandate.name = 'altDate1';

那是行不通的。要么设置 select 元素的 name 属性，要么更好(恕我直言)使用 document.getElementById:

document.getElementById('freshmandate').name = 'altDate1';

但是为什么要首先设置 #freshmandate 的 name 属性？你的目标是什么？