动态生成的表单无法正常工作

Posted 2023-03-05

【中文标题】动态生成的表单无法正常工作

【英文标题】：dynamically generated form not working properly

【发布时间】：2012-12-20 13:56:29

【问题描述】：

我有这个 ajax 函数，我动态地填充来自数据库的元素列表。它们中的每一个都作为显示图片和名称。它有一个带有变量的隐藏字段，该变量通过 POST 在其他页面上被捕获，并显示图像和一些信息。

问题是有时隐藏字段中的ID参数似乎没有发送。表单已发送，但它似乎没有捕捉到隐藏变量，显示的是随机图像和信息，而不是我最初点击的那个。

这是我的代码：

function absurdSearch(textoBuscar)
    $.ajax(
        type    : "POST",
        url     : "service.php",
        dataType: "json",
        data    : 
            action:"absurdSearch",
            absurdText: textoBuscar
        ,
        success:function(data)
            $("#testDiv").empty();
            var i;
            for (i = 0; i < data.data.length; ++i) 

                console.log(data);
                var divCreator ='';
                var str='projectsearch' + i;

                data.data[i].projectCategory

                var ProjectTypeIdName = data.data[i].projectCategory;
                switch (ProjectTypeIdName) 
                    case "1":
                        var urlFormSend='proyectos_arq.php';
                        var projectTypeName ='Proyectos <br/>Arquitectónicos';
                        break;
                    case "6":
                        var urlFormSend='proyectos_urb.php';
                        var projectTypeName ='Proyectos <br/>Urbanos';
                        break;
                    case "7":
                        var urlFormSend='arquit_pai.php';
                        var projectTypeName ='Arquitectura del <br/>Paisaje';
                        break;
                    case "8":
                        var urlFormSend='arquit_int.php';
                        var projectTypeName ='Arquitectura de <br/>Interiores';
                        break;
                    case "10":
                        var urlFormSend='arquit_trans.php';
                        var projectTypeName ='Arquitectura del <br/>Transporte';
                        break;
                

                divCreator+='<div id="grupo'+i+' class="typeface-js" style="font-family:GreyscaleBasic"">';
                divCreator+='<div class="tipo-pro">';
                divCreator+='<div id="tipo_arq" class="tipo">'+projectTypeName+'</div>';
                divCreator+='<div id="tipo_arq_abajo" class="abajo"></div>';
                divCreator+='</div>';
                divCreator+='<div>';
                divCreator+='<div id="tipo_'+i+'"></div>';
                divCreator+='<div id="tipo_arq_abajo'+i+'"></div>';
                divCreator+='</div>';
                divCreator+='<div id="fotoproyectos'+i+'" ><img src="' + data.data[i].path + '"  ></div>';
                divCreator+='<div id="nombreproyectos'+i+'" ><form method="post" name="projectsearch'+i+'" id="projectsearch'+ i +'" action="'+urlFormSend+'">';
                divCreator+='<span style="cursor: pointer;" onclick="document.getElementById(\'projectsearch'+i+'\').submit()">"'+ data.data[i].projectName +'"</span>'
                divCreator+='<input name="project_id" type="hidden" id="project_id" value="' + data.data[i].projectId + '">';
                divCreator+='</form></div>';
                divCreator+='</div>';
                divCreator+='</div><br><br>';

                $("#testDiv").append(divCreator);

            ;
        
    )
;

这里是实际捕获 POST 变量的代码。

<?php
require('server/php/methods.php');
$main = new main();
$project_id = $_POST['project_id'];
if (empty($project_id)) 
    list($name, $description, $path, $_images, $next_project_id, $previous_project_id = $main->projectRandom(7);
    $images = json_encode($_images);

else 
    list($name, $description, $path, $_images, $next_project_id, $previous_project_id) = $main->projectNumber(7, $project_id);
    $images = json_encode($_images);

当我检查 firebug 时，一切似乎都正常，每个隐藏字段都分配了参数 (project_id)。但有时它确实有效，有时则无效。

萤火虫：

任何帮助将不胜感激

【问题讨论】：

提示： 在你的脚本中，不要同时做两件事，最好检查请求的输入是动作的预期输入。这将使您能够从随机动作转移到不同的动作。在这里你一次做两件事，当变量为空时，你选择一个随机图像，这似乎是你描述的错误，但它是编程的功能。

我还建议让 PHP 端构建实际的 html。在 php 文件（或嵌入了 php 的 html 文件）中阅读和编辑 html 比在 javascript 中阅读和编辑要容易得多。生成复杂元素（例如具有许多子元素的表单）注入到 dom 会导致比以往更多的错误。

是的，但实际上需要随机函数，因为客户希望每次加载页面时都会对随机图像/项目收费。抱歉，gdoron，我如何接受答案？

Dan，您的意思是将其构建为 ajax 响应而不是成功事件？

【参考方案1】：

您可以尝试使用 HTML 5 数据属性。

这是一篇解释它们的文章：http://ejohn.org/blog/html-5-data-attributes/

基本上只是添加一些类似的东西

data-projectID="' + data.data[i].projectId + '"

然后在您的 php 脚本中查找该属性。