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

How to execute javascript function on href tags through URL in Laravel

本文关键字：href 标签 执行 函数 javascript URL Laravel      更新时间：2023-09-26

实际场景：

  1. 用户点击按钮"Jana Laporan"，（如果输入字段为空）
  2. 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弹出窗口执行javascript函数，在不进入下一个url/VIEW的情况下验证我在同一个VIEW中的输入字段？

您的按钮位于<a>标记内，这就是为什么当您单击按钮时，它会转到您在href属性上提供的url。您可以移动对超链接的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>标签里面有一个按钮。

您可以在锚标记的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>
相关文章：