justGage сохраняет добавление счетчика на Отправить нажмите

Я строю калькулятор BMI для JavaScript, и я добавляю калибровочный элемент, который показывает уровень ИМТ, и окрашивает панель красным, желтым или зеленым на основании того, что он имеет вес, вес, лишний вес или ожирением.justGage сохраняет добавление счетчика на Отправить нажмите

Я использую плагин jQuery justGage для датчика.

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда пользователь нажимает кнопку отправки для формы, новый индикатор появляется над старым датчиком, и они сохраняют укладку. Я бы хотел, чтобы новый калибр заменил старый.

Вот код, который у меня есть.

$(function() { 
 
    $('#bmiKG').validate({ 
 

 

 
    success: "valid", 
 
    submitHandler: function() { 
 
     event.preventDefault(); 
 

 
     var htCn = Number($('#heightCN').val()); 
 
     var htM = Number($('#heightM').val()); 
 
     var wtKg = Number($('#weightKG').val()); 
 
     var topline_KG = wtKg; 
 
     console.log('The Top line of the function eguals: ' + topline_KG); 
 
     var btmline_KG = Math.pow(((htCn/100) + htM), 2); 
 
     console.log('The Bottom line of the function eguals: ' + btmline_KG); 
 

 
     var bmi_KG = Math.round((topline_KG/btmline_KG) * 100)/100; 
 
     console.log('The BMI equals: ' + bmi_KG); 
 

 
     document.getElementById('output_KG').innerHTML = bmi_KG; 
 

 
     var g_kg; 
 

 
     var g_kg = new JustGage({ 
 
     id: "g_kg", 
 
     value: bmi_KG, 
 
     min: 0, 
 
     max: 50, 
 
     decimals: 2, 
 
     title: "BMI", 
 
     label: "BMI", 
 
     customSectors: [{ 
 
      color: "#FCFF00", 
 
      lo: 0, 
 
      hi: 18.4 
 
     }, { 
 
      color: "#00A200", 
 
      lo: 18.5, 
 
      hi: 24.9 
 
     }, { 
 
      color: "#FCFF00", 
 
      lo: 25, 
 
      hi: 29.9 
 
     }, { 
 
      color: "#FF0000", 
 
      lo: 30, 
 
      hi: 50 
 
     }], 
 
     }); 
 

 
    } 
 

 

 
    }); 
 

 

 

 

 

 
});

#g_kg { 
 
    width: 200px; 
 
    height: 160px; 
 
    display: inline-block; 
 
    margin: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> 
 
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script> 
 
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <form id="bmiKG" action="http://www.google.com"> 
 
     <label for="heightCN">Height in Centimeters</label> 
 
     <br> 
 
     <input type="number" name="heightCN" id="heightCN" class="required number"> 
 
     <br> 
 
     <label for="heightM">Height in Meters</label> 
 
     <br> 
 
     <input type="number" name="heightM" id="heightM" class="required number"> 
 
     <br> 
 
     <label for="weightKG">Weight in Kilograms</label> 
 
     <br> 
 
     <input type="number" name="weightKG" id="weightKG" class="required number"> 
 
     <br> 
 
     <button type="submit" name="bmiKG_submit" id="bmiKG_submit">Compute BMI</button> 
 
    </form> 
 

 
    <p>Your BMI is: <span id="output_KG"></span> 
 
    </p> 
 
    <div id="g_kg"></div> 
 
    </div> 
 

 

 

 
</body>

источник

2016-03-13 Ryan Brooks

Лучший способом я могу думать о том, чтобы переместить декларацию объекта вне функции validate(). Затем вы можете просто ссылаться на тот же объект внутри этой функции и использовать метод refresh(val) на guage, который создается при первой загрузке страницы.

$(function() { 
    var g_kg = new JustGage({ 
     id: "g_kg", 
     value: 0, 
     min: 0, 
     max: 50, 
     decimals: 2, 
     title: "BMI", 
     label: "BMI", 
     customSectors: [{ 
      color: "#FCFF00", 
      lo: 0, 
      hi: 18.4 
     }, { 
      color: "#00A200", 
      lo: 18.5, 
      hi: 24.9 
     }, { 
      color: "#FCFF00", 
      lo: 25, 
      hi: 29.9 
     }, { 
      color: "#FF0000", 
      lo: 30, 
      hi: 50 
     }], 
    }); 


    $('#bmiKG').validate({ 

    success: "valid", 
    submitHandler: function() { 
     event.preventDefault(); 

     var htCn = Number($('#heightCN').val()); 
     var htM = Number($('#heightM').val()); 
     var wtKg = Number($('#weightKG').val()); 
     var topline_KG = wtKg; 
     console.log('The Top line of the function eguals: ' + topline_KG); 
     var btmline_KG = Math.pow(((htCn/100) + htM), 2); 
     console.log('The Bottom line of the function eguals: ' + btmline_KG); 

     var bmi_KG = Math.round((topline_KG/btmline_KG) * 100)/100; 
     console.log('The BMI equals: ' + bmi_KG); 

     document.getElementById('output_KG').innerHTML = bmi_KG; 
     // the documentation isn't really clear for justgage, but 
     // the 2nd parameter is the new max value. I'm not sure if it can be omitted 
     g_kg.refresh(bmi_KG, null); 
    } 
    }); 
});

С помощью этого метода, вы просто изменить значение уже существующей колеи, а не создавать новую каждый раз, когда запускается функция проверки.

источник

2016-03-13 01:24:25 shamsup

Большое вам спасибо! Это работало как прелесть! –

justGage сохраняет добавление счетчика на Отправить нажмите

ответ

Смежные вопросы