JQuery мобильный выход

Я пытаюсь построить простой калькулятор для пенсионеров. Три входа вводятся на одной странице формы, и результат отображается на другой странице. Вывод находится в текстовом формате. Но возникает следующая проблема:JQuery мобильный выход

Выход показан, например. 2100021000 вместо фактических 21000 это происходит во всех расчетных результатах.

Как правильно отображать результаты без повторов?
Как отображать результаты в трех отдельных текстовых полях на странице результатов, похожих на страницу ввода текста? Я новичок в этом. Нужна помощь.

index.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta content='width=device-width, initial-scale=1' name='viewport'/> 
<title>Pension Calculator</title> 

<link rel="stylesheet" href="js1/jquery.mobile-1.4.3.min.css" type="text/css"/> 
<script src="js1/jquery-1.11.1.min.js" type="text/javascript"></script> 
<script src="js1/jquery.mobile-1.4.3.min.js" type="text/javascript"></script> 

<script> 
// Bind to 'pageinit' event for our data page 
//$(document).delegate('#data', 'pageinit', function(){ 
    $(document).on('pagecreate', '#page1', function() { 
    // Do some processing when the button with id 'calc' is clicked or tapped 

    $('#calc').bind('click', function() { 
     //event.preventDefault(); 
      var basic = $('[name="basic"]').val(), 
       pbasic = $('[name="pbasic"]').val(), 
       gratuity = $('[name="gratuity"]').val(), 
       da = $('[name="da"]').val(), 
       years = $('[name="years"]').val(), 
       total = $('[name="total"]').val(), 


    basic = basic + (basic*da/100); 
    pbasic = basic/2;  
    da = pbasic*da/100; 
    gratuity = (basic) + ((da))*15/26 * years; 

    if 
     (gratuity > 1000000) 

     gratuity = 10000000;   

    total = (pbasic) + (da); 
    gratuity = gratuity.toFixed(2); 
    pbasic = pbasic.toFixed(2); 
    total = total.toFixed(2); 

     // Get to the DOM node that has the actual BMI text 
      // while ($total.children().length) { 
       // $total = $total.children().first(); 


      // Set it to the calculated value 
      // $total.text(total); 


       $result = $('#results #gratuity'); 
       $result.text(gratuity); 


       $result = $('#results #pbasic'); 
       $result.text(pbasic); 


       $result = $('#results #total'); 
       $result.text(total); 





    }); 
}); 
</script> 

</head> 

<body> 
<div id="page1" data-role="page"> 
<header data-role="header"> 
<h1>Simple Pension Calculator</h1> 

</header> 

<div data-role="content" data-theme="a"> 


    <div data-role="content"> 

    <form id="theForm"> 


     <div data-role="fieldcontain" data-inset="true"> 

     <label for="basic">Present Basic (Basic including Grade Pay + NPA)</label> 
       <input type="number" name="basic" id="basic" value="0" autofocus required> 
      </div> 

      <div data-role="fieldcontain"> 
       <label for="years">Years of Service</label> 
       <input type="number" name="years" id="years" value="0" required> 
      </div> 

      <div data-role="fieldcontain"> 
       <label for="da">Existing DA (%)</label> 
       <input type="number" name="da" id="da" value="0" required> 
      </div> 
      </form> 
      <a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a> 
     </div> 
     </div> 
     </div> 


<div id="results" data-url="results" data-role="page"> 
<div data-role="header"> 
<h1>Results</h1> 
</div> 

<div data-role="content"> 
Your Gratuity:<br> 
<span id="gratuity"><span style="font-size: 52px; "><strong>24</strong></span></span><br> 
Your Basic Pension:<br> 
<span id="pbasic"><span style="font-size: 52px; "><strong>24</strong></span></span><br> 
Your Pension:<br><br> 
<span id="total"><span style="font-size: 52px; "><strong>24</strong></span></span> 
</div> 
</div> 
</body> 
</html>

источник

2014-09-09 ranjan

Где 'имя = gratuity' и 'name = pbasic' в html? Почему вы используете один и тот же результат var '$ result? 3 раза? – Omar

Поскольку как чаевые, так и pbasic являются вычисленными значениями, поэтому они не входят в форму ввода. Я использую его три раза, чтобы получить результаты: 1. чаевые 2. pbasic & 3. Penasion. – ranjan

name = gratuity и name = pbasic - вычисленные значения, поэтому они не входят в форму ввода html. $ result 3 раза, чтобы получить расчетные значения 1. пособие 2. pbasic & 3. Pension. – ranjan

очистить код так:

<div id="page1" data-role="page"> 
    <header data-role="header"> 
     <h1>Simple Pension Calculator</h1> 
    </header> 
    <div role="main" class="ui-content"> 
     <form id="theForm"> 
      <div data-role="fieldcontain" data-inset="true"> 
       <label for="basic">Present Basic (Basic including Grade Pay + NPA)</label> 
       <input type="number" name="basic" id="basic" value="0" autofocus required /> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="years">Years of Service</label> 
       <input type="number" name="years" id="years" value="0" required /> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="da">Existing DA (%)</label> 
       <input type="number" name="da" id="da" value="0" required /> 
      </div> 
     </form> 
     <a id="calc" href="#results" data-role="button" data-icon="gear">Calculate</a> 
    </div> 
</div> 

<div id="results" data-url="results" data-role="page"> 
    <div data-role="header"> 
     <h1>Results</h1> 
    </div> 

    <div role="main" class="ui-content"> 
     Your Gratuity:<br /> 
     <span id="gratuity" class="resultspan"></span><br /> 
     Your Basic Pension:<br /> 
     <span id="pbasic" class="resultspan"></span><br /> 
     Your Pension:<br /> 
     <span id="total" class="resultspan"></span> 
    </div> 
</div>

Стиль результаты охватывают с CSS классом вместо инлайн:

.resultspan { 
    font-size: 52px; 
    font-weight: bold; 
}

В скрипте pbasic, g ратификация и общее количество не считываются из DOM, а скорее устанавливаются во время вычисления, поэтому инициализируйте их до нуля. При чтении других значений из входов, вы можете использовать parseInt() обеспечить текст конвертируется в целые числа, прежде чем использовать их в расчетах:

$('#calc').on('click', function() {   
    //event.preventDefault(); 
     var basic = parseInt($('#basic').val()), 
      da = parseInt($('#da').val()), 
      years = parseInt($('#years').val()), 
      pbasic = 0, 
      gratuity = 0, 
      total = 0; 

    basic = basic + (basic*da/100); 
    pbasic = basic/2;  
    da = pbasic*da/100; 
    gratuity = (basic) + ((da))*15/26 * years; 

    if (gratuity > 1000000) 
     gratuity = 10000000;   

    total = (pbasic) + (da); 
    gratuity = gratuity.toFixed(2); 
    pbasic = pbasic.toFixed(2); 
    total = total.toFixed(2); 


    $('#results #gratuity').text(gratuity); 
    $('#results #pbasic').text(pbasic); 
    $('#results #total').text(total); 
});

Рабочей DEMO

источник

2014-09-09 21:29:40 ezanker

Спасибо, что так много. Он работает сейчас. Как получить результаты, которые будут отображаться в текстовых полях на странице результатов, аналогичной входным текстовым полям? – ranjan

@ranjan, просто используйте входы вместо пролетов и пишите в .val() вместо .text(): http://jsfiddle.net/ezanker/f4rthqed/1/ – ezanker

, вы делаете это так просто. Большое спасибо. Поскольку я сам преподаю, пожалуйста, предложите мне несколько книг, откуда я могу точно узнать, что вы предложили. Еще раз, спасибо. – ranjan

JQuery мобильный выход

ответ

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