个人中心
gpt4 book ai didi

单击 "Submit"后重定向用户/更改文本的 Javascript 函数

转载 作者：行者123 更新时间：2023-11-30 16:32:15 25 4
gpt4 key购买 nike

尝试开发在用户提交姓名和电子邮件后将用户重定向回主页的 javascript。顺序应该是这样的:

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

2.) 此窗口以纵向格式打开，400 x 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 文件中用于索引还是用于表单？感谢您的帮助/指导/建议!

最佳答案

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

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

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

关于单击 "Submit"后重定向用户/更改文本的 Javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33158861/

25 4 0
文章推荐： c# - 使用 CSS 更改 ASP.NET 中下拉列表所选元素的背景颜色
文章推荐： c# - linqTOsql 在运行时返回 "specified cast not valid"异常
文章推荐： c# - asp.net C# 中的调用上下文
文章推荐： c# - Windows服务/WCF和线程，初学者问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com