Question

我正在做一个MVC应用程序，我需要使用一个按钮来验证两个字段。

目前，我有两个按钮和两个javascript函数，其中一个单独验证每个字段。

功能1：

<button onclick="callApi()" id="userButton">@Resources.Resources.ButtonFind</button>
<div id="user">
<p>@Resources.Resources.UserName:
</p>
</div>
<script type="text/javascript"  id="select_user">
function callApi() {
    var userName = $('#search_employee').val();
    /* call the api */
    $.ajax('OneUserInfo', {
        data: {
            strUserName: userName
        },
        success: function (data, textStatus, jqXHR) {
            //this will happen on success of request
            $('#DataUser').html(data);
        },
        error: function () {
            console.log("error handler when ajax request fails... ");
        },
        dataType: "html",
        cache: false,   //important! especially for IE...
        async: false  //set to false if you want th UI to wait for the ajax call;
    });
}

function GO() {
    location.href = '/Home/NewspaperStatus?name=value';
}

</script>

功能2：

<div id="datePicker">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</div>
<div id="date">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>@Resources.Resources.Date: <input type="text" id="datepicker"></p>
<script name="select_date" id="select_date">

  $(function () {
      intDate = Date;
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
<button class="action" type="button" id="dateButton">@Resources.Resources.ButtonFind</button>
<br>

如何编写代码以便在同一按钮上验证两个字段？

提前致谢。

修改

谢谢你们。因此，如果我理解正确，我必须做这样的事情：

 <div id="date">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <p>@Resources.Resources.Date: <input type="text" id="datepicker"></p>
 <script name="select_date" id="select_date">

  $(function getInfo() {
      intDate = Date;
      var userName = $('#search_employee').val();
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strUserName: userName,
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
<button onclick="getInfo()" id="userButton">@Resources.Resources.ButtonFind</button>
<br>

无论如何我应该做错了，因为我无法执行代码。 “功能未定义”错误。代码上有些东西不对吗？谢谢！

Answer 1

如何通过一个按钮将其更改为只有一个功能？

你可以通过在另一个

中调用一个函数来做到这一点

function callApi() {
   $.ajax({
   success:function(response){
      //  Here you can call the second function 
    }
  })
}

我可以将其更改为只有一个功能

第二个函数有一个单独的ajax调用，你可以使用jquery when在一个函数中链接两个ajax调用。此外，您必须将datepicker相关代码放在第一个ajax的成功或执行任何ajax调用之前的适当位置

Answer 2

有几种方法可以做到这一点。例如，您可以组合/扩展您的数据属性，并从服务器返回哪个属性无效并在ajax中处理该属性。但是如果你不能/不想合并，你也可以使用Jquery promise功能api.jquery.com/promise。通过这种方式，您可以更好地控制上次呼叫成功/失败等时的下一步操作。

按下按钮以验证多个字段

2 个答案: