Problema formulario con javascript

[domingoficial1]

Hola, tengo un formulario en html, al cual se le pueden añadir campos adicionales a traves de un botón que ejecuta una funcion de javascript que clona un input. Lo malo es que los input clonados no se pasan a traves de POST. ¿Que podria estar pasando?

Formulario

Código:

<form name="formulario" enctype="multipart/form-data" action="?c=cycles&a=procesate" method="POST">

                    <tr><th colspan="2">Añadir Bicicleta</th></tr>
                    <tr><td colspan="2"></td></tr>
                    <tr></tr>
                    <tr><th>Marca*:</th><td>
                    <input type="text" name="brand" size="50" >
                    </td></tr>
                    <tr><th>Modelo*:</th><td>
                    <input type="text" name="model" size="50" >
                    </td></tr>
                    <tr><th>Número de serie:</th><td>
                    <input type="text" name="serial_number" size="50" >
                    </td></tr>
                    <tr><th>Fecha compra:</th><td>
                    <input type="date" name="date_buy" size="50" >
                    </td></tr>
                    <tr><th>Año fabricación:</th><td>
                    <input type="text" name="year" size="50" >
                    </td></tr>
                    <tr><th>Coste:</th><td>
                    <input type="text" name="price" size="50" >
                    </td></tr>
                    <tr><th colspan="2">Imagen:</th><tr>
                    <tr><td colspan="2">
                    <input type="file" name="file" >
                    </td></tr>
                    <tr><th colspan="2">Componentes:</th></tr>
                    </table>
                    <table>
                    <div class="row" id="row">
                    </div>
                    <input type="button" onClick="addrow()" value="Añadir Componentes" />
                    </table>
                    <table>
                    <tr><td>
                    <input type="hidden" name="number_component" id="number_component" >                    
                    <input type="submit" value="Añadir" >
                    </td></tr>
                    </form>

Javascript

Código:

function addrow(){
        a++;
  
        var div = document.createElement('div');
        div.setAttribute('class', 'form-inline');
            div.innerHTML = '<tr><td>'+a+'</td><td>'
            +'<select name="type-'+a+'">'
+'  <optgroup label="General">'
+'<option value="1_1">Cuadro</option>'
+'<option value="1_2">Sillin</option>'
+'<option value="1_3">Tija</option>'
+'<option value="1_4">Manillar</option>'
+'<option value="1_5">Potencia</option>'
+'<option value="1_6">Horquilla</option>'
+'<option value="1_7">Otros</option>'
+'    </optgroup>'
+'  <optgroup label="Ruedas Delanteras">'
+'<option value="2_1">Ruedas</option>'
+'<option value="2_2">Buje</option>'
+'<option value="2_3">Radios</option>'
+'<option value="2_4">Llanta</option>'
+'<option value="2_5">Fondo llanta</option>'
+'<option value="2_6">Cámara</option>'
+'<option value="2_7">Cubierta</option>'
+'    </optgroup>'
+'  <optgroup label="Ruedas Traseras">'
+'<option value="3_1">Ruedas</option>'
+'<option value="3_2">Buje</option>'
+'<option value="3_3">Radios</option>'
+'<option value="3_4">Llanta</option>'
+'<option value="3_5">Fondo llanta</option>'
+'<option value="3_6">Cámara</option>'
+'<option value="3_7">Cubierta</option>'
+'    </optgroup>'
+'  <optgroup label="Frenos delanteros">'
+'<option value="4_1">Frenos</option>'
+'<option value="4_2">Maneta</option>'
+'<option value="4_3">Cable</option>'
+'<option value="4_4">Pastillas</option>'
+'<option value="4_5">Disco</option>'
+'  </optgroup>'
+'  <optgroup label="Frenos traseros">'
+'<option value="5_1">Frenos</option>'
+'<option value="5_2">Maneta</option>'
+'<option value="5_3">Cable</option>'
+'<option value="5_4">Pastillas</option>'
+'<option value="5_5">Disco</option>'
+'    </optgroup>'
+'  <optgroup label="Transmisión">'
+'<option value="6_1">Mandos de cambio</option>'
+'<option value="6_1">Eje pedalier</option>'
+'<option value="6_1">Pedales</option>'
+'<option value="6_1">Bielas</option>'
+'<option value="6_1">Platos</option>'
+'<option value="6_1">Desviador delantero</option>'
+'<option value="6_1">Cadena</option>'
+'<option value="6_1">Cassette</option>'
+'<option value="6_1">Desviador trasero</option>'
+'    </optgroup>'
+'</select>'
            +'</td><td><input type="text" name="brand-'+a+'" placeholder="Marca"></input></td><td><input type="text" name="model-'+a+'" placeholder="Modelo"></input></td></tr>';
            document.getElementById('row').appendChild(div);document.getElementById('row').appendChild(div);
            document.getElementById("number_component").value=a;
}

Gracias y un saludo

[alvaro_trewhela]

No entiendo porque tanta concatenacion, jajaja.

Bueno sin darle mucha vuelta a tu codigo primero declara la variable a luego la operas, si no asignas es null, no puedes usar operadores para un null, es decir null++ no es valido, esta sería la forma correcta

a=1;
a++;

Luego INTUYO/CREO que tu error radica en que tu estas pensando que cada ves que llamas a la funcion a se incrementará, de modo que que en:
<select name="type-'+a+'">:

Suceda:
<select name="type-'+1+'">
<select name="type-'+2+'">

El problema es que cada ves que se llama a la funcion, sus variables "vuelven a cero" por lo que ese a pasando por alto lo del null, no incrementara entre cada llamada, para eso tienes que dejar la variable por fuera o por parámetro:

Código Javascript:

var a = 0;
 
function algo(){
alert(a++);
}
 

Código Javascript:

function algo(a){
alert(a++);
}
 

En este último tendrías que buscar la manera de guardar a para pasarlo por parámetro si llamas nuevamente

Entonces lo que pasa es que todos tus select tienen el mismo nombre, por tanto el post tomará el último.

Toda esta explicación es mi intuición. lo demás se ve correcto.

Edito: No se como lo haras para lidiar con este método a la hora de recojer los post, te recomiendo usar

Código HTML:

<input name="algo[]" />
 

Saludos.

[leugimsiul]

Creo que te faltaría recoger el valor de "a":

Código Javascript:

function addrow(){
        var a = document.getElementById("number_component").value || '0';
        a = parseInt(a) + 1;
 
        ...
 
}
 

Luego también cuidado, porque haces dos veces el "appendChild" del div, esto te dará campos repetidos.

No lo he probado vaya, pero creo que se entiende la idea.

Saludos!