1

我是 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>

这是可以理解的，但我只想做一些简单的事情，比如输入一个文本字段然后提交，并且在底部的同一页面内将显示正在输入的任何文本。

我想知道是否有人可以帮我解决这个问题。在此处输入图像描述

以上就是我想要的...

已编辑

这是我在得到所有好人的回复后目前所拥有的，脚本对我来说很有意义，但不知何故它仍然无法正常工作:(

<!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> 类似的东西......

4

3 回答 3

1

根据您提供的图片，我将使用 AJAX 进行数据提交，然后使用 jQuery 更新/反映<div>页面上的 a（图片中的 #3）。

您可能已经知道如何执行上述操作，但如果不知道，我发现这些教程在学习 AJAX 和使用 jQuery 更新 div 时非常有用：

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

然后在 AJAX 完成后<div>使用该success函数更新页面上的 a：http: //api.jquery.com/jQuery.ajax/

但是，如果您实际上不需要处理数据……那么只需使用 JQUERY 来处理所有数据！正常形式，然后使用下面的数据更新DIV 提交的点击数据。

 <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>

让我知道这是如何工作的。并且不要忘记将其标记为未来用户的答案（如果有效）。谢谢！

于 2013-11-06T03:38:10.450 回答
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>

另外看看knockout，当页面中有很多像您这样的情况时，您可以更轻松地执行此类操作。

如果你使用淘汰赛

<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>
于 2013-11-06T03:30:10.113 回答
1

你可以这样做，

<input type="text" id="name2" onclick="changeName()" />  
<script>  
function changeName(){  
    document.getElementById('newname').innerHTML=document.getElementById('name2').value;  
}  
</script>
于 2013-11-06T03:30:53.567 回答