jQueryフォームでの計算

Question

私は、バイク用のフレームサイズを計算するための短い計算式を作成しようとしています。

計算は次のとおりです。長さ* 0.68 =フレームサイズ。ただし、サドルピンのオプションが選択されている場合は、（計算されたフレームサイズの）4の減算が必要です。

これは私がこれまで持っているものです。

$("select[name='length']").change(function(){ 
    var $l = $('length[name='length']'); 
    if($l.length >140){ 
     var m = parseInt($l.val(), 10) 
     $("#result").val(l*0.68); 
    } else { 
     $("p").text("Hello world!"); 
    }  
}); 

---

<form> 
    <input type="text" value"" name="length"> 
    <input type="radio" name="type" value="nopin"> Zadelpen 
    <input type="text" value="" id="result"/> 
</form> 
<p></p> 

そして、フィドルはここにある： https://jsfiddle.net/m2qnf3jm/

あなたはそれが私にどんな結果を与えていない見ることができるように。私はjQueryが新しく、このテーマで見つけられるチュートリアルに従おうとしました。私の推測では、計算を開始するにはボタンが必要ですか？オプションのサドルピンが選択されていれば、最後にどのように差し引かれますか？

また、最小の長さは140なので、誰かがそれより低い値を入力すると、何かをエコーし​​ようとしました。

Answer 1

あなたのhtmlとjavascriptロットのタイプミスと無効な構文。 のonchangeイベントが少し斜めに思わ

$('document').ready(function() { 
 
    $('input[name="length"]').on('change', function() { 
 
    var lengVal = $(this).val(); 
 
    var m = parseFloat(lengVal) * 0.68; 
 
    
 
    $('#result').val(lengVal > 140 ? m : 'Hello World!'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="text" value="" name="length"> 
 
<input type="radio" name="type" value="nopin"> Zadelpen 
 
<input type="text" value="" id="result"/> 
 
</form>

Answer 2

：これを試してみてください。

$().ready(function() { 
    //PAGE READY FUNCTION - THE PLACE TO BIND EVENTS 
    $("input[name='length']").on('change, keyup', function() { 
     var length = $(this).val(); 
     if($l.length >140) 
     { 
      var m = parseFloat(length); 
      var value = m * 0.68; 
      $('p').html("NORMAL"); 
      if($('#radio_button').is(':checked')) 
      { 
       value = value - 4; 
       $('p').html("ZANDELPEN"); 
      } 
      $("#result").val(l*0.68); 
     } 
     else  
     { 
      $("p").text("Too Short!"); 
     } 
     }); 

}); 

EDIT

遅すぎるそれはそうです。しかしラジオボタンコードはあなたのためにあります。

グッドラック

Answer 3

ここではあなたのソリューションは、私はあなたの計算が正しい理解していれば、あなたの中に、また、このコード

を実行しよう

$('document').ready(function(){ 
    $('[name="length"]').on('change', function(){ 
     var l = $(this).val(); 
     if(l > 140){ 
      $("#result").val(parseInt(l) * 0.68); 
     } 
     else{ 
      $("p").text("Hello world!"); 
     } 
    }); 
}); 

Answer 4

$('#cacl_btn').on('click',function() { 
 
$("p").text(''); 
 
    var $l = $('input[name="length"]').val(); 
 
    
 
    if ($l >= 140) { 
 
    var m = $l * 0.68; 
 
var deduction=$('input[name="type"]').prop('checked')?4:0; 
 
    $("#result").val(Math.round(m*100)/100-deduction); 
 
    
 
    } else { 
 
    $("p").text("length couldn't be <140"); 
 
     $("#result").val(''); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" value "" name="length"> 
 
    <input type="checkbox" name="type"> Zadelpen 
 
    
 
    <input type="button" id="cacl_btn" value="calculate"> 
 
    <input type="text" value="" id="result" /> 
 
</form> 
 
<p></p>

ですあなたはjqueへのリンクを追加するのを忘れてしまったry

入力やクラス名にidを使用することもお勧めします。