提交时出现多表单克隆问题.提交第一个输入组

Question

>我有一个脚本，它从MySQL加载数据，然后为每个结果集生成一个div。在每个div 中，我加载多个数据并生成一个表单。我遇到的问题是脚本正在从第一个表单提交数据。

这里的代码：

   <script>
function getitems(){
    $.ajax({
        type: 'POST',
        url: 'userAction.php',
        data: 'action_type=view&'+$("#userForm").serialize(),
        success:function(html){
            $('#userData').html(html);
        }
    });
}
function userAction(type,id){
    id = (typeof id == "undefined")?'':id;
    var statusArr = {add:"added",edit:"updated",delete:"deleted"};
    var userData = '';
    if (type == 'add') {
       userData = $("#addForm").find('#userForm'+id).serialize()+'&action_type='+type;
       }else{
        userData = 'action_type='+type+'&id='+id;
    }
    $.ajax({
        type: 'POST',
        url: 'userAction.php',
        data: userData,
        success:function(msg){
            if(msg == 'ok'){
                getitems();
                $('.form')[0].reset();
            }else{
                alert('Hubo un problema, intentar de nuevo!');
            }
        }
    });
}
</script>

和形式：

 <form class="form" id="userForm<?php echo $r['id']; ?>">
    <div class="form-group col-xs-7">
    <label>Descripcion</label>
    <input type="text" class="form-control" name="item_prt" id="item_prt"/>
       </div>
     <div class="form-group col-xs-3">
         <label>Precio</label>
   <input type="text" class="form-control" name="precio_prt" id="precio_prt"/>
   </div>
    <input type="text" class="form-control" name="idserv_prt" id="idserv_prt" value="<?php echo $orden;?>" />
<a href="javascript:void(0);" class="glyphicon glyphicon-plus" id="addLink" onclick="userAction('add', '<?php echo $r['id']; ?>')"></a>
     </form>

我需要区分每种形式，因为所有形式都是从 mysql 结果动态生成的。因此，如果我提交第一份表格，它可以正常工作，但是当我提交其他表格时，它也提交了第一份表格。

如果我只使用一种形式，一切正常。

谢谢！

Answer 1

您需要添加表单 ID，如下所示：

...
if (type == 'add') {
   userData = $("#addForm").find('#userForm'+id).serialize()+'&action_type='+type;
   // ----------------------------------------^
}else{
   ...

当你调用userAction((函数时，只需添加第二个参数希望是ID：

<a href="javascript:void(0);" class="glyphicon glyphicon-plus" id="addLink" onclick="userAction('add', <?php echo $orden; ?>)"></a>