AJAX调用后端PHP文件并使结果显示在HTML范围内

时间:2014-01-27 14:06:47

标签: javascript php jquery html ajax

我对一个执行日期计算的PHP文件进行了AJAX调用。如果我在表单上放置一个文本字段并在输入开始日期和结束日期后将焦点放入其中(例如,如果我输入2014年1月1日和2014年12月31日,我得到260),我可以确认它是否有效如果我切换到我的“结果”字段。)

我现在要做的是在输入结束日期后的结果中显示结果。这样,用户无需切换到文本字段即可查看。这是我的jQuery代码,用于调用文件并在span中显示结果:

$(function() 
  {
  $('#result').focusin(function(event) //'result' is the name of the span
  {
      var start = $('#startDate').val();
      var end = $('#endDate').val();

     $("#endDate").on('input',function() {
     var dateRegex = /(\d{1,2}\/\d{1,2}\/\d{4})/gm;
     if(dateRegex.test($("#endDate").val()) ) { //Make sure date is formatted correctly  

      $.ajax(
      {
          type: 'POST',
          url: 'calcdays.php',
          data: 
          {
              startDate: start,
              endDate: end
          },
          success: function(data) 
          {       
              $('#result').html(data);
          }
      }); //End ajax
    } //End if
  }); //End regex function

      event.preventDefault();

    }); //End focusin
}); //End function

以下是表单设置:

<label for="startDate">StartDate</label>
<input type="text" name="startDate" id="startDate" />
<label for="endDate">EndDate</label>
<input type="text" name="endDate" id="endDate" />
Result: <span id="result"> </span>

我无法将结果显示在范围内。我错过了什么?

1 个答案:

答案 0 :(得分:1)

我认为没有关注跨度的事件。我想你的意思是

$('input[name="endDate"]').blur(function(event) {

但是没有任何地方可以模糊出endDate。您需要定义“输入结束日期”的含义。用户按回车键?或者标签按钮和某处模糊?或者您可以使用keyup检查当前结束日期的值

$('input[name="endDate"]').keyup(function(event) {

无论如何你应该删除focusein部分,你只需将事物绑定到事件,这与enddate输入一起发生,你可以在文档就绪后立即绑定它。

相关问题