模态表单重复提交相同的数据答案

【问题标题】：Modal form submits same data repeatedly模态表单重复提交相同的数据
【发布时间】：2019-08-08 13:15:56
【问题描述】：

我有一个 dataTable 列表，每行都附有按钮，如下所示：

单击一个按钮，将显示一个模态表单。 modal 是为表中的每一行动态生成的，并且有不同的 ID。

我对其中一个字段进行了一些验证：

    <div class="form-group">
        <label class="control-label required col-sm-2" for="panel_no">{$smarty.const.TXT_VEHICLE_PANEL}</label>
        <div class="col-sm-10">
            <input type="text" name="panel_no" id="panel_no" required value="{if isset($vehicle)}{$vehicle->panel_no}{/if}" onblur="return verifierPanel_No();">&nbsp;
            <span class="alert alert-popup alert-danger alert-duplication" id="duplication_panel">{$smarty.const.DUPLICATION_PANEL}</span>
        </div>
    </div>

下面的 JS 函数执行 ajax 调用来验证重复项：

function verifierPanel_No(){
jQuery("#duplication_panel_no").hide();
var panel_no = jQuery("#panel_no").val();
var vid = jQuery("#vehicle_id").val();
console.log("vid",vid);
console.log("panel",panel_no);
jQuery.ajax({
    type: 'POST',
    url: 'vehicle.php',
    data: 'opt=verifierPanel_no&panel_no=' + panel_no + "&vid=" + vid,
    success: function (data) {
        if(data == 1){
            jQuery("#duplication_panel").show();
            jQuery("#panel_no").val("");
            jQuery("#vehicle_form").submit(function(e){
                e.preventDefault();
            });
        }else{
            jQuery("#vehicle_form").submit(function(e){
                jQuery(this).unbind('submit');
            });
        }
    }
});
}

问题：

列表中的第一次：模态打开，更改字段值，正确的 vid 和 panel_no 形式的代码已发布。

关闭模态框从列表中打开另一个项目，更改字段值，发送与第一次打开的项目相同的 vid 和 panel_no。这对列表中的所有后续项目都是相同的。

为什么发布相同的值？但是，当我执行表单提交时，情况并非如此。

【问题讨论】：

标签： javascript html ajax bootstrap-modal

【解决方案1】：

Id 属性对于 HTML 文档应该是唯一的，从您发布的 html 和 Jquery 代码来看，您的 Id 属性似乎是重复的，因此您没有得到预期的结果。

id应该只有一个元素panel_no和vehicle_id

【讨论】：