javascript - 无法让我看似简单的 js 提交表单功能在 wordpress 上工作

问题描述

我一直在网上关注一些关于如何做到这一点的教程，但我不知道我在哪里错过了标记......当我按下提交按钮时，它除了重新加载页面之外什么也没做。尽管在 chrome 的控制台中加载我的 js 时我没有看到任何错误，所以我认为这可能是我的问题。但仍然不确定。

基本上，人们可以billing_address在他们的仪表板上提供一个新的，并且与和相关billing address联。usersku

这是我的表单，包含三个项目（用户、sku、地址）；

$loop = new WP_Query( $args );
echo '<form id="addressform" method = "post">';
echo '<br><select id="sku" name="sku" required >';
    echo '<option value="empty">-- Select Coin--</option>';
while ( $loop->have_posts() ) : $loop->the_post();
  global $product;
    echo '<option value=' . $product->get_sku() . '>' . $product->get_sku() . ' </option>';
  endwhile;
echo '</select>';
echo '<input type="text" placeholder="Insert new address here" id="address" name="address" size="40" required />';
echo '<input type="hidden" id="userid" name="userid" value="' . $userid . '">'; 
echo '<input type="submit" id="submit" name="submit" value="Submit">';
echo '</form>';
echo '<div class="alert alert-danger display-error" style="display: none"></div>';

这是我的javascript文件，称为address_submit.js

jQuery(document).ready(function($) {

  jQuery('form#addressform').on('submit', function(e){{
    jQuery.ajax({   
        type: 'POST',
        dataType: 'json',
        url: submitaddress_ajax_obj.ajaxurl,
        data: {
        'userid' : jQuery('form#addressform #userid').val(),
        'sku' : jQuery('form#addressform #sku').val(),
        'address' : jQuery('form#addressform #address').val(),
        'action' : 'submitaddress'
        },
        success : function(data){
            if (data.code == "200"){
                alert("Success: " +data.msg);
            } else {
                jQuery(".display-error").html("<ul>"+data.msg+"</ul>");
                jQuery(".display-error").css("display","block");
            }
        }
    });
    e.preventDefault();

  });
});

最后，我知道我需要将它添加到我functions.php的子主题中，所以我创建了第二个文件（address_verifier.php）并将其包含在我的主题中functions.php：

require_once( __DIR__ . '/include/address_verifier.php');

最后，这是address_verifier.php

function submitaddress_ajax_enqueue() {
    // Enqueue javascript on the frontend.
  wp_register_script('submitaddress-ajax-script', get_stylesheet_directory_uri() . '/js/address_submit.js', array('jquery') ); 
    wp_enqueue_script('submitaddress-ajax-script');
    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script('submitaddress-ajax-script','submitaddress_ajax_obj',array( 'ajaxurl' => admin_url( 'admin-ajax.php' ),'loadingmessage' => __('Submitting Address...') ));
}
add_action( 'wp_enqueue_scripts', 'submitaddress_ajax_enqueue' );
add_action( 'wp_ajax_submitaddress', 'submitaddress' );
add_action( 'wp_ajax_nopriv_submitaddress', 'submitaddress' );
function submitaddress() {
    global $woocommerce,$wpdb,$product;
    $errorMSG = [];
    //check if data is present
    $user = $_POST['userid'];
    //check sku selected
       if (empty($_POST['sku'])) {
           $errorMSG .= "<li>Please select a product.</li>";
       } else {
           $sku = $_POST['sku'];
       }
//check address input
       if (empty($_POST['address'])) {
           $errorMSG .= "<li>Please enter an address.</li>";
       } else {
           $address = $_POST['address'];
       }
if(empty($errorMSG)){
       $updateaddress = $wpdb->query( $wpdb->prepare("REPLACE INTO ".$wpdb->prefix."newaddress (user, sku, address) VALUES (%d, %s, %s)", $user, $sku, $address ) );
            $msg = "<strong> <i class='fa fa-check' aria-hidden='true'></i> Your <font color='red'>" . $sku . " </font>address has been updated. </strong>";
            echo json_encode(['code'=>200, 'msg'=>$msg]);
            die;
         } 
echo json_encode(['code'=>404, 'msg'=>$errorMSG]);
die();
}

标签： javascriptphpwordpress

javascript - 无法让我看似简单的 js 提交表单功能在 wordpress 上工作

问题描述

解决方案

推荐阅读