Question

实际情况：

用户点击按钮'Jana Laporan'，（如果输入字段留空）
javascript函数执行，但返回另一个VIEW。

假设，一旦用户点击按钮并左侧清空其输入字段，javascript函数将保持不变VIEW。

以下是我的Javascript函数：

function validateInput() {
 var strStartDate = document.ReportSearchForm.StartDate.value;
 var strEndDate = document.ReportSearchForm.EndDate.value;
 var strDptId = document.ReportSearchForm.searchDptId.value;

  if (strStartDate == "" && strEndDate == "") {
     alert("Tarikh (Mula) dan Tarikh (Akhir) dikehendaki.");
     document.ReportSearchForm.strStartDate.focus();
     return false;
  }
  else if ((strStartDate != "" && strEndDate == "") || (strStartDate == "" && strEndDate != "")) {
      alert("Tarikh (Mula) atau Tarikh (Akhir) dikehendaki.");
      return false;
  }
  else if (strDptId == "") {
      alert("Jawatankuasa dikehendaki.");
      return false;
  } }

这是我的按钮形式：

<a id="transboxShow" class="fancybox" data-fancybox-type="iframe" href="{{ URL::to('laporanjumlahmesyuaratresult/sujk?t=2')}}">{{ Form::button('Jana Laporan', array('name'=>'btnAdd', 'onclick'=>'return validateInput(); return false;','class'=>'NormalTextCenter', 'data-fancybox-type'=>'iframe') ) }}</a>

如何通过fancybox popup执行javascript函数，在同一个VIEW中验证我的输入字段而不转到下一个url / VIEW？

Answer 1

你可以在锚标签的onclick属性上调用你的javascript函数，如下所示。

<a id="transboxShow" onclick="return validateInput()" class="fancybox" data-fancybox-type="iframe" href="{{ URL::to('laporanjumlahmesyuaratresult/sujk?t=2')}}">{{ Form::button('Jana Laporan', array('name'=>'btnAdd', 'onclick'=>'return validateInput(); return false;','class'=>'NormalTextCenter', 'data-fancybox-type'=>'iframe') ) }}</a>

这样做，当你点击锚标签（或其中的按钮）时，它将首先执行你的'validateInput'函数，如果函数返回false，它将不会继续正常的链接动作，否则它将转到你指定的链接。

另一种方法可以阻止默认链接操作，然后更改“validateInput”函数内的代码，以重定向到url（当前指向的锚标记），如果它验证为true。

要禁用锚标记：

$("#transboxShow").off('click').on('click', function(e) {
    e.preventDefault();
)}

并且您更改的功能将如下所示：

function validateInput(newLocation) {
 var strStartDate = document.ReportSearchForm.StartDate.value;
 var strEndDate = document.ReportSearchForm.EndDate.value;
 var strDptId = document.ReportSearchForm.searchDptId.value;

  if (strStartDate == "" && strEndDate == "") {
     alert("Tarikh (Mula) dan Tarikh (Akhir) dikehendaki.");
     document.ReportSearchForm.strStartDate.focus();
     return false;
  }
  else if ((strStartDate != "" && strEndDate == "") || (strStartDate == "" && strEndDate != "")) {
      alert("Tarikh (Mula) atau Tarikh (Akhir) dikehendaki.");
      return false;
  }
  else if (strDptId == "") {
      alert("Jawatankuasa dikehendaki.");
      return false;
  } 
  //if all validation passed, redirect to your desired location
   window.location = newLocation;
}

然后更改'validateInput'函数以使用新url的参数进行调用，如下所示：

<a id="transboxShow" class="fancybox" data-fancybox-type="iframe" href="#">
{{ Form::button('Jana Laporan', array('name'=>'btnAdd', 'onclick'=>'return validateInput(URL::to('laporanjumlahmesyuaratresult/sujk?t=2')); return false;','class'=>'NormalTextCenter', 'data-fancybox-type'=>'iframe') ) }}
</a>

Answer 2

您的按钮位于<a>标记内，这就是为什么当您点击该按钮时，它会转到您在href属性上提供的网址。您可以在超链接的onclick属性上移动验证。

<a id="transboxShow" class="fancybox" data-fancybox-type="iframe" href="{{ URL::to('laporanjumlahmesyuaratresult/sujk?t=2')}}" onclick="return validateInput();" >
    {{ Form::button('Jana Laporan', array('name'=>'btnAdd', 'class'=>'NormalTextCenter', 'data-fancybox-type'=>'iframe') ) }}
</a>

或者你可以完全删除按钮。我不确定你为什么在<a>标签内有一个按钮。

如何在Laravel中通过URL在href标签上执行javascript函数

2 个答案: