duan7264
2015-05-26 20:33
浏览 64
已采纳

使用多个按钮和PHP提交jQuery ajax表单

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. It works good. Now I need to do this using Ajax. Above code seems ok, but I cannot get any data(Room01-Room10) from it.

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

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

2条回答 默认 最新

  • doumo3903 2015-05-26 20:50
    已采纳

    Your (last) code is not sending AJAX requests because you attached the handler to the wrong input selector. Your buttons are button elements, not input elements. 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"...>

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanshang9426 2015-05-26 20:51

    The serialize() method does not collect the data from a button element. Take a look to the documentation on this link: 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.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题