Livínbride :: Crear los campos de un formulario dinámicamente con javascript y procesarlo en php

$(".button").click(function() {

// validate and process form

// first hide any error messages

$('.error').hide();

var nombre = $("input#nombre").val();

if (nombre == "") {

$("label#nombre_error").show();

$("input#nombre").focus();

return false;

}

var posicion = $("select#posicion").val();

if (posicion == "") {

$("label#posicion_error").show();

$("select#posicion").focus();

return false;

}

var gradosal = $("input#gradosal").val();

if (gradosal == "") {

$("label#gradosal_error").show();

$("input#gradosal").focus();

return false;

}

var area = $("select#area").val();

if (area == "") {

$("label#area_error").show();

$("select#area").focus();

return false;

}

var seccion = $("select#seccion").val();

if (seccion == "") {

$("label#seccion_error").show();

$("select#seccion").focus();

return false;

}

var country = $("select#country").val();

if (country == "") {

$("label#country_error").show();

$("select#country").focus();

return false;

}

var city = $("select#city").val();

if (city == "") {

$("label#city_error").show();

$("select#city").focus();

return false;

}

var identificacion = $("input#identificacion").val();

if (identificacion == "") {

$("label#identificacion_error").show();

$("input#identificacion").focus();

return false;

}

var fechaingreso = $("input#fechaingreso").val();

if (fechaingreso == "") {

$("label#fechaingreso_error").show();

$("input#fechaingreso").focus();

return false;

}

var empresa = $("input#empresa").val();

if (empresa == "") {

$("label#empresa_error").show();

$("input#empresa").focus();

return false;

}

var departamento = $("select#departamento").val();

if (departamento == "") {

$("label#departamento_error").show();

$("select#departamento").focus();

return false;

}

var reporta = $("input#reporta").val();

if (reporta == "") {

$("label#reporta_error").show();

$("select#reporta").focus();

return false;

}

var sexo = $("select#sexo").val();

if (seccion == "") {

$("label#sexo_error").show();

$("select#sexo").focus();

return false;

}

var imageToUpload = $("input#imageToUpload").val();

if (imageToUpload == "") {

$("label#imageToUpload_error").show();

$("select#imageToUpload").focus();

return false;

}

var objetivo1 = $("textarea#objetivo1").val();

if (objetivo1 == "") {

$("label#objetivo1_error").show();

$("textarea#objetivo1").focus();

return false;

}

var medicion1 = $("textarea#medicion1").val();

if (medicion1 == "") {

$("label#medicion1_error").show();

$("textarea#medicion1").focus();

return false;

}

var comemprev1 = $("textarea#comemprev1").val();

if (comemprev1 == "") {

$("label#comemprev1_error").show();

$("textarea#comemprev1").focus();

return false;

}

var comempeva1 = $("textarea#comempeva1").val();

if (comempeva1 == "") {

$("label#comempeva1_error").show();

$("textarea#comempeva1").focus();

return false;

}

var comsuprev1 = $("textarea#comsuprev1").val();

if (comsuprev1 == "") {

$("label#comsuprev1_error").show();

$("textarea#comsuprev1").focus();

return false;

}

var comsupeva1 = $("textarea#comsupeva1").val();

if (comsupeva1 == "") {

$("label#comsupeva1_error").show();

$("textarea#comsupeva1").focus();

return false;

}

var dataString = 'nombre='+ nombre + '&posicion=' + posicion + '&gradosal=' + gradosal + '&area=' + area + '&seccion=' + seccion + '&country=' + country + '&city=' + city + '&identificacion=' + identificacion + '&fechaingreso=' + fechaingreso + '&empresa=' + empresa + '&departamento=' + departamento + '&reporta=' + reporta + '&sexo=' + sexo + '&imageToUpload=' + imageToUpload + '&objetivo1=' + objetivo1 + '&medicion1=' + medicion1 + '&comemprev1=' + comemprev1 + '&comempeva1=' + comempeva1 + '&comsuprev1=' + comsuprev1 + '&comsupeva1=' + comsupeva1;

//alert (dataString);return false;

$.ajax({

type: "POST",

url: "procesar.php",

data: dataString,

success: function() {

$('.container').html("<div id='message'></div>");

$('#message').html("<h2>Datos guardados!</h2>")

.append("<p>Exitoso.</p>")

.hide()

.fadeIn(1500, function() {

$('#message').append("<img id='checkmark' src='img/check.png' />");

});

}

});

return false;

});

lo que quiero es tambien enviar las variables de los campos dinamicos por medio de esta funcion que va creando las variables para posteriormente procesarlas por medio de php y guardarlas a la base de datos. No se si haya que hacer un while, for, if .. en realidad no tengo idea de como agregar estos campos dinamicos que son los unicos que me faltan enviar. Y ademas quisiera saber cómo al mandarlos a esta bd que se vayan ańadiendo los campos correspondientes ya que no estan creados.

Espero me entiendas y me puedas ayudar en estas dos cosas.

Si quieres te envio todo el formulario que tengo.

<html>
<head>
<meta/>
<title></title>
<script language="javascript" type="text/javascript">

var miTabla = 'tabla'; // poner aquí el id de la tabla que queremos editar

// preparar la tabla para edición
function iniciarTabla() {
tab = document.getElementById(miTabla);
filas = tab.getElementsByTagName('tr');
for (i=1; fil = filas[i]; i++) {
celdas = fil.getElementsByTagName('td');
for (j=1; cel = celdas[j]; j++) {
if ((i>0 && j==celdas.length-1) || (i==filas.length-1 && j!=0)) continue; // La última columna y la última fila no se pueden editar
cel.onclick = function() {crearInput(this)}
} // end for j
} //end for i

// ańadir funcion onclick a las imágenes para borrar y ańadir y ocultar las imágenes de borrar
for (i=0; im = document.images[i]; i++)
if (im.alt=='ańadir fila')
im.onclick = function() {anadir(this,0)}
else if (im.alt=='ańadir columna')
im.onclick = function() {anadir(this,1)}
else if (im.alt=='borrar fila') {
im.onclick = function() {borrar(this,0)}
im.style.visibility = 'hidden';
}
else if (im.alt=='borrar columna') {
im.onclick = function() {borrar(this,1)}
im.style.visibility = 'hidden';
}
} // end function

// crear input para editar datos
function crearInput(celda) {
celda.onclick = function() {return false}
txt = celda.innerHTML;
celda.innerHTML = '';
obj = celda.appendChild(document.createElement('input'));
obj.value = txt;
obj.focus();
obj.onblur = function() {
txt = this.value;
celda.removeChild(obj);
celda.innerHTML = txt;
celda.onclick = function() {crearInput(celda)}
sumar();
}
}

// sumar los datos de la tabla
function sumar() {
tab = document.getElementById(miTabla);
filas = tab.getElementsByTagName('tr');
sum = new Array(filas.length);
for (i=0; i<sum.length; i++)
sum[i]=0;
for (i=2, tot=filas.length-1; i<tot; i++) {
total = 0;
celdas = filas[i].getElementsByTagName('td');
for (j=2, to=celdas.length-1; j<to; j++) {
num = parseFloat(celdas[j].innerHTML);
if (isNaN(num)) num = 0;
total += num;
sum[j-2] += num;
} // end for j
celdas[celdas.length-1].innerHTML = total;
sum[j-2] += total;
} // end for i

subt = filas[filas.length-1].getElementsByTagName('td');
for (i=2, tot=subt.length; i<tot; i++)
subt[i].innerHTML = sum[i-2];
} // end function

// ańadir filas o columnas
function anadir(obj,num) {
if (num==0) { // ańadir filas
fila = obj.parentNode.parentNode;
nuevaFila = fila.cloneNode(true);
im = nuevaFila.getElementsByTagName('img');
im[0].onclick = function() {anadir(this,0)}
im[1].onclick = function() {borrar(this,0)}
for (i=2, tot=nuevaFila.getElementsByTagName('td').length-1; i<tot; i++) {
nuevaFila.getElementsByTagName('td')[i].onclick = function() {crearInput(this)} ;
nuevaFila.getElementsByTagName('td')[i].innerHTML = 0;
}
fila.parentNode.insertBefore(nuevaFila,fila);
} // end ańadir filas

else { // ańadir columnas
tab = document.getElementById(miTabla);
cabecera = tab.getElementsByTagName('tr')[0];
// averiguar nş de columna
for (num=0; cel = cabecera.getElementsByTagName('td')[num]; num++)
if (cel==obj.parentNode) break;
for (i=0; fila = tab.getElementsByTagName('tr')[i]; i++) {
ele = fila.getElementsByTagName('td')[num];
nuevaColumna = ele.cloneNode(true);
if (i==0) {
im = nuevaColumna.getElementsByTagName('img');
im[0].onclick = function() {anadir(this,1)}
im[1].onclick = function() {borrar(this,1)}
}
else {
nuevaColumna.innerHTML = (i==1) ? '' : 0;
nuevaColumna.onclick = function() {crearInput(this)} ;
}
fila.insertBefore(nuevaColumna,ele);
} //end for i
} // end ańadir columnas
mostrarImagenes();
}

// borrar filas o columnas
function borrar(obj,num) {
if (num==0) { // borrar filas
tab = obj.parentNode.parentNode.parentNode;
tab.removeChild(obj.parentNode.parentNode);
} // end borrar filas
else { // borrar columnas
tab = document.getElementById(miTabla);
cabecera = tab.getElementsByTagName('tr')[0];
// averiguar nş de columna
for (num=0; cel = cabecera.getElementsByTagName('td')[num]; num++)
if (cel==obj.parentNode) break;
for (i=0; fila = tab.getElementsByTagName('tr')[i]; i++)
fila.removeChild(fila.getElementsByTagName('td')[num]);
}
sumar();
mostrarImagenes();
}

// mostrar/ocultar imagenes para borrar
function mostrarImagenes() {
tab = document.getElementById(miTabla);
filas = tab.getElementsByTagName('tr');
columnas = filas[0].getElementsByTagName('td');
numFilas = filas.length;
numColumnas = columnas.length;
for (i=0; im=tab.getElementsByTagName('img')[i]; i++)
if (im.alt == 'borrar fila')
im.style.visibility = (numFilas>5) ? 'visible' : 'hidden';
else if (im.alt == 'borrar columna')
im.style.visibility = (numColumnas>5) ? 'visible' : 'hidden';
}
</script>
</head>

<body onload="iniciarTabla()">
<table id="tabla">
<tr class="cabeza">
<td width="105" class="orden"> </td><td width="50"> </td>
<td width="96">Cantidad 1</td><td width="129">Cantidad 2</td>

<td width="99">Sub-Total</td>
</tr>
<tr>
<td class="orden"> <img src="editatabla/anadir.gif" alt="ańadir fila" /> <img src="editatabla/menos.gif" alt="borrar fila" /></td><td class="orden"> </td>
<td>0</td><td>0</td><td>0</td>
</tr>
<tr>

<td class="orden"> <img src="editatabla/anadir.gif" alt="ańadir fila" /> <img src="editatabla/menos.gif" alt="borrar fila" /></td><td class="orden"> </td>
<td>0</td><td>0</td><td>0</td>