jQueryは、リモートサーバーにサブミット範囲スライダ値を送信します。

Question

私は送信ボタンが一致する複数の範囲スライダを持つページを持っていますので、ユーザーがそれを変更してプログラムを実行しているサーバーに送信することができます。この値の2乗を返し、それを私に返します。

$(window).on("load", function(){ 
     var slider = $(".slider"); 
     slider.change(function(){ 
      var output= this.value; 
      $(".formoid").submit(function(event) { 
       posting= $.get("http://192.168.4.49:8002/data", { n:output }); 
       posting.done(function(data){ 
       console.log(data) 
       }); 
      }); 
     }); 
    }); 

（HTML）

<div id='Services' style="display:none;"> 
      <span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Services </span> 
      <div id="svg_Services"></div> 
      <div id="slider_box"> 
      <div class="Slider"><input type="range" class="slider" min="0" max="100" name="output10"></div> 
      <b><div class="output" id="output10">value: %</div></b> 
      </div> 
      <form class="formoid" title="" method="get"> 
       <div> 
        <input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value"> 
       </div> 
      </form> 
    </div> 

    <div id='Agriculture' style="display:none;"> 
     <span class="Content_Title"> Demand <i class="fa fa-chevron-right" aria-hidden="true"></i> Tertiary <i class="fa fa-chevron-right" aria-hidden="true"></i> Agriculture </span> 
     <div id="svg_Agriculture"></div> 
     <div id="slider_box"> 
      <div class="Slider"><input type="range" class="slider" min="0" max="100" name="output11"></div> 
      <b><div class="output" id="output11">value: %</div></b> 
     </div> 
     <form class="formoid" title="" method="get"> 
       <div> 
        <input type="submit" class="btn-info" id="submitButton" name="submitButton" value="Submit Value"> 
       </div> 
     </form> 
    </div> 

問題は、私が移動した場合、私は別のスライダーの値を送信するたびに、私はwell.For例として、以前のものを得ることである：これは私が使用しているコードです。最初のスライダは3の値になります。私は私のコンソールで9を取得します。この後、別のスライダを2の値に移動すると、9と4が得られます。

Answer 1

フォームを送信したくないので、スライダーの1つが変更されるたびに増加する「提出」ハンドラーが蓄積されるのではなく、「提出」ハンドラーは必要ありません。

• が
• が
• が見えなければ$.get(...)...

$(window).on("load", function() { 
    $(".formoid").on('click', 'button', function(e) { // guess; adjust as necessary to delegate button click handling to the form. 
     e.preventDefault(); // prevent buttons submitting the form 
     var $slider = $(this).prev('input'); // guess; adjust as necessary to select the appropriate slider relative to the clicked button 
     $.get("http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) { 
      console.log(data); 
     }); 
    }); 
}); 

を実行し、ボタンの対応するスライダー要素を見つけ、フォームの送信を禁止する：

代わりに、 'クリック' ハンドラをアタッチHTMLの中には、acいくつかのデバッグをする準備ができています。

EDIT：HTMLの光景で

、ジャバスクリプトは次のようになります。値9から来ている

$(window).on("load", function() { 
    $(".btn-info").on('click', function(e) { 
     e.preventDefault(); // prevent form submission. 
     var $slider = $(this.form).closest('div').find("input.slider"); 
     $.get("http://192.168.4.49:8002/data", { n: $slider.val() }).then(function(data) { 
      console.log(data); 
     }); 
    }); 
});