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

【问题标题】：Wordpress Ajax Form with two submit buttons带有两个提交按钮的 Wordpress Ajax 表单
【发布时间】：2015-04-30 08:32:29
【问题描述】：

我在 wordpress 中工作，我有一个表单和两个提交按钮。我正在使用ajax，它是wordpress。

按下第一个提交按钮时，我希望回显语句 1，按下提交按钮编号 2 时，我希望回显状态 2。我已按照代码教程进行操作，但是当我从控件按提交时返回空或没有结果，并且在检查中浏览器中没有错误。下面是我的代码。

HTML 表单

<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>

我不是在复制入队代码，而只是在复制实际执行的 php 函数

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

再次请注意，我正在使用 wordpress，因此请指导我，谢谢

【问题讨论】：

您是只从按钮传递值，还是您的实际表单有更多字段？
我的实际表单仅在这些提交按钮上方还有两个文本字段。
你的代码中提到的我的函数 articlevote () 在哪里......因为这个函数没有与你的 ajax 代码一起运行
如果这就是你的意思，你不能从你的jQuery代码中调用你的php函数articlevote()。 PHP 只在页面加载时运行一次，然后它就消失了。除了上面显示的函数外，尚不清楚您在 php 代码中做了什么。我刚刚创建了一个定义该函数的 php pag，然后调用该函数来创建响应。我更新了我创建的示例页面，因此它显示了我使用的 php 代码

标签： php jquery ajax wordpress

【解决方案1】：

这应该可以满足您的需求：

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

【讨论】：

嘿...事实上我想将它与表单一起使用并将这两个按钮用作表单提交按钮。谢谢
它只是刷新页面，控制台中没有错误。
您是否将 html 按钮上的 name 属性更改为 classes？如果您更改了这些，它应该会起作用，请参阅dodsoftware.com/sotests/vote
你的代码中提到的我的函数 articlevote () 在哪里......因为这个函数没有与你的 ajax 代码一起运行
您的代码操作中是否缺少此内容：'articlevote'，

【解决方案2】：

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

【讨论】：

prakash 它只是返回空屏幕并且没有收到任何内容并且控制台没有错误
在哪里使用这个动作：'articlevote'，....文章投票是我的php函数的名称......请指导......你的代码中没有动作属性。跨度>