javascript - 在 javascript 中选择正确的形式

Question

我有一个 HTML 表单，其中至少有两个表单，每个表单都应用了“myform”类。每个输入按钮都有不同的 ID，一旦单击，就会将数据发送到数据库。问题是 javascript，它停止刷新并控制按钮状态没有选择正确的表单 - 它总是发送最接近脚本的表单的详细信息...这里是 html 表单。

<div class="booking_box">
<form method="post" class='myform'>
<button class="button" id='b2' name = "8">Book room 8</button>
    <input type="hidden" name="salutation" value="<?php echo $_SESSION["salutation"]?>">
    <input type="hidden" name="firstname" value="<?php echo $_SESSION["firstname"]?>">
    <input type="hidden" name="room" value="8">
    <input type="hidden" name="period" value="1">
</form>
</div>

<div class="booking_box">
<form method="post" class='myform'>
<button class="button" id='b3' name = "7">Book room 7</button>
    <input type="hidden" name="salutation" value="<?php echo $_SESSION["salutation"]?>">
    <input type="hidden" name="firstname" value="<?php echo $_SESSION["firstname"]?>">
    <input type="hidden" name="room" value="7">
    <input type="hidden" name="period" value="1">
</form>
</div>

这是页面底部的脚本。我尝试过“.closest”和“.parent”，但似乎没有任何效果。我还尝试将这些添加到“$.post”部分，但随后数据被发送到数据库，但它是空字段。困惑...

<script>
$("button").click(function() {
    var myID = ($(this).attr('id'));
    var theName = ($(this).attr('name'));
    var isAdd = $("#" + myID).text();

    if (isAdd == "Book room " + theName){
        $('#' + myID).text(isAdd ? 'Cancel room' + theName : 'Book room ' + theName);
        $('#' + myID).closest('.myform').attr('action', isAdd ? 'bookRoom.php' : 'update.php');
    } else {
        $('#' + myID).text(isAdd ? 'Book room ' + theName : 'Cancel room ' . theName);
        $('#' + myID).closest('.myform').attr('action', isAdd ? 'update.php' : 'bookRoom.php');

    }

    $('.myform').submit(function(){
        return false;
    });

    $.post(
        $('.myform').attr('action'),
        $('.myform :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );  
});
</script>

一如既往，我们将不胜感激任何帮助!

Answer 1

您应该能够使用 $(this).closest(".myform") 获取应提交的表单。

也没有必要使用 $("#"+ myID)，因为它与 $(this) 相同。

阻止正常提交的提交处理程序不应位于点击处理程序内。

$('.myform').submit(function(){
    return false;
});

$("button").click(function() {
    var theName = ($(this).attr('name'));
    var isAdd = $(this).text();
    var form = $(this).closest(".myform");

    if (isAdd == "Book room " + theName){
        $(this).text(isAdd ? 'Cancel room' + theName : 'Book room ' + theName);
        form.attr('action', isAdd ? 'bookRoom.php' : 'update.php');
    } else {
        $(this).text(isAdd ? 'Book room ' + theName : 'Cancel room ' . theName);
        form.attr('action', isAdd ? 'update.php' : 'bookRoom.php');
    }

    $.post(
        form.attr('action'),
        form.serialize(),
        function(result){
            $('#result').html(result);
        }
    );  
});