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中加载jQuery
preventDefault the submission
有一个量表放置结果的地方
每次提交时都不会创建新的指标

以下是一个工作代码，如果指标已存在，则设置新值

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>

如何显示表单中的值？

1 个答案: