ユーザー入力変数からのテキストがdiv要素に残っていない

Question

HTML form要素から変数を取り出し、ボタンをクリックするたびにdivに入れてウェブサイトに表示しようとしています。しかし、それは2番目に表示され、離れて飛び散る。

私はdocument.ready()ブロックから取り出してみましたが、それは機能しませんでした。 $(".output").htmlに文字列リテラルを入れると同じ問題が発生します。私のような同様の質問は構文エラーのようですが、私は見つけることができないようです。ここで

$(document).ready(function(){ 
    $(".sub").on("click",function(){ 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val()); 
    }); 
}); 

はcodepenに私のサイトです：http://codepen.io/arcjackson06/pen/NNeQvJ

Answer 1

あなた<button>は、周囲のフォームを送信します。

<button class="..." type="button"></button> 

クリックするとフォームが送信されないようにします。

$('.sub').on('click', function(event) { 
    event.preventDefault(); 
    // ... 

Answer 2

問題がページ上のフォームには、誰かがその検索ボタンをクリックするたびに提出されていることである：あなたがして、デフォルトのクリックイベントを防ぐことができます

代替。あなたがevent.preventDefaultを使用する必要があることを防ぐために：これはトリックを行う必要があります

$(".sub").on("click",function(event){ 
    event.preventDefault(); 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val()); 

Answer 3

：

$(".sub").on("click",function(e) 
{ 
    e.preventDefault(); 
    var searchstring = $("#searchfield").val(); 
    $(".output").html(searchstring); 
} 

Answer 4

余分なJavaScriptのための必要はありませんが。

ボタンに属性type="button"を指定すると、それが処理されます。

問題は、ボタンのデフォルトのタイプはサブミットであり、ページをリフレッシュすることです。

Answer 5

誰かがクリックしているときに、フォームを送信してページがリロードされています。フォームを提出したくない場合

これを試すことができます。

$(document).ready(function(){ 
    $(".sub").on("click",function(event){ 
    var searchstring = $("#searchfield"); 
    $(".output").html(searchstring.val()); 
    event.preventDefault(); // This will prevent the form submission 
    }); 
}); 

Answer 6

フォームをリフレッシュしています。だからあなたは価値を見ないのです。私は次のようにfalseを返し追加http://codepen.io/anon/pen/vGwNJP

：更新codepenを参照してください

$(document).ready(function(){ 


    $(".sub").on("click",function(e){ 
    var searchstring = $("#searchfield"); 

    $("#output").html(searchstring.val()); 
    return false; 
    // Or e.preventDefault(); 



    }); 
}); 

代わりに、e.preventDefault（）を追加することができます。同じように。

Answer 7

フォームを使用しているので、フォームのデフォルトの動作、つまり送信を試みます。

ここでは、onclickハンドラでevent.preventDefaultを実行する必要があります。