如何使用提交表單更改位於另一頁上的文本？

我正在嘗試創建一個提交表單，我可以使用Javascript和HTML更改位於另一頁上的文本的innerHTML。如何使用提交表單更改位於另一頁上的文本？

當我輸入的輸入文字，單擊提交位於的index.html，我被重定向其他頁面上，問題是，在page.html中沒了H1不會改變這個值。爲什麼？

下面是代碼：

的index.html

<form method="POST" action="page.html" id="form" onsubmit="change()"> 
    <input type="text" id="myTextField"/> 
    <input type="submit" id="byBtn" value="Change"/> 
</form>

page.html中

<h1 id="title">Javascript example no.2</h1>

Javascript.js

function change(){ 
    var title = document.getElementById('title'); 
    title.innerHTML = myNewTitle; 
}

我在做什麼錯？

來源

2015-07-01 Lindow

沒有somehwere存儲的值（例如一個cookie）如何page.html中應該知道你輸入的內容在index.html上的形式？ – j08691

只有該代碼全部在同一頁面上並且動作將設置爲「」 – Toumash

有一對夫婦的方式來處理這個問題。最常見的是通過處理表單數據並生成服務器端的HTML，但如果您願意，可以使用JavaScript在客戶端完成。

服務器端（PHP）技術

下面的例子示出了PHP溶液。這也可以通過ASP，JSP，& c來完成。如果您希望數據持續存在，您必須在page.php（或基於所用語言的同等語言）上記錄它，並將其存儲在會話Cookie或數據庫中（具體取決於所需的持久性）。

索引。HTML

<form method="POST" action="page.php"> 
    <input type="text" id="my_text" name="my_text" /> 
    <input type="submit" /> 
</form>

page.php文件

<?php 
    /* the $_REQUEST will get the variable regardless of whether 
    * it is sent via POST or GET. You may wish to use $_POST 
    * instead, for security reasons. */ 
    echo "<h1>" . $_REQUEST["my_text"] . "</h1>"; 
?>

客戶端（JavaScript）技術＃1

如果要使用JavaScript，你將需要存儲信息在網站上的其他頁面可以訪問的地方。這可能是一個cookie或本地存儲。在這種情況下，cookie可能是最簡單的（也是最可靠的）存儲技術。下面的jQuery示例顯示了該技術。

的index.html

<script type="text/javascript"> 
    function store() { 
    var text = document.getElementById("my_text").value; 
    document.cookie = "text=" + text + "; path=/"; 
    } 
</script> 
<form action="page.html" onsubmit="store()"> 
    <input type="text" id="my_text" /> 
    <input type="submit" /> 
</form>

page.html中

<h1 id="title"></h1> 
<script type="text/javascript"> 
    /* this just grabs the value of the first cookie for your site. 
    * if you use cookies elsewhere, you'll need to add logic to 
    * make sure you get the correct cookie. */ 
    var text = document.cookie.split(";")[0].split("=")[1]; 
    document.getElementById("title").innerHTML = text; 
</script>

客戶端（JavaScript）技術＃2

您還可以通過發送URL中的數據（使用GET而不是POST）來避免使用Cookie。我借用/修改了this blog中的代碼片段來演示該技術。

的index.html（無JavaScript的這個網頁上！）

<form method="GET" action="page.html"> 
    <input type="text" id="my_text" name="my_text" /> 
    <input type="submit" /> 
</form>

page.html中

<h1 id="title"></h1> 
<script type="text/javascript"> 
    function getUrlVars() { 
    var vars = {}; 
    var url = decodeURIComponent(window.location.href.replace(/\+/g, '%20')); 
    var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
      function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 
    } 

    var text = getUrlVars()["my_text"]; 
    document.getElementById("title").innerHTML = text; 
</script>

來源

2015-07-01 16:19:14

非常感謝！ – Lindow

@Sia如果它不工作，讓我知道，所以我可以修復代碼。我沒有費心去測試它，但這些想法是正確的。 –

@Sia增加了第三個可能適合你的選項。 –

您正在運行的JavaScript上當前頁面。它修改當前頁面的DOM，然後加載新頁面（在表單的操作中指定）。

對於它來修改你提交你就必須有JavaScript的該網頁頁面，它必須通過檢查提交的數據（這是不可能的頁面加載響應 - POST數據不暴露給目標頁面中的JS）。

您可以將數據存儲在別處（例如cookie），然後在下一頁加載時查看。

這就是說，最好用服務器端代碼來處理。

來源

2015-07-01 16:00:15 Quentin

您還可以將標題存儲爲yournewaddress.html#myTitle，並得到myTitle有： $("h1").text(location.hash)

來源

2015-07-01 16:06:28 Sacreyoule

有幾個方法可以做到這一點。最快的方法是：

的index.html

<form method="get" action="page.html"> 
    <input name="myTextField"/> 
    <input type="submit"/> 
</form>

page.html中

<body onload="change();" 
<h1 id="title">Javascript example no.2</h1> 

<script> 
function change(){ 

var $_GET = {}, 
    args = location.search.substr(1).split(/&/); 
for (var i=0; i<args.length; ++i) { 
    var tmp = args[i].split(/=/); 
    if (tmp[0] != "") { 
     $_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " ")); 
    } 
} 
document.getElementById("title").innerHTML = $_GET[decodeURIComponent(tmp[0])]; 
} 
</script> 


</body>

來源

2015-07-01 16:23:38

如何使用提交表單更改位於另一頁上的文本？

回答

相關問題