フォーム、ショー、ディスカードからテキストをHTML形式で表示

Question

信じられないほど単純です。同様の質問がされましたが、私はそれを働かせることはできません。私はjavascriptの中級初心者ですが、jQueryについては全く新しいものです。私はちょうど1つのテキスト入力を変数に（後でAPIサブミッションに使うために）キャプチャし、それをWebページに表示してキャプチャしたことを確認したいだけです。私はこのためにjQueryを理解するために値を取得するためにjavascriptを使用することを避けようとしています。

マイHTML：

<form id='myForm'> 
    Zip: <input type="text" id='zip' /> 
    <input type="submit" value="Submit" id='submit' /> 
    <p id='showZip'>Not here yet</p> 
</form> 

私のjQuery：

$(document).ready(function() { 
    $('#submit').click(function() { 
    var myZip = $('#zip').val(); 
    $('#showZip').html(myZip); 
    }); 
}); 

編集：私はそれが実際に動作しません、と私は簡単にHTMLを参照してください、それがリセットされること、追加することを意味しました。

Answer 1

preventDefault();（​​）を使用してください。フォームが送信されてリセットされないようにしてください。

は、そう、次のようにコードを更新するには：何かが間違っている場合

$(document).ready(function() { 
    $('#submit').click(function(event) { 

    event.preventDefault(); 

    var myZip = $('#zip').val(); 
    $('#showZip').html(myZip); 
    }); 
}); 

Answer 2

一般に、jQueryとJavascriptは、<input>のような機能を持つ要素に格納されていない限り、ページの送信を継続できず、再読み込み時にその値をページに戻します。 （あなたの好みのサーバー側の技術を使用して）。

すでにあなたの価値を保持する要素を持っているので、あなたは、サーバー側のコード内の値にアクセスできるようになりますname属性追加することを検討：あなたのコード

について

<!-- The name attribute will post the value in this to a key named 'zip' --> 
<input type="text" id='zip' name='zip' /> 

を

あなたのフォームは実際には正しいはずですが、フォームが送信されたときにページのマークアップ（つまり、showZip要素のHTMLを設定する）が変更された場合、以下のように消去されます：

実際にページがサーバーに送信された結果、実際のページが更新される直前に置換が行われていることがわかります。