2015-10-15 62 views
1

尝试开发JavaScript,用于在用户提交姓名和电子邮件后将用户重定向到主页。顺序应该是这样的:点击“提交”后重定向用户/更改文本的Javascript函数

1)用户点击“索取宣传手册......” enter image description here

2)该窗口纵向格式打开,400×350用户填写姓名和电子邮件和点击“提交” enter image description here

3.)用户被重定向回原来的页面,文本现在读取“请求已提交...”并填写窗体窗口关闭。 enter image description here

目前,如果用户单击“请求宣传册...”超链接,它们会导致新页面(而不是打开此页面顶部的新窗口)。这里是我的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>&nbsp;</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>&nbsp;</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文件的索引或窗体?感谢您的帮助/方向/建议!

回答

1

基本上,当您提交表单时,您需要将window.location.href属性更改为您希望用户重定向到的URL(在此情况下为您的主页)。

var form = document.getElementById("emailform"); 
form.addEventListener("submit", function(){ 
    window.location.href = URLofTheHomePage; 
}); 

确保将URLofTheHomePage替换为您的主页的实际URL。

+1

这导致的JavaScript的其他文件无法正常工作英寸我放置这个新变种的地方是否重要?我还要在URL的TheHomePage上加引号吗? (顺便说一句,是index.html)。 – HappyHands31

+1

我注意到你已经有了一个onsubmit处理程序。我会用改进后的代码更新我的答案。 –

+1

那里,更新它。立即使用新的代码。另外,是的,你需要引用你的URL,因为它是一个字符串。 –

1

这是我会推荐的。看来你可以编写代码,所以我不会给你提供细节。

  1. “请求小册子”的Onclick(),用你的html打开一个Modal。您可以使用类似下面的CSS模态
#overlay { 
     visibility: hidden; 
     position: absolute; 
     left: 0px; 
     top: 0px; 
     width:100%; 
     height:100%; 
     text-align:center; 
     z-index: 1000; } 
  • 在提交表单的 - 处理发送数据和触发事件。
  • 保留“请求宣传册”HTML元素来监听此事件并仅在事件发生时更新其内容,而不是在取消对话框时更新其内容。
  • 除了事件,您还可以有一个回调方法,它在验证数据后从validateEmailForm()中调用。在此回调中,您可以更改主页的内容而无需重新加载。例如,
  • validateEmailForm(function() { 
        // update html element content 
    }); 
    
    function validateEmailForm() 
    { 
        if (data valid) { 
        callback(); 
        } 
    }