在javascript中选择正确的表单

我有一个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”部分，但是数据被发送到DB，但它是空字段。困惑

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

---

一如既往，任何帮助都将不胜感激

使用事件从按钮获取表单。在函数中定义e，e将是事件，e.target是按钮，e.target.form是表单。使用jquery 2.2.4进行测试

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

var frm = e.target.form;

---

使用事件从按钮获取表单。在函数中定义e，e将是事件，e.target是按钮，e.target.form是表单。使用jquery 2.2.4进行测试

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

var frm = e.target.form;

您应该能够使用$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);
        }
    );  
});

您应该能够使用$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);
        }
    );  
});

---

您可以选择设置两个表单的id，例如：

<form method="post" class='myform' id="form1">...</form>
<form method="post" class='myform' id="form2">...</form>

$('.myform:nth-child(1)') //will select the 1st form
$('.myform:nth-child(2)') //will select the 2nd form

---

您可以选择设置两个表单的id，例如：

<form method="post" class='myform' id="form1">...</form>
<form method="post" class='myform' id="form2">...</form>

$('.myform:nth-child(1)') //will select the 1st form
$('.myform:nth-child(2)') //will select the 2nd form

---

只需向表单添加另一个类，如

<div class="booking_box">
<form method="post" class='myform 8'>
<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 7'>
<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>

它只需在以myform为类的所有表单上迭代，并检查它们是否也有从按下的按钮获取的类7或8

---

只需向表单添加另一个类，如

<div class="booking_box">
<form method="post" class='myform 8'>
<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 7'>
<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>

它只需在以myform为类的所有表单上迭代，并检查它们是否也有从按下的按钮获取的类7或8

---

如果您想获取按钮的当前形式，可以使用.closest。当您拥有当前表单时，您可以提取其中输入的所有信息

您可以这样做：

$("button").click(function () {
            var currentForm = $(this).closest("form");
            var actionForm = $(currentForm).attr('action');

            $.post(
                actionFormF,

                $(currentForm).find('input').serializeArray(),
                function (result) {
                    $('#result').html(result);
                }
            );
        });

---

如果您想获取按钮的当前形式，可以使用.closest。当您拥有当前表单时，您可以提取其中输入的所有信息

您可以这样做：

$("button").click(function () {
            var currentForm = $(this).closest("form");
            var actionForm = $(currentForm).attr('action');

            $.post(
                actionFormF,

                $(currentForm).find('input').serializeArray(),
                function (result) {
                    $('#result').html(result);
                }
            );
        });

---

如果你想单独选择每个表单，你会考虑给每个表单提供一个ID= FALM1和ID=第二窗体或一些东西，并且用jQuery选择$Frime1？你不应该在$uton中绑定提交处理程序。这意味着绑定将只应用于您第一次单击后完成的提交。一般来说，将一个事件处理程序绑定到另一个事件处理程序中几乎总是错误的。我如何知道选择哪个表单？理想情况下，我希望在单击表单中的按钮后立即对表单进行标识。而不是button.click handle$'.myform'。Submiti如果希望单独选择每个表单，你会考虑给每个表单一个ID= FALM1和ID=第二窗体或一些东西，并用jQuery选择$Frime1？你不应该在$uton中绑定提交处理程序。这意味着绑定将只应用于您第一次单击后完成的提交。一般来说，将一个事件处理程序绑定到另一个事件处理程序中几乎总是错误的。我如何知道选择哪个表单？理想情况下，我希望在单击表单中的按钮后即可识别表单。而不是button.click handle$'.myform'.submit