你如何使用由JavaScript中的表单“提交”的值？提交表单和使用值（JavaScript）

事实：
这是一个PHP文件
我使用JavaScript，因为我需要一些时间因素，我不认为我可以从服务器端的脚本:)

为了简化获取;我要的是，这种形式提交或当按钮被点击：

<form method="POST" action="test.php"> 
<input type="text" name="foo" size="30"> 
<input type="submit" value="Click me"> //it doesn't have to be submitted 
<input type="button" action="some_action" value="Click me"> //an alternative solution 
</form>

名为“foo”的文本输入的值别处显示。

注意形式不必提交，我真的想要的是，当你按下一个按钮值可以用于其他地方

我应该使用GET呢？我可以只使用$ _POST数组吗？我应该使用AJAX（我完全没用）？我不知道在这种情况下该怎么做。

来源

2010-08-10 Latze

是否需要提交？ – 2010-08-10 10:26:09

不，实际上，我制定了自己不好:)我想要的是，当你按下按钮或提交按钮的价值显示在其他地方:)我马上编辑 – Latze 2010-08-10 10:27:56

既然你提到，它不完全取决于是否提交表单或没有，所以它更容易抓住值W/O发布/歌厅形式。您在主体部分写你的接口逻辑之后，需要在最后写在页脚页面下面的代码： -

anypage.php： -

<form method="POST" action="test.php"> 
    <input type="text" name="foo" id="foo" size="30" /> 
    <input type="submit" onclick="return writeFoo('foo_placeholder', 'foo');" value="Click me" /> //it doesn't have to be submitted 
    <input type="button" onclick="return writeFoo('foo_placeholder', 'foo');" action="some_action" value="Click me" /> //an alternative solution 
</form>

上面的代码是你的代码只能与一些小的修改，包括在按钮/提交的“点击”事件上调用JS功能“writeFoo()”。此函数需要2个参数： -

arg - 它提到了要在其中打印值的HTML元素的目标占位符ID。
source - 它提到了HTML元素的源ID，从中可以获取/获取值。

rightpart.php： -

<div> 
    <span id="foo_placeholder"></span> 
</div>

上述HTML代码可以用于任何面板，但必须包括当“anypage.php”页面将被显示给用户。这是因为在调用“foo”元素时，占位符元素必须存在。在此页面的“writeFoo()”函数调用时间&中，请小心使用相同的ID。

footer.php： -

<script type="text/javascript"><!-- 
function writeFoo(arg, source) { 
    if(document.getElementById(arg) != null) { 
     document.getElementById(arg).innerHTML = document.getElementById(source).value; 
    } 
} 
// --></script>

，而这个页面应该包含包含 “writeFoo()” 函数的定义上面的JS代码。

编辑，作为@Latze： -
看你可以包括“rightpart.php”页无论是在“anypage.php”页面相同的块或任何其他页面的任何块（如“header.php” /“ footer.php“页）。但主要逻辑是当您查看特定页面时，目标/占位符ID（显示值的位置）必须存在源ID（从中获取值）&（在本例中，它意味着当您查看“anypage.php”页面时）。

希望它有帮助。

来源

2010-08-10 10:47:51

谢谢，非常有帮助:)我该如何确保“anypage.php”和“rightpart.php”同时显示？ :)包括他们在同一个块？这甚至有可能吗？ :) – Latze 2010-08-10 11:22:06

您可以从服务器端的$_POST或$_REQUEST数组中读取值，并将其插入到任何喜欢的位置（即使在javascript内），如果需要的话。例如：

<?php 
$myValue = $_POST['foo']; 
?> 
<script type="text/javascript"><!-- 
function writeMyValue() { document.write('<?php echo $myValue; ?>'); } 
// --></script>

来源

2010-08-10 10:30:43 tdammers

PHP在服务器上运行。 JavaScript在浏览器上运行。这两种语言不会相互交谈;他们甚至不会同时运行，更不用说在同一台机器上。只要用户提交表单，浏览器就会从服务器请求test.php，并且当前页面将永远消失，脚本和全部。

这真的很难找出你想要做的事情，所以我会为你提供一些一般提示：

JavaScript可以截取表单提交。您需要将onsubmit事件处理程序附加到<form>元素。分配给该事件的功能可以执行任何需要的操作，然后返回true（并让提交继续）或返回false（并取消提交）。
JavaScript可以读写几乎任何页面元素。您需要使用所谓的DOM方法。
PHP可以生成任何你需要的东西，包括HTML输入字段。

例子：

<?php 

$foo_value = date('Y-m-d H:i:s'); 

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript"><!-- 
window.onload = function(){ 
    var documentForms = document.getElementsByTagName("form"); 
    for(var i=0, len=documentForms.length; i<len; i++){ 
     documentForms[i].onsubmit = function(e){ 
      var currentForm = e.target; 
      var fooValue = currentForm.elements.foo.value; 

      var p = document.createElement("p"); 
      p.appendChild(document.createTextNode("Aborted submission: " + fooValue)); 
      currentForm.appendChild(p); 

      return false; 
     }; 
    } 
}; 
//--></script> 
</head> 
<body> 

<form method="POST" action="test.php"> 
<input type="text" name="foo" value="<?php echo htmlspecialchars($foo_value) ?>" size="30"> 
<input type="submit" value="Tryk her"> 
</form> 

</body> 
</html>

更新

这个小提示：

documentForms[i].onsubmit = function(e){ 
};

当你分配一个事件处理程序，该规范要求每次调用该函数它将作为第一个参数收到event object。该对象表示触发函数调用的事件，它可用于获取其他信息，例如the original DOM node that triggered the event。在你的函数中如何调用它并不重要;我使用e，因为我从不知道如何命名内容:)

来源

2010-08-10 10:49:07

哇！谢谢，这真的很有帮助！ Theres只有一点我不明白（我在脚本和所有方面都很新颖）：参数“e”在表单onsubmit函数中 - 何时/何处传递给函数，如果您知道我的意思吗？ :)如果你可以请向我解释一行var var currentForm = e.target; ？这将是非常好的:) – Latze 2010-08-10 11:06:59

看到我的更新 - – 2010-08-10 11:24:05

谢谢！ e对我来说很好:) – Latze 2010-08-10 14:41:08

提交表单和使用值（JavaScript）

回答

更新

相关问题