Question

我有文本框和＆amp;按钮上的按钮单击我试图打开正在工作的灯箱弹出窗口。问题是首先它需要检查验证如果验证是真的那么只有它应该运行弹出功能。但它没有发生。如果文本框为空，则显示警告，但如果单击“确定”警告框，则会立即打开弹出框。以下是我的代码

JS

function validate() {
  if (document.getElementById("txtSource").value == "") {
    alert("Please Enter Pick up location");
  } else if (document.getElementById("txtDestination").value == "") {
    alert("Please Enter Drop off location");
  } else if (document.getElementById("selectVehicle").value == "Select Vehicle")
    alert("Please Select Vehcile.")
    return true;
}

$(document).ready(function() {
  $("#hidePopup").click(function() {
    $('.booking-popup').css('visibility', 'hidden');
  });

  $("#openPopup").click(function() {
    $('.booking-popup').css('visibility', 'visible');
  });
});

网页代码

<asp:TextBox name="fname" ID="txtSource" onchange="GetRoute()" onblur="GetRoute()" runat="server" CssClass="inners" placeholder="From Area"></asp:TextBox>
<asp:TextBox ID="txtDestination" onchange="GetRoute()" onblur="GetRoute()" runat="server" CssClass="inners" placeholder="To Area"></asp:TextBox>
<p>&nbsp;</p>
<asp:DropDownList ID="selectVehicle" onchange="GetRoute();" AutoPostBack="true" runat="server" CssClass="inners">
  <asp:listitem Value="SelectVehicle" Selected>-- Select Vehicle --</asp:listitem>
  <asp:ListItem Value="20">Tata Ace</asp:ListItem>
  <asp:ListItem Value="25">Bolero Pick Up</asp:ListItem>
  <asp:listitem Value="30">Tata 407</asp:listitem>
  <asp:listitem Value="35">14 Feet</asp:listitem>
</asp:DropDownList>

<p>&nbsp;</p>
<asp:Button ID="openPopup" OnClientClick="validate(); GetRoute();" runat="server" CssClass="book" Text="GET QUICK QUOTE" />

Answer 1

您的按钮：

<asp:Button ID="openPopup" OnClientClick="return validate();" runat="server" CssClass="book" Text="GET QUICK QUOTE" />

你的JS：

function validate() {
            var result = 1;
            if (document.getElementById("txtSource").value == "") {
                result = 0;
                alert("Please Enter Pick up location");
            } 
            else if (document.getElementById("txtDestination").value == ""){
                result = 0;
                alert("Please Enter Drop off location");
            }
            else if (document.getElementById("selectVehicle").value == "Select Vehicle"){
                result = 0;
                alert("Please Select Vehcile.") 
            }
            if (result == 1){
                GetRoute();
                return true;
            }
            else
                return false;
        }

我这样做了，因为这个例子更容易理解。

Answer 2

将false返回无效状态，并将if有效添加到$("#openPopup").click(function () {： -

function validate() {
  if (document.getElementById("txtSource").value == "") {
    alert("Please Enter Pick up location");
    return false;
  } else if (document.getElementById("txtDestination").value == "") {
    alert("Please Enter Drop off location");
    return false;
  } else if (document.getElementById("selectVehicle").value == "Select Vehicle") {
    alert("Please Select Vehcile.")
    return false;
  }

  return true;
}


 $("#openPopup").click(function () {
     if(validate())
       $('.booking-popup').css('visibility', 'visible');
 });

Answer 3

 $("#openPopup").click(function () {
           if (document.getElementById("txtSource").value == "") {
               alert("Please Enter Pick up location");
               return false;
           } else if (document.getElementById("txtDestination").value == "") {
               alert("Please Enter Drop off location");
               return false;
           } else if (document.getElementById("selectVehicle").value == "Select Vehicle") {
               alert("Please Select Vehcile.")
               return false;
           }
           else {
               $('.booking-popup').css('visibility', 'visible');
           }
       });

验证文本框和运行另一个函数javascript

3 个答案: