Wordpress使用AJAX提交表单

我创建了一个Wordpress插件，以允许我的客户创建具有rsvp功能并为事件付费的事件。我对某些代码需要放置的位置以及如何将表单提交到驻留在插件文件夹功能文件中的函数感到困惑。Wordpress使用AJAX提交表单

目前它返回一个空白警报。

我展示一个单一事件的页面上这种形式：然后

<div id="rsvpContent"> 
    <form id="Attendevent" action=""> 
    <input id="attend" name="attend" type="checkbox" value="yes" /><label for="attent">Yes, I plan to attend.</label> 
</form>

，我放入一般header.php文件这样的：

$("#attend").click(function(){ 
    var form = $("#Attendevent").serialize(); 

    $.ajax({ 
     type:'POST', 
     data:{"action":"Attending","data": form }, 
     url: "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php", 
     beforeSend: function(){ 
     alert(form); 
     }, 
     success: function(data) { 
      alert(data); 
     } 

    }); 

});

然后，我把此功能进入插件文件夹内的主要功能页面：

function eventAttent() { 
$wpdb->show_errors(); 
      if($_POST['attend'] == 'yes') { 
       $wpdb->insert('wp_event_attendants', 
       array('event_id' => get_the_ID(),'user_id' => $current_user->ID)); 
echo $wpdb->print_error(); 
       } 
      } 


add_action('wp_ajax_Attending', 'eventAttend'); 
add_action('wp_ajax_nopriv_Attending', 'eventAttend');

当用户单击“参加”复选框时，如何调用此函数？

来源

2013-03-07 MG1

尝试使用此代码。这是我测试的代码。与我一起工作良好..但它不会处理文件上传。

HTML

<form id="form_name" name="form_name" > 
<span id='errfrmMsg' style='margin:0 auto;'></span> 
    //form attributes just as input boxe. 
    <input type="hidden" name="action" value="anyName" /> 
    <input id="submit_button" onclick="submit_form();" type="button" value="Send" /> 
</form>

Ĵ查询

function submit_form() 
{ 
    jQuery.post(the_ajax_anyName.ajaxurl_anyName, 
    jQuery("#form_name").serialize(), 
    function(response_from_the_action_function){ 
       jQuery("#errfrmMsg").html(response_from_the_action_function).css({"display":"block"}); 
     } 
    ); 
}

PHP代码中的functions.php

wp_register_script("ajax-anyName", get_bloginfo('template_directory')."/js/custom_js.js", array("jquery")); 
wp_enqueue_script('ajax-anyName'); 
wp_localize_script("ajax-anyName","the_ajax_anyName", array("ajaxurl_anyName" => admin_url("admin-ajax.php"))); 
// add actions 
add_action("wp_ajax_anyName", "ajax_action_anyName"); 
add_action("wp_ajax_nopriv_anyName", "ajax_action_anyName"); 

function ajax_action_anyName(){ 
    //Form processing code in PHP 


}

来源

2013-03-22 05:53:46

这link是一个非常好的源代码，可以让你的主题变得更加完美。

将此代码放入您的子主题的functions.php中。

// enqueue your custom js  
function my_js_method() { 
    // for jquery ui 
     wp_enqueue_style('jqueryUI_style', get_stylesheet_directory_uri() . '/customCSS/jquery-ui.css'); 
     wp_enqueue_script(
      'handleFormAjax-script', 
      get_stylesheet_directory_uri() . '/handleFormAjax.js', 
      array('jquery') 
     ); 
    // add the appropriate hook 
    add_action('wp_enqueue_scripts', 'my_scripts_method'); 


    // declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php) 
    wp_localize_script('handleFormAjax-script', 'MyAjax', array('ajaxurl' => admin_url('admin-ajax.php'))); 
    } 


    // AJAX handler snippet 
    function myHandlerMethod(){ 
     if (is_admin()) 
    echo "woow working like a charm"; 
    die(); 
    } 
    //add the hooks for your handler function 
    add_action('wp_ajax_myHandlerMethod', 'myHandlerMethod'); 
    // for users who are not logged in 
    add_action('wp_ajax_nopriv_myHandlerMethod', 'myHandlerMethod');

除此之外，您的窗体应该看起来像这样。

<form id="assetForm" action= "/wp-admin/admin-ajax.php" method="post"> 
    <input type="hidden" name="action" value="myFunction"/> 
    <button id="sbmBtn">SUBMIT </button> 
</form>

，最后，你js函数应该解决的处理函数，你在functions.php的定义

var data = jQuery("#myForm :input").serializeArray(); 

    jQuery.post(jQuery("#myForm").attr("action"),data, function(info) { 
     // success code ; 
       });

来源

2013-09-16 16:47:49 user1148099

Wordpress使用AJAX提交表单

回答

相关问题