如何通过按钮调用ajax功能

时间:2015-10-31 07:55:25

标签: jquery wordpress

我正在尝试将ajax发布到wordpress并且我撞到了一堵砖墙我已经得到了这么多,谢谢你们很棒的家伙但是我不需要我的表格如何调用这个目前它仍然说文件未找到我替换了真正的文件带有虚拟文字的名称,用于邮寄安全。

这是我的表格,我需要的是什么,我更换我的动作方法和提交按钮,以便能够在functions.php中调用此函数

我不需要如何通过我的表格上的一个按钮调用它来点击它onclick

<form class="form-horizontal"  class="contact"   id="redemmpointsForm" >
            <div class="form-group">
            <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
                <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
                  <input type="number"  valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />                  
                   <label class="control-label col-md-4" for="Comments">Comments?</label>
                <input type="text" name="comments" />

        </div>
        <div class="form-group">
                <div class="col-md-6">

                        <input type="submit" class="btn btn-success" id="submit">submit</button>
      <a href="#" class="btn" data-dismiss="modal">Close</a>

                </div>
            </div>

        </form>

add_action( 'wp_enqueue_scripts', 'load_these_scripts' );
function load_these_scripts()   {
      wp_register_script( 'your_script', 'URI_OF_JS_THAT_MAKES_THE_AJAX_CALLS/scripts.js', false, false, true );
      wp_localize_script( 'my_ajax_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));  
}

然后在你的scripts.js中你需要像这样进行AJAX调用: 使用此而不是&#34;数据:&#34;

$("#send_btn").click(function () {
    var formdata = $('form.contact').serialize();
    var allData = {
       action: 'php_function_name',
       data: formdata
    }

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : allData,
         success: function(response) {
            if(response.type == "success") {
               // Do something
            }
            else {
               // Do something else
            }
         }
      });
});

action: "php_function_name"实际上告诉WP要调用哪个函数,但是你还需要注册。这样做,回到你的functions.php(或插件文件):

add_action("wp_ajax_php_function_name", "php_function_name");
add_action("wp_ajax_nopriv_php_function_name", "php_function_name");
function php_function_name() {

   // Some stuff here
   global $wpdb;
   $result = $wpdb->get_results( /* SQL code goes here */ );
   // Do something with $result
}

确保使用&#34; wp_ajax&#34;注册该功能。 &安培; &#34; wp_ajax_norpiv&#34;否则它只适用于登录用户。

干杯

编辑我想说我的表单在模态中可能没找到提交按钮?

<div id="thanks" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
      <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Redeem Points</h4>
        </div>
        <div class="modal-body">


<form class="form-horizontal"  class="contact"   id="redemmpointsForm" >
            <div class="form-group">
            <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
                <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
                  <input type="number"  valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />                  
                   <label class="control-label col-md-4" for="Comments">Comments?</label>
                <input type="text" name="comments" />

        </div>
        <div class="form-group">
                <div class="col-md-6">

                        <input type="button" class="btn btn-success" id="send_btn">Submit</button>
      <a href="#" class="btn" data-dismiss="modal">Close</a>

                </div>
            </div>
</form>



        </div><!-- End of Modal body -->
        </div><!-- End of Modal content -->
        </div><!-- End of Modal dialog -->
    </div><!-- End of Modal -->

编辑以解释我有多远

好的所以现在我已经到了这么远,第一行的消息框就开始了。所以它收集我的表单数据,但是它忽略了数字列的某些原因我需要这个帖子来调用wordpress functions.php中的函数

wp_localize_script( 'inkthemes', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
add_action("wp_ajax_redeempoints", "redeempoints");
add_action("wp_ajax_nopriv_redeempoints", "redeempoints");
function redeempoints() {

 global $wpdb;

 wp_mail( 'davidbuckleyni@gmail.com', 'The subject', 'The message' ); 
}

Jquery脚本

jQuery(document).ready(function(){
jQuery("#send_btn").click(function(){

var datastring = $("#redemmpointsForm").serialize();

 var allData = {
       action: 'redeempoints',
       data: datastring
    }
      alert(datastring); // first message box fires

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : allData,
         success: function(response) {
            if(response.type == "success") {
              alert('Call Ajax !!');  // this one does not
            }
            else {
               // Do something else
            }
         }
      });
});
 }); //Modal event Ends

1 个答案:

答案 0 :(得分:0)

将输入类型更改为按钮,并将id添加为js selecter send_btn

&#13;
&#13;
$("#send_btn").click(function () {
  alert('Call Ajax !!');  // for Your info
  
  var points = $('#points').val();
  var comments = $('#comments').val();
  
   alert(points+'  '+comments); // for Your info 
  
  var allData = {
       action: 'php_function_name',
       points: points,
       points:points
    }
   

      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : allData,
         success: function(response) {
            if(response.type == "success") {
               // Do something
            }
            else {
               // Do something else
            }
         }
      });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal"  class="contact"   id="redemmpointsForm" >
            <div class="form-group">
            <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
                <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
                  <input type="number" id="points"  valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />                  
                   <label class="control-label col-md-4" for="Comments">Comments?</label>
                <input type="text" name="comments" id="comments" />

        </div>
        <div class="form-group">
                <div class="col-md-6">

                        <input type="button" class="btn btn-success" id="send_btn" value="submit"></button>
      <a href="#" class="btn" data-dismiss="modal">Close</a>

                </div>
            </div>
</form>
&#13;
&#13;
&#13;

相关问题