如何使用javascript與窗體和json然后輸出json數據？

Question

我是javascript的新手，所以希望我想要的東西能起作用。 我查了幾個論壇和教程，其中大多數只教過類似的東西

<p>Original name: <span id="origname"></span></p>
<p>New name: <span id="newname"></span></p>

<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" }, 
{ "firstName" : "Anna" , "lastName" : "Smith" }, 
{ "firstName" : "Peter" , "lastName" : "Jones" }, ];

document.getElementById("origname").innerHTML=employees[0].firstName + " " + employees[0].lastName;

// Set new name
employees[0].firstName="Gilbert";
document.getElementById("newname").innerHTML=employees[0].firstName + " " + employees[0].lastName;
</script>

這是非常容易理解的，但我只是想做一些像輸入文本字段那樣簡單然后提交的內容，並在底部的同一頁面中顯示輸入的文本。

我想知道是否有人可以幫助我。 在此輸入圖像描述

以上是我想要的......

EDITED

這是我得到所有好人的回復后的那一刻，腳本對我有意義，但不知何故，它仍然沒有工作:(

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title></title>
  <script src="jquery-1.9.1.min.js"></script>



</head>
<body>

<form action=" " method="post">
<input id="myInput" type="text"/>
<input id="myButton" type="button" value="submit"/>
<p id="myOutput"></p>
</form>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

</body>

另外一個問題。 我現在說代碼是

<p id="myOutput" style="color: yellow; background: black; width: 100px;"></p>

是jquery能夠更改代碼？ 讓我們說如果我以某種方式鍵入紅色然后代碼將是

<p id="myOutput" style="color: red; background: black; width: 100px;"></p>

如果我有另一個輸入文本區域並輸入200，那么代碼將是

<p id="myOutput" style="color: yellow; background: black; width: 200px;"></p>類似......

Answer 1

如果你使用jquery寫少做多，

<input id="myInput" type="text"/>
<input id="myButton" type="button"/>
<p id="myOutput"></p>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

另外看看淘汰賽，當你的頁面中有很多像你這樣的情況時，你可以更輕松地做這些事情。

如果你使用淘汰賽

<input type="text" data-bind="value:data"></input>
<p data-bind="text:data"></p>

<script>
function AppViewModel() {
    this.data= ko.observable("");
}

ko.applyBindings(new AppViewModel());
</script>

Answer 2

你可以這樣做，

<input type="text" id="name2" onclick="changeName()" />  
<script>  
function changeName(){  
    document.getElementById('newname').innerHTML=document.getElementById('name2').value;  
}  
</script>

Answer 3

根據您提供的圖片，我將使用AJAX進行數據提交，然后jQuery更新/反映頁面上的<div> （圖片中的＃3）。

您可能已經知道如何執行上述操作但如果沒有，我發現這些教程在學習AJAX和使用jQuery更新div時非常有用：

使用AJAX處理表單： http ： //net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

然后在AJAX完成時使用success函數更新頁面上的<div> ： http ： //api.jquery.com/jQuery.ajax/

但是，如果您實際上不需要處理數據......那么只需使用JQUERY來處理所有數據！ 正常形式，然后使用以下更新DIV與提交的數據onclick。

 <div id="output"></div>
 <script>
    $("#submit").click(function() {
         var output = $("#new_name").val();
    $("#output").text(output);
    });
 </script>

更新

感謝您發布代碼。 我在這里擺弄了一個有效的解決方案http://jsfiddle.net/hwGde/4/

以下是包含問題的行注釋的代碼：

 <form action=" " method="post">
      <input id="myInput" type="text" />
      <input id="myButton" type="button" value="submit" />
      <p id="myOutput"></p>
 </form>

  <script> 
    $("#myButton").click(function () {
       var data = $("#myInput").val();
       // $("#myOutput").val(data); this should be .text instead of .val
       $("#myOutput").text(data);
    });
 </script>

讓我知道這是如何工作的。 並且不要忘記將其標記為未來用戶的答案（如果有效）。 謝謝！

如何使用javascript與窗體和json然后輸出json數據？

問題描述

以上是我想要的......

3 個解決方案

解決方案1
1 2013-11-06 03:30:10

解決方案2
1 2013-11-06 03:30:53

解決方案3
1 已采納 2013-11-06 03:38:10

如何使用javascript與窗體和json然后輸出json數據？

問題描述

以上是我想要的......

3 個解決方案

解決方案1 1 2013-11-06 03:30:10

解決方案2 1 2013-11-06 03:30:53

解決方案3 1 已采納 2013-11-06 03:38:10

解決方案1
1 2013-11-06 03:30:10

解決方案2
1 2013-11-06 03:30:53

解決方案3
1 已采納 2013-11-06 03:38:10