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提交表單

回答

相關問題