Question

我在表单中创建了eway paynow按钮。

    <form action="?" method="POST">
  Name: <input type="text" name="customer_name" value="" />

  <script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
   class="eway-paynow-button" 
  data-publicapikey="epk-6AEE4269-0010-4415-A327-8064928AEFD0"
  data-amount="0"
  data-currency="AUD" 
  data-allowedit="true"
  data-resulturl="http://example.com/responseMsg.php">
</script>

</form>

我需要在加载eway付款之前检查customer_name字段是否为空形成。如果customer_name字段为空，请不要加载eway payment表单。我这样做吗？我可以运行javascript来验证此表单吗？

Answer 1

“立即付款”按钮在打开付款表单之前不会提供挂钩来运行功能，此时也不会使用事件监听器。这里的解决方案是：

捕获原始的onclick处理程序
添加一个执行验证的新事件监听器，如果成功则调用原始onclick。

我坚持使用纯JS，jQuery允许更清晰的实现： - ）

另请注意，我已删除data-resulturl属性并将网址移至表单标记，否则该窗口可能只是重定向而不提交。

<form action="http://example.com/responseMsg.php" method="POST">
  Name: <input type="text" name="customer_name" value="" />

  <script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
   class="eway-paynow-button" 
  data-publicapikey="epk-6AEE4269-0010-4415-A327-8064928AEFD0"
  data-amount="10"
  data-currency="AUD" 
  data-allowedit="true"
  data-submitform="yes">
</script>

</form>

<script>

  window.onload = function() {
    // Find the eWAY Pay Now button - note getElementsByClassName is IE9+
    var ewayButton = document.getElementsByClassName("eway-button")[0];

    // save and remove old onclick
    var oldeWAYclick = ewayButton.onclick;
    ewayButton.onclick = null;

    // Add new listener with validation
    ewayButton.addEventListener("click", function(e){ 
        // Stop form from submitting itself
        e.preventDefault();

        // Example validation
        var name = document.forms[0]["customer_name"].value;
        if (name == null || name == "") {
            alert("Please complete all fields");
            return;
        }   
        // Display payment form
        oldeWAYclick();
    }, false);
  };

</script>

单击eWAY paynow按钮

1 个答案: