提交后無法清除表格
[英]Cannot clear a form after submission
問題描述
我有一個帶有下拉列表的表單，提交后想清除，並顯示表格。 我搜索了清除表單，發現使用了javascript。 我讀了這篇文章如何清除表格 。 我編寫了以下javascript代碼，但無法正常工作。
myjavascript.js
<script type="text/javascript">
<!--clear function-->
function resetForm(form){
// clearing selects
var selects = form.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++)
selects[i].selectedIndex = 0;
return false;
}
</script>
這是我的表格：
principal.php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
switch ($_POST['program']){
case 'BSc Computer Science':
include 'csreadprog.php';
break;
case 'BSc Psychology':
include 'psyreadprog.php';
break;
case 'BA Business Administration':
include 'baedreadprog.php';
break;
}
switch ($_POST['services']){
case 'Library':
include 'libraryread.php';
break;
case 'IT Services and Facilities':
include'itserviceread.php';
break;
case 'Front Desk':
include'frontdeskread.php';
break;
case 'Course Administrator':
include'courseadminread.php';
break;
case 'International Student Office':
include'stofficeread.php';
break;
case 'Clubs and Societies':
include'clubsread.php';
break;
}
switch($_POST['program'] && $_POST['criteria']){
case 'BSc Computer Science' && 'I have found the unit interesting':
include 'readcsprogcrit.php';
break;
case 'BSc Psychology' && 'I have gained knowledge':
include 'readpsyprogcrit.php';
break;
case 'BA Business Administration' && 'I have acquired skills':
include 'readbaedprogcrit.php';
break;
}
switch($_POST['year']){
case 'BSc Computer Science' && '2005':
include 'readcsprogyear.php';
break;
case 'BSc Psychology' && '2005':
include 'readpsyprogyear.php';
break;
case 'BA Business Administration' && '2005':
include 'readbaedprogyear.php';
break;
}
exit;
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="myjavascript.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="principal.php">Principal</a></li>
<li><a href="acad_director.php">Academic Director</a></li>
<li><a href="lecturer.php">Lecturer</a></li>
</ul>
</div>
<form method="POST" action="principal.php" name="myform">
<b>Programs:<b/>
<select name="program">
<option value="Choose">Please select..</option>
<option value="Computer Science"> BSc Computer Science</option>
<option value="BAED">BA Business Administration</option>
<option value="Psychology">BSc Psychology</option></select><br/><br/>
<b>Departments:<b/>
<select name="department">
<option value="Choose">Please select..</option>
<option value="Computer Science">Computer Science</option>
<option value="BAED">BAED</option>
<option value="Psychology">Psychology</option></select><br/><br/>
<b>Year:<b/>
<select name="year">
<option value="Choose">Please select..</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option></select><br/><br/>
<b>Criteria:<b/>
<select name="criteria">
<option value="Choose">Please select..</option>
<option value="I have found the unit interesting">I have found the unit interesting</option>
<option value="I have gained knowledge">I have gained knowledge</option>
<option value="I have acquired skills">I have acquired skills</option>
<option value="Useful other resources">Useful other resources</option></select><br/><br/>
<b>Services:<b/>
<select name="services">
<option value="Choose">Please select..</option>
<option value="Library">Library</option>
<option value="Course Administrator">Course Administrator</option>
<option value="International Student Office">International Student Office</option>
<option value="IT Services and Facilities">IT Services and Facilities</option>
<option value="Front Desk">Front Desk</option>
<option value="Clubs and Societies">Clubs and Societies</option></select><br/><br/>
<br/>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Clear">
</form>
3 個解決方案
解決方案1
1 2015-03-12 18:00:31
使用jquery而不是僅使用原始javascript是一個好主意-它使事情變得更容易，代碼更少，因此更易於維護。
無論如何，如果您可以使用jQuery庫-類似的東西應該可以工作：
$("#your_form").on('submit', function() {
$(this).find('input, textarea').val("");
$(this).find('select').prop('selectedIndex',0);
});
它應該清除您的表格。 還輸入值-如果您不希望這樣做，則可以刪除$(this).find('input, textarea').val(""); 並且只會清除選擇項。
解決方案2
1
從myjavascript.js刪除標簽。
從resetForm移除表單參數； 這不是必需的。
在myjavascript.js中將window.load調用添加到resetForm（）
myjavascript.js現在應如下所示：
function resetForm(){
// clearing selects
var selects = document.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++) {
selects[i].selectedIndex = 0;
}
}
window.load(resetForm());
解決方案3
0 2015-03-12 18:00:17
“ myjavascript.js”不得包含<script type="text/javascript"> ， <!--clear function-->和</script> 。
Javascript文件中沒有HTML標記。
要在javascript中添加評論，請使用以下命令：
// my single line comment
/* my
multi line
comment */
提交后清除表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.