JS动态改变form表单里的action值属性的方法

最新推荐文章于 2021-04-01 01:49:06 发布

FutureFlyme

最新推荐文章于 2021-04-01 01:49:06 发布

阅读量5.4k

点赞数 2

文章标签： html java struts

本文链接：https://blog.youkuaiyun.com/FutureFlyme/article/details/51939204

版权

前几天自己看了一个小程序，对form里的action值有所困惑，后来才明白其原理是动态改变form表单里的action值。这里主要介绍两种方法。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第一种方法</title>
<script language="javascript">
	function check() {
		if (document.form1.a[0].checked == true)<!--表示选中页面一-->
			document.form1.action = "1.jsp"
		else
			document.form1.action = "2.jsp"
	}
</script>
</head>
<body>
	<form name="form1" method="post" action="first" onSubmit="check();">
		页面一<input type="radio" name="a"> 
		页面二<input type="radio" name="a"> 
		<input name="" type="submit" value="提交">
	</form>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>第二种方法</title>
</head>
<body>
	<form id="form1" name="form1" method="post" action="../news/index.asp">
		<table width="100%" height="43" border="0" cellpadding="0"
			cellspacing="0">
			<tr>
				<td height="28"><input name="keyword" type="text"
					style="width: 150px" id="keyword" /></td>
			</tr>
			<tr>
				<td height="28">
				<select name="Searchtype" style="width: 110px" id="Searchtype" onchange="Searchtype1();">
						<option value="news" selected="selected">新闻中心</option>
						<option value="case">工程案例</option>
				</select> 
				<input type="submit" name="Submit" value="搜索" />
				</td>
			</tr>
		</table>
	</form>
	<script language="javascript">
  function Searchtype1(){
	  <!--注意以下使用方法-->
  var type=document.getElementById("Searchtype").options[document.getElementById("Searchtype").selectedIndex].value;
  if (type=="news"){
	  document.getElementById("form1").action="../news/index.asp"
	  }
  else if (type=="case"){
	  document.getElementById("form1").action="../case/index.asp"
	  }
  }
  </script>
</body>
</html>

本人介绍：研究生期间主要从事NLP学习和研究，毕业后在银行从事2年Java后端开发，目前在一家垂直领域TOP1互联网公司大数据部门工作。以下是我运营的一个公众号，会不定期发布一些文章，主要记录工作中使用到的技术和面临的技术难题，涉及后端，大数据和系统架构方面的知识，欢迎大家订阅交流。

在这里插入图片描述