Question

我有一个HTML表单，其中至少包含两个表单，每个表单都包含类＆＃39; myform＆＃39;应用。每个输入按钮都有不同的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>

这是页面底部的脚本。我试过＆＃39; .closest＆＃39;和＆＃39; .parent＆＃39;但似乎没什么用。我也试过将这些添加到＆＃39; $。post＆＃39;部分，但随后数据被发送到数据库，但它是空的字段。困惑...

<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

使用该事件从按钮获取表单。定义＆＃34; e＆＃34;在你的函数中，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;

Answer 2

您应该可以使用$(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);
        }
    );  
});

Answer 3

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

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

或者，如果您不想设置id，则可以使用:nth-child，例如：

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

Answer 4

只需将另一个类添加到

等表单中

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

现在，在您的脚本中，您已经将按钮ID设置为＆＃34; 7＆＃34;或＆＃34; 8＆＃34;。使用此＆＃34; myID＆＃34; 来选择表单。

将此添加到您的脚本中。

$('.myform').each(function( index ) {
              if($(this).hasClass(myID)){
                  $(this).submit(function(){
                        return false;
                    });
              }
});

它只是迭代你的所有形式有＆＃34; myform＆＃34;作为班级并检查他们是否也有班级作为＆＃34; 7＆＃34;或＆＃34; 8＆＃34;从按下的按钮中取出。

https://api.jquery.com/each/

https://api.jquery.com/hasclass/

Answer 5

如果您想获取当前形式的按钮，可以使用.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);
                }
            );
        });

在javascript

5 个答案: