尝试开发JavaScript,用于在用户提交姓名和电子邮件后将用户重定向到主页。顺序应该是这样的:点击“提交”后重定向用户/更改文本的Javascript函数
2)该窗口纵向格式打开,400×350用户填写姓名和电子邮件和点击“提交”
3.)用户被重定向回原来的页面,文本现在读取“请求已提交...”并填写窗体窗口关闭。
目前,如果用户单击“请求宣传册...”超链接,它们会导致新页面(而不是打开此页面顶部的新窗口)。这里是我的HTML:
<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="castaway.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
<font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
<font face=arial>
<a style="text-decoration:none"
onClick="change_color();" href="#">Romantic</a><br><br>
<a style="text-decoration:none"
onClick="change_color2();" href="#">Adventure</a><br><br>
<a style="text-decoration:none"
onClick="change_color3();" href="#">Relaxation</a><br><br>
<a style="text-decoration:none"
onClick="change_color4();" href="#">Family</a><br><br><br><br>
<a style="text-decoration:none"
href="form.html" onClick="window.open(this.href,'targetWindow',
'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes,
resizable=yes,width=400, height=350');
return false;">Request Submitted...</a>
</font>
</td>
<td align="center"><img id="rom_main" src="orig_main.jpg">
<br><i>Your Vacation Awaits!
</tr>
</center>
</body>
</html>
</DOCTYPE>
这里是索引的Javascript。它所做的就是单击时更改文本/超链接的颜色:
function change_color(){
document.body.style.color = "#FF0066";
document.body.style.background = "Thistle";
document.getElementById("rom_main").src = "rom_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "#FF0066";
}
}
function change_color2(){
document.body.style.color = "blue";
document.body.style.background = "#87CEEB";
document.getElementById("rom_main").src = "adv_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "blue";
}
}
function change_color3(){
document.body.style.color = "green";
document.body.style.background = "#CCFF99";
document.getElementById("rom_main").src = "rel_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "green";
}
}
function change_color4(){
document.body.style.color = "brown";
document.body.style.background = "#66CCFF";
document.getElementById("rom_main").src = "fam_main.jpg";
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "brown";
}
}
然后,这里是窗体的HTML:
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="form.js"></script>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body leftmargin=0 rightmargin=0>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post"
onsubmit="return validateEmailForm();" action="form.html">
<div id="name-field">
Name:<br>
<input id="name" name="textname" size=35 >
</div>
<br><br>
<div id="email-field">
E-mail:<br>
<input id="email" name="textname" size=35 >
</div>
<br><br>
<input type="submit" name="button1" value="Submit">
</td>
</tr>
</center>
</body>
</html>
的JavaScript形式:
function validateEmailForm(){
var name = document.getElementById('name');
var email = document.getElementById('email');
var error = false;
var focusElem;
if(name.value.length == 0){
error = true;
var nameField = document.getElementById('name-field');
nameField.innerHTML = nameField.innerHTML + " *Name is required";
focusElem = name;
}
if(email.value.length == 0){
error = true;
var emailField = document.getElementById('email-field');
emailField.innerHTML = emailField.innerHTML + "
*Email is required";
if(focusElem == undefined){
focusElem = email;
}
}
if(error){
focusElem.focus();
return false;
}
return true;
}
var form = document.getElementById("emailform");
form.addEventListener("submit", function(){
window.location.href = "index.html";
});
和CSS的形式:
#errors {
clear:both;
color: red;
}
首先,我不知道Javascript会去哪里打开窗体肖像模式 - 它是否在js文件的索引或窗体?感谢您的帮助/方向/建议!
这导致的JavaScript的其他文件无法正常工作英寸我放置这个新变种的地方是否重要?我还要在URL的TheHomePage上加引号吗? (顺便说一句,是index.html)。 – HappyHands31
我注意到你已经有了一个onsubmit处理程序。我会用改进后的代码更新我的答案。 –
那里,更新它。立即使用新的代码。另外,是的,你需要引用你的URL,因为它是一个字符串。 –