页面上有多个表单，Ajax 在错误的表单上显示错误

Question

我在同一页面上有多个表单。所有表单都使用 Ajax 将数据发送到 PHP 和相同的类名。我尝试提交表单，它可以工作，但 div.error 显示在第一个表单上。我的意思是当我提交第 5 个表单时，错误将显示在第一个表单上。

<?php 
    $sql = "SELECT * FROM `table` WHERE `datetime` BETWEEN '"$day1" 07:00:00' AND '"$day2" 06:59:59'"; 
    $query = mysql_query($sql);
    while($result=mysql_fetch_assoc($query)){ ?>

    <form method="post" action="process.php" id="<?php echo $result["id"];?>">
             <div id="error"></div>
             <h4>Select</h4><label class="col-xs-5 btn btn-info btn-sm"><input type="radio" name="team" id="team" value="A" required>A</label>
             <label class="col-xs-5 col-xs-offset-2 btn btn-danger btn-sm"><input type="radio" name="team" id="team" value="B" required>B</label>
              Point <input type="input" id="point" name="point" placeholder="Point" size="8">
             <button type="submit" class="btn btn-success login-bt" id="<?php echo $result["id"];?>"><i class="fa fa-sign-in"></i>Submit</button>
              <img id="loading" src="images/ajax-loader.gif" alt="working.."/>
                     </form>
     <?php } ?> 

jQuery 部分

<script type="text/javascript">
$(document).ready(function() {
    $("form").submit(function() {
        hideshow('loading',1);
        error(0);
        var  formID = $(this).attr('id');
        var formDetails = $('#'+formID);
        $.ajax({
            type: "POST",
            url: 'process.php',
            data: formDetails.serialize(),
            dataType: "json",
            success: function(msg){
            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
            hideshow('loading',0);
        }
    });
        return false;
    });
});

function hideshow(el,act)
{
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}
</script>
<style  type="text/css">
        #loading{
            left:10px;
            position:relative;
            top:3px;
            visibility:hidden;
        }
        #error{ 
            margin: 10px 10px 0px;
            padding: 10px 5px;
            border-radius: 5px;
            background-color:#ffebe8;
            border:1px solid #dd3c10;
            padding:7px 3px;
            text-align:center;
            visibility:hidden;
        }
      </style>

PHP部分

<?php
include("include/database.php");
if(empty($_POST['team']) || empty($_POST['point']))
{
    die(msg(0,"Please Fill in the form"));
}
if(empty($_COOKIE['id']) || empty($_COOKIE['email']) || empty($_COOKIE['password']) || empty($_COOKIE['displayname']))
{
    die(msg(0,"Please Login"));
}


// echo msg(1,"/Done.php");
$sql = "INSERT INTO SQL";
$sqlquery = mysql_query($sql) or die(mysql_error());
echo msg(1,"Done");

function msg($status,$txt)
{
    return '{"status":'.$status.',"txt":"'.$txt.'"}';
}

?>

如何在提交的特定表单中显示错误？ 任何帮助将不胜感激。 非常感谢

Answer 1

我已经更改了一些 php 代码并插入更改注释。

$sql = "SELECT * FROM `table` WHERE `datetime` BETWEEN '"$day1" 07:00:00' AND '"$day2" 06:59:59'";
$query = mysql_query($sql);

$cnt = 1; // Add new line

while($result=mysql_fetch_assoc($query)){
?>
<form data-id="<?php echo $cnt; ?>" method="post" action="process.php"> <!-- Changes here. -->
         <div id="error<?php echo $cnt; ?>"></div> <!-- Changes here. -->
         <h4>Select</h4><label class="col-xs-5 btn btn-info btn-sm"><input type="radio" name="team" id="team" value="A" required>A</label>
         <label class="col-xs-5 col-xs-offset-2 btn btn-danger btn-sm"><input type="radio" name="team" id="team" value="B" required>B</label>
          Point <input type="input" id="point" name="point" placeholder="Point" size="8">
         <button type="submit" class="btn btn-success login-bt" id="x"><i class="fa fa-sign-in"></i>Submit</button>
          <img id="loading" src="images/ajax-loader.gif" alt="working.."/>
</form>
<?php
$cnt++; // Add new line
}

这里是js代码。

<script type="text/javascript">
$(document).ready(function() {
    $("form").submit(function() {
        hideshow('loading',1);
        error(0);
        var  formID = $(this).attr('id');
        var formDetails = $('#'+formID);

        var dataid = $(this).attr('data-id'); // New line added.

        $.ajax({
            type: "POST",
            url: 'process.php',
            data: formDetails.serialize(),
            dataType: "json",
            success: function(msg){
            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt, dataid); // Changes here.
            }
            hideshow('loading',0);
        }
    });
        return false;
    });
});

function hideshow(el,act)
{
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}

function error(act,txt, dataid) // Changes here.
{
    hideshow('error',act);
    if(txt) $('#error'+dataid).html(txt); // Changes here.
}
</script>
<style  type="text/css">
        #loading{
            left:10px;
            position:relative;
            top:3px;
            visibility:hidden;
        }
        #error{ 
            margin: 10px 10px 0px;
            padding: 10px 5px;
            border-radius: 5px;
            background-color:#ffebe8;
            border:1px solid #dd3c10;
            padding:7px 3px;
            text-align:center;
            visibility:hidden;
        }
      </style>

Answer 2

首先，ID应该是唯一的，把你的<div id="error"></div>改成<div class="error"></div>

您可以将表单元素传递给错误函数。

else if(parseInt(msg.status)==0){
  error(1,msg.txt,$(this));
}

并改变你的功能错误

function error(act,txt,form)
{
    hideshow('error',act);
    if(txt && form) $(form).find('.error').html(txt);
}

事实上，并非在所有情况下都需要 ID。 $(this) 是在提交功能中引用您的表单。

var  formID = $(this).attr('id');
var formDetails = $('#'+formID);

例如，var form = $(this); 就是您想要的。 您可以将form 传递给任何函数并找到相关的class 或data-attribute