フォームから値を表示する方法は？

Question

私のコードがうまくいかない理由を教えてもらえますか？私はjqueryの新機能で、入力フィールドからjquery変数に値を取得しようとしています。 誰かが自分のコードに何が間違っているか教えていただけますか？ここにはfiddleがあります。ありがとう。

HTMLこのため

<form id="form" method="post"> 
<input type="text" id="cost" placeholder ="enter a number between 0 & 100" /> 
<input type="submit"> 



<div id="gauge" class="200x160px"></div> 

のjQuery

$("#form").submit(function() { 
value = $("#cost").val(); 

//Display value in justgage 
    var g = new JustGage({ 
    id: "gauge", 
    value: value, 
    min: 0, 
    max: 100, 
    title: "Visitors" 
    }); 

    }); 


</form> 

Answer 1

あなたはJSFiddle

でpreventDefaultで

• 負荷のjQueryに提出を必要とする仕事に
• あなたがここ

を提出するたびにゲージがすでに

FIDDLE

が存在する場合は、新しい値を設定し、作業コードで新しいゲージを作成しない

結果を置くためのゲージのための場所を持っています

var g; 
 
$("#form").submit(function(e) { 
 
    e.preventDefault(); 
 
    value = $("#cost").val(); 
 
    
 
    //Display JustGage 
 
    if (!g) { 
 
    g = new JustGage({ 
 
     id: "gauge", 
 
     value: value, 
 
     min: 0, 
 
     max: 100, 
 
     title: "Visitors" 
 
    }); 
 
    } 
 
    else g.refresh(value); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script> 
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script> 
 
<form id="form" method="post"> 
 
    <input type="text" id="cost" placeholder="enter number from 0 - 100" /> 
 
    <input type="submit"> 
 
</form> 
 
<div id="gauge"> 
 

 
</div>