提交具有多个按钮和PHP的jQuery ajax表单

Question

here is my problem: 这是我的问题：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head> 
<body>
<form id="roomform" action="room.php" method="POST">
<button name="room" value="Room01">IMG01</button>
<button name="room" value="Room02">IMG02</button>
<button name="room" value="Room03">IMG03</button>
<button name="room" value="Room04">IMG04</button>
<button name="room" value="Room05">IMG05</button>
<button name="room" value="Room06">IMG06</button>
<button name="room" value="Room07">IMG07</button>
<button name="room" value="Room08">IMG08</button>
<button name="room" value="Room09">IMG09</button>
<button name="room" value="Room10">IMG10</button>
</form>
<script type="text/javascript">
    var frm = $('#roomform');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>
</body>
</html>

PHP using $_POST['room'] to get the room name Room01-Room10(Room100 maybe?) and doing something special. PHP使用$ _POST ['room']来获得房间名称Room01-Room10（也许是Room100？），并执行一些特殊的操作。 It works good. 效果很好。 Now I need to do this using Ajax. 现在，我需要使用Ajax进行此操作。 Above code seems ok, but I cannot get any data(Room01-Room10) from it. 上面的代码似乎还可以，但是我无法从中获取任何数据（Room01-Room10）。

then I found this: 然后我发现了这一点：

<form action="/vote/" method="post" class="vote_form">
    <input type="hidden" name="question_id" value="10" />
    <input type="image" src="vote_down.png" class="vote_down" name="submit" value="down" />
    <input type="image" src="vote_up.png" class="vote_up" name="submit" value="up" />
</form>

$(".vote_form").submit(function() { return false; });
$(".vote_up, .vote_down").click(function(event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.serialize() + "&submit="+ $(this).attr("value"), function(data) {
        // do something with response (data)
    });
});

but it seems not suitable to my case, my all buttons with same name="room" for $_POST['room'] and no class. 但是这似乎不适合我的情况，我所有用于$ _POST ['room']且具有相同名称=“ room”且没有类的按钮。 and this not works: 这不起作用：

$(function() {
  $('input[name=room]').click(function(){
    var _data= $('#roomform').serialize() + '&room=' + $(this).val();
    $.ajax({
      type: 'POST',
      url: "room.php?",
      data:_data,
      success: function(html){
         $('div#1').html(html);
      }
    });
    return false;
  });
});

anyone know how to solve this problem? 有人知道如何解决这个问题吗？

Answer 1

Your (last) code is not sending AJAX requests because you attached the handler to the wrong input selector. 您的（最后一个）代码没有发送AJAX请求，因为您将处理程序附加到了错误的输入选择器。 Your buttons are button elements, not input elements. 您的按钮是button元素，而不是input元素。 This should work: 这应该工作：

$('button[name=room]').click(function() { ...

Edit: 编辑：

Your first code isn't working because your buttons are just buttons. 您的第一个代码不起作用，因为您的按钮只是按钮。 You have to add the type attribute to let your form know you're pressing a submit button: <button type="submit"...> 您必须添加type属性，以使您的表单知道您正在按下提交按钮： <button type="submit"...>

Answer 2

The serialize() method does not collect the data from a button element. serialize（）方法不会从按钮元素中收集数据。 Take a look to the documentation on this link: https://api.jquery.com/serialize/ . 查看此链接上的文档： https : //api.jquery.com/serialize/ 。 In your code I would assume that your data object is empty. 在您的代码中，我假设您的数据对象为空。

Also if you post several form controls (serialized) , they should have different name attributes. 另外，如果您发布了多个表单控件（序列化），则它们应具有不同的名称属性。

提交具有多个按钮和PHP的jQuery ajax表单

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-05-26 20:50:58

解决方案2
0 2015-05-26 20:51:35

提交具有多个按钮和PHP的jQuery ajax表单

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-05-26 20:50:58

解决方案2 0 2015-05-26 20:51:35

解决方案1
0 已采纳 2015-05-26 20:50:58

解决方案2
0 2015-05-26 20:51:35