揭示形式没有出现

时间:2017-03-01 03:13:14

标签: javascript html css forms

我是一名网络托管学生,所以我不是网络托管专家,我真的需要一些帮助。我有一个表格,在选择“公司”时会显示其他信息。

当它在编译器中运行时,它可以正常工作。但是当我使用浏览器打开时,它无效。

[这是在浏览器中打开时的结果] [1]

<!---JS--->



$('select[name=type]').change(function () {
    if ($(this).val() == '2') {
        $('#companyinfo').show();
    } else {
        $('#companyinfo').hide();
    }
});
<!--CSS-->


#companyinfo {
    display:none;
}
<!--HTML CODE-->

<html>
<head>

<link rel="shortcut icon" href="favicon.ico" />

<link href="style/default.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="style/form.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/form.js" type="text/javascript"></script>

</head>

<body>

<table width="576" border="0" cellspacing="0" cellpadding="0" class="clear">  
<tr>
    
<td><p style="font-size:16px; color:#518411;"></p><a name="top" id="top"></a>All fields marked with <FONT COLOR="#FF0000">*</FONT> are required.
</td>
</tr>
 
<tr>
                
<td height="20" >&nbsp;</td>
          
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>
<tr><td>PERSONAL INFORMATION</td></tr> 
<tr>
<td colspan="3" height="10"></td>
</tr>  
  
<tr>
    
<td>
                    
<table width="100%" border="0" cellspacing="0" cellpadding="0">
                      
                       
<tr>
                      
<td colspan="3" height="10"></td>
                      
</tr>

<tr>                       
<td height="22" class="bodyArial">E-mail Address<font color="#FF0000"> *</font></td>
                        
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
                        
<td valign="top"><input name="email" type="text" class="content-text-Darkgrey-BOX-long" id="email" size="30" />
                            
<strong class="bodyArial"><font face="Arial, Helvetica, sans-serif"></font></strong></td>
                      
</tr>
                       

<tr>
                        
<td valign="top">&nbsp;</td>
                      
</tr>
            
<tr>
<td>Enrolment Type</td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><select name="type" required>
        <option value="">-- Select an Option --</option>
        <option value="1">Individual</option>
        <option value="2">Company</option>
        </select></td></tr>
<tr>
<td colspan="3" height="10"></td>
</tr>
<tr>
<td colspan="3" height="10"></td>
</tr>        
</table><br />

<table id="companyinfo">
<tr><td>COMPANY INFORMATION</td></tr>

<tr>
<td colspan="3" height="10"></td>
</tr>
<tr>
<td colspan="3" height="10"></td>
</tr>


<tr>
<td>Company Name<font color="#FF0000"> *</font></td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company1"><input name="companyname" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>
 
<tr>
<td>Date of Incorporation</td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td valign="top"><label id="company2"><input name="companyday" type="text" class="content-text-Darkgrey-BOX-long" size="5" /> 
&nbsp;/&nbsp; <input name="companymonth" type="text" class="content-text-Darkgrey-BOX-long" size="5" /> &nbsp;/&nbsp; <input name="companyyear" type="text" class="content-text-Darkgrey-BOX-long" size="5" />         <strong class="bodyArial"><font face="Arial, Helvetica, sans-serif"></font></strong> </label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>                      
<td height="22" valign="top">Address</td>                       
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>   <td height="22" valign="top"><label id="company3"><textarea name="companyaddress" cols="38" rows="5"   class="content-text-Darkgrey-BOX-long" id="Address"></textarea></label></td>                    
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Contact Person<font color="#FF0000"> *</font></td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company4"><input name="contactperson" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Position</td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company5"><input name="position" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Tel No.<font color="#FF0000"> *</font></td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company6"><input name="companytel" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Mobile No.</td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company7"><input name="companymobile" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Email Address<font color="#FF0000"> *</font></td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company8"><input name="companymail" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td>Websites</td>
<td valign="top" class="bodyArial"><div align="center" style="margin-right:10px;"><strong> : </strong></div></td>
<td><label id="company9"><input name="companysite" type="text"  size="30" /></label></td>
</tr>

<tr>
<td colspan="3" height="10"></td>
</tr>
</table>




<br />

<p>COURSE TYPES (Please Tick)</p>
<table>

<tr>
<td colspan="3" height="10"></td>
</tr>

<tr>
<td><input type="checkbox" name="course" value="course1"></td>
<td>&emsp;</td>
<td><b>Learner Heavy Machinery Operator Program (Level 1)</b><br> Duration: 8 Weeks<br> Pre-requisite: 18 years old, Valid Driving License<br> Vocational Training: Classroom + Practice </td>
</tr>
</table>

<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="103" align="left">
<input name="submitbtn" type="image" onclick="return submit_form();" src="images/btn-submit.gif" alt="Submit"  border="0" style="margin-right:20px;" /></td>
<td width="387"><a href="javascript:;"><img src="images/btn-reset.gif" alt="Reset"  border="0" onclick="document.forms['form_contact'].reset()" /></a></td>
</tr>
</table>

</body>

</html>

1 个答案:

答案 0 :(得分:0)

首先,您的脚本中有2个jquery min文件:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  1. 只保留1个jquery min文件,最好是第一个。
  2. 确保您的jQuery文件位于<html><head>代码下,或</body>代码
  3. 之前

    &#34; $&#34;未定义错误主要发生在;

    • 在页面完全加载之前,您已运行JavaScript。
    • 你真的有旧版本的jQuery
    • 您的JavaScript文件未正确加载到您的页面中
    • 您的文件中有多个版本的jQuery;并且存在$ variable的冲突;例如:使用prototypejs和jquery。在这种情况下;使用方法:

      jQuery.noConflict();

    此外,在以下块中运行您的javascript代码:

    $(document).ready(function () {
      //your code here
    });