donglu7286
2015-04-30 08:32
浏览 45
已采纳

Wordpress Ajax表单有两个提交按钮

I am working in wordpress and I have one form and two submit buttons. I am using ajax and it is wordpress.

When first submit button is pressed I want statement 1 to be echoed and when submit button number 2 is pressed I want state 2 be echoed. I have followed the code tutorials but when I press submit from the control returns empty or no result and in inspect there is no error in the browser. Below is my code.

HTML Form

<form id="voteform" action="" method="post">
<input  name='vote' value='two' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'>
<input  name='vote' value='one' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'>
</form>

I am not copying the enqueue code but just the actual php function that executes

function articlevote ()
{

  if ($_POST['vote'] == 'one') {
    echo json_encode("1 vote button is pressed");
    die();
  }
  else if ($_POST['vote'] == 'two') {
    echo json_encode("2 vote button is pressed");
    die();  
  }
}

Ajax and jquery

    jQuery(function ($) {
    $(document).on("click","input[name=vote]", function() {
    var _data= $('#voteform').serialize() + '&vote=' + $(this).val();
    $.ajax({
      type: 'POST',
      url: yes.ajaxurl,
      data:_data,
      success: function(html){
         $("#myresult").html(res);
      }
    });
    return false;
  });
});

Again kindly note that I am using wordpress so kindly guide me in this thanks

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duandingyou3331 2015-04-30 09:02
    已采纳

    This should get you what you need:

    Html:

    <form id="voteform" action="" method="post">
        <input type="text" name="field1" value="field one value"/>
        <input type="text" name="field2" value="field two value"/>
        <input  class='vote' value='two' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'/>
        <input  class='vote' value='one' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'/>
    </form>
    

    jQuery

     jQuery(function($) {
         var yes = {ajaxurl:"mypage.php"}; // created for demo
    
          $('.vote').click(function(e) {
              e.preventDefault(); // stop the normal submit
              var _data = $('#voteform').serialize()+'&vote=' + $(this).val();
              //alert(_data)
              $.ajax({
                  type: 'POST',
                  url: yes.ajaxurl,
                  data: _data,
                  success: function(html) {
                      $("#myresult").html(html); // you had `res` here
                  }
              });
          });
      });
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanletao9487 2015-04-30 08:40
    $(document).ready(function(){
        $('input[value=\'one\'], input[value=\'two\']').on('click', function(){
            var _data= $('#voteform').serialize() + '&vote=' + $(this).val();
            $.ajax({
              type: 'POST',
              url: yes.ajaxurl,
              data:_data,
              success: function(html){
                 $("#myresult").html(res);
              }
            });
            return false;
        });
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题