使用外部函数在没有内联JavaScript的情况下停止表单提交

时间:2018-02-21 15:48:52

标签: javascript

我试图在没有使用外部函数的内联JavaScript的情况下停止表单提交,以便重用此函数。

我不理解onsubmit或addEventListener的这种行为。

这些功能都不起作用。



window.onload = function()
{
    document.getElementById("myForm1").onsubmit = function(){myFunction1()};

    document.getElementById("myForm2").addEventListener("submit", myFunction1);

}

function myFunction3() {
    alert("The form was submitted");
    event.preventDefault();
    return false;
}

function myFunction2() {
    alert("The form was submitted");
    preventDefault();
}

function myFunction1() {
    alert("The form was submitted");
    return false;
}

<form id="myForm1" action="/action_page.php">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit1">
</form>

<form id="myForm2" action="/action_page.php">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit2">
</form>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

Function1未指定event.preventDefault();

将其更改为:

function myFunction1() {
    alert("The form was submitted");
    event.preventDefault();
    return false;
}

window.onload = function()
{
    document.getElementById("myForm1").onsubmit = function(){myFunction1()};

    document.getElementById("myForm2").addEventListener("submit", myFunction1);

}

function myFunction1() {
    alert("The form was submitted");
    event.preventDefault();
    return false;
}
<form id="myForm1" action="/action_page.php">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit1">
</form>

<form id="myForm2" action="/action_page.php">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit2">
</form>

答案 1 :(得分:0)

提交表单时,它将调度class Comfythemes_Woocommerce_Auto_Stock_Restore { function __construct() { add_action( 'woocommerce_order_status_processing_to_cancelled', array( $this, 'restore_order_stock' ), 10, 1 ); add_action( 'woocommerce_order_status_completed_to_cancelled', array( $this, 'restore_order_stock' ), 10, 1 ); add_action( 'woocommerce_order_status_on-hold_to_cancelled', array( $this, 'restore_order_stock' ), 10, 1 ); add_action( 'woocommerce_order_status_processing_to_refunded', array( $this, 'restore_order_stock' ), 10, 1 ); add_action( 'woocommerce_order_status_completed_to_refunded', array( $this, 'restore_order_stock' ), 10, 1 ); add_action( 'woocommerce_order_status_on-hold_to_refunded', array( $this, 'restore_order_stock' ), 10, 1 ); } public function restore_order_stock( $order_id ) { $order = new WC_Order( $order_id ); if ( ! get_option('woocommerce_manage_stock') == 'yes' &amp;&amp; ! sizeof( $order->get_items() ) > 0 ) { return; } foreach ( $order->get_items() as $item ) { if ( $item['product_id'] > 0 ) { $_product = $order->get_product_from_item( $item ); if ( $_product &amp;&amp; $_product->exists() &amp;&amp; $_product->managing_stock() ) { $old_stock = $_product->stock; $qty = apply_filters( 'woocommerce_order_item_quantity', $item['qty'], $this, $item ); $new_quantity = $_product->increase_stock( $qty ); do_action( 'woocommerce_auto_stock_restored', $_product, $item ); $order->add_order_note( sprintf( __( 'Item #%s stock incremented from %s to %s.', 'woocommerce' ), $item['product_id'], $old_stock, $new_quantity) ); $order->send_stock_notifications( $_product, $new_quantity, $item['qty'] ); } } } } } new Comfythemes_Woocommerce_Auto_Stock_Restore(); 事件,该事件将调用侦听该事件的任何事件。事件将接收submit个对象作为其第一个参数。您需要使用此参数来调用Event

preventDefault()

在所有的例子中,你永远不会抓住那个事件,这就是他们都失败的原因。