带有两个提交按钮的Wordpress Ajax表单

Question

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

Answer 1

$(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;
    });
});

Answer 2

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
              }
          });
      });
  });