你如何使用由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）

回答

更新

相關問題