dynamically generated form not working properly

Question

im having this ajax function where i populate a list of elements coming from the database dynamically. Each one of them as a display pic and a name. It has a hidden field with a variable that is being caught on the other page via POST and displays an image and some info with it.

The problem is that sometimes the ID parameter in the hidden field doesnt seem to be sent. the form is sent but it doesnt seem to catch the hidden variable, displaying a random image and info instead of the one that im initially clicking.

here is my code:

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 + '" height="128" width="160"></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);

            };
        }
    })
};

and here is the code that actually catches the POST variable.

<?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);
}

when i check on firebug everything seems to be ok, every hidden field has the parameter (project_id) assigned. But sometimes it does work and sometimes it doesnt.

Firebug:

Any help will be appreciated

Answer 1

You could try using HTML 5 data- Attributes.

Here is an article that explains them: http://ejohn.org/blog/html-5-data-attributes/

Basically just add something along the lines of

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

and then look for that attribute in your php script.