我们能否将表单元素的值传递给同一个网页中的函数?

Can we pass form element values to a function in the same web page?

本文关键字：同一个 网页 函数 值传 表单 元素 我们      更新时间：2023-09-26
 <html>
 <body>
 <form action="">
   ......any form elements......
 </form>
 </body>
 <script>
 function fn() {
 }
 </script>
 </html>

而不是在动作属性的URL，是否有一种方法(或任何其他替代方法)，以传递表单的值函数(在脚本标签)在同一网页?

这是我多年来的做法。它适用于所有浏览器——对于非常旧的浏览器，您甚至可以将document. getelementbyid ("form1")更改为document。Form1，如果你添加name=" Form1 "到表单标签。

注意:在jQuery出现之前，很多地方都推荐使用eventlistener，比如 
document.getElementById("form1").addEventListener("submit",
  function(e) {
    e.preventDefault(); 
    ... some code 
  });

但我个人更喜欢jQuery或更简单的onsubmit…

<html>
<head>
<script>
window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    var val1 = this.field1.value;
    if (val1=="") {
      alert('Field1 cannot be empty');
      this.field1.focus();
      return false;
    }
    // return true to submit, return false to stay on the page.
    return true; 
  }
}
</script>
</head>
<body>
<form id="form1" action="">
  <input type="text" name="field1" value="" />
  .
  .
  .
</form>
</body>
</html>

如果必须是内联的，那么我强烈推荐

<head>
<script>
function validate(theForm) {
  var val1 = theForm.field1.value;
  .
  .
    return false;// cancel
  .
  .
  return true; // allow submit
}
</script>
</head>
<form onsubmit="return validate(this)">


to just change some span or div on the page do this:
<html>
<head>
<script>
window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    var val1 = this.field1.value;
    document.getElementById("div1").innerHTML="This is the value "+val1;
    return false; // do not submit/refresh the page
  }
}
</script>
</head>
<body>
<form id="form1" action="">
  <input type="text" name="field1" value="" />
  <input type="submit" />
</form>
<div id="div1"></div>
</body>
</html>

html

<form  id="frm">    
<input type="button" onclick="fn()" value="Submit to function"/>
</form>
javascript 

function fn(){
var frm = document.getElementById("frm");
var elements = frm.elements;
var len = elements.length;
// do something with elements
 for(var i =0; i < len; i++){
  console.log("%s = %s", elements[i].name, elements[i].value);
 }
}
相关文章：