从3个输入字段中获取数据以计算价格而不刷新页面

时间:2016-12-08 14:38:21

标签: jquery ajax

请有人帮助我。 我需要计算价格并自动将其添加到输入字段而不刷新页面

这是我到目前为止所得到的,但它不起作用

输入html表单字段看起来有点像这样

 <form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
     <b>Airport:</b> &nbsp;&nbsp;&nbsp;&nbsp;
     <select size="1" name="arrivalairport" id="airport">
        <option value=""></option>
            <?
            $airportresult = mysql_query("SELECT * FROM ms_airport_airport WHERE LENGTH (ms_airport_airport_name) > 1 ORDER BY ms_airport_airport_name");
            if (mysql_num_rows($airportresult) > 0) {
               while (($airsubrow = mysql_fetch_assoc($airportresult)) !== false){
                   $airportname = $airsubrow['ms_airport_airport_name'];
                   echo '<option value="'.$airportname.'">'.$airportname.'</option>';
               }
            }
            ?>
      </select>
      <p>
      <b># Passengers:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalnrpass" id="arrivalnrpass" size="3">
      <p>
      <b>Babyseat:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalbaby" id="arrivalbaby" size="3">
      <p>
      <b>Price:</b>&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" name="arrivalprice" id="arrivalprice" size="5">  &euro;
      <p>
      <input class="button" type="submit" value="Add" name="action">
 </form>

这就是我所拥有的ajax

<script>
   $(document).ready(function(){  
       $('#airport').change(function(){  
           var airport_name = $(this).val();
       });      
   });

   $('#arrivalnrpass').keyup(function(){  
       var arrivalnrpass = $(this).val();
    });

    $('#arrivalbaby').keyup(function(){  
       var arrivalbaby = $(this).val();
    });  

    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0)  {
        var price = 40
        $('#arrivalprice').val(price);
    }  
 });  

  </script>

我希望有人可以帮助我 - 谢谢

2 个答案:

答案 0 :(得分:0)

你可以试试这个:

var mailMessage = new MailMessage();
mailMessage.To.Add(dummyEmail);

using (var client = new SmtpClient())
{
    client.UseDefaultCredentials = true;
    client.DeliveryMethod = SmtpDeliveryMethod.SpecifiedPickupDirectory;
    client.PickupDirectoryLocation = tempFolder;
    client.Send(mailMessage);
}

var filePath = Directory.GetFiles(tempFolder).Single();
var lines = File.ReadAllLines(filePath);

//Search for receiver (To) and replace it with BCC since I don't need To in my case
for (int i = 0; i < lines.Length; i++)
{
    if (lines[i].StartsWith("To: " + dummyEmail))
    {
        lines[i] = "Bcc: " + bcc; //Replace To with Bcc
        break;
    }
}
$(document).ready(function(){  

var airport_name;
var arrivalnrpass = 0;
var arrivalbaby = 0;

       $('#airport').change(function(){  
           airport_name = $(this).val();
       }); 

   $('#arrivalnrpass').on('input', function(){  
       arrivalnrpass = $(this).val();
       calculate();
    });

    $('#arrivalbaby').on('input', function(){  
       arrivalbaby = $(this).val();
       calculate();
    });
    
    $('#arrivalprice').on('focus', function(e) {
    	calculate();
    })
    
    function calculate() {
    	$('#arrivalprice').val(parseInt(arrivalnrpass) + parseInt(arrivalbaby));
    }

 });

希望这有帮助!

答案 1 :(得分:0)

在我看来,主要问题是,当脚本第一次运行时,您的Javascript计算价格(您的if语句)只运行一次。每次运行.change()或.keyup()事件时都需要调用它,所以将它包装在一个函数中并调用它。

function calculatePrice() {
    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0)  {
        var price = 40
        $('#arrivalprice').val(price);
    }
} 

现在从你的'this-thing-have-updated'函数中调用它。

您可能希望无法更改#arrivalprice。您可以在表单上使用<p>标记,但这会阻止它提交 - 也就是说,信任处理代码中此页面上可视化显示的价格是不明智的,因为可以通过简单的方式轻松修改黑客攻击。现在所有人都必须做的就是改变这个价值,突然间他们得到了相当甜蜜的折扣。所以你最好从其他答案中计算出来,就像你在这里一样。

如果您确实希望将其作为输入并将其设为只读,请使用readonly属性:https://stackoverflow.com/a/3676132/6855449

你的$(文件).ready()也只延伸到$('#airport')。change(),结果你最后有一组无关的大括号。我猜你想解决这个问题。