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>してページを更新/反映します(写真の#3)。

上記の方法を既に知っているかもしれませんが、そうでない場合は、AJAX を学習し、jQuery で div を更新するときに、これらのチュートリアルが非常に役立つことがわかりました。

AJAX を使用したフォームの処理: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

次に、AJAX が完了<div>したら、関数を使用してページの a を更新します: http://api.jquery.com/jQuery.ajax/success

ただし、実際にデータを処理する必要がない場合は、JQUERY を使用してすべてを処理してください。通常のフォームでは、以下を使用して、submit の onclick データで 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>

さらに、ノックアウトを見てください。ページにあなたのような状況がたくさんある場合、そのようなことをより簡単に行うことができます.

ノックアウトを使う場合

<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 に答える