Hola Alexis88 muchas gracias por tu respuesta,
Ya lo adapte como me comentas y realmente me cuesta un poco de trabajo ya que no había empleado jQuery anteriormente, pero en verdad me interesa mucho saberlo.
Agregue lo siguiente, y efectivamente ya me toma el valor de la variable "campos":
Código Javascript
:
Ver originalvar campos = 0;
var cuenta = 0;
var ancho = 0;
var largo = 0;
var medida = "";
var calculo='Area';
//Función agregar campos de categoría y partes
function agregarCampoS(elemento){
//Aquí lo agregue!
$(elemento).change(function () {
alert('CAMPOS: '+campos); //Ya imprime el valor de campos
id_category = $(this).val();
$.post("subcategories.php", {
id_category: id_category }, function(data){
$("#parte"+campos).html(data);
});
})
posicion=document.getElementById('categoria'+campos).options.selectedIndex;
posicion2 = document.getElementById('categoria'+campos).options[posicion].text;
container = document.getElementById('contenido'+campos) ;
if(posicion2=="Moldura" || (posicion2=='Tipo de reparacion')){
container.innerHTML=
"<table width='80%' >" +
'<tr>'+
' <td colspan="3" class="Estilo2">Número de parte:'+
' <select name="parte'+campos+'" id="parte'+campos+'" onchange="JavaScript:fncSumarPerimetro(campos);"></select></td>'+
'</tr>'+
' <tr>'+
' <td colspan="3" class="Estilo2"><strong>Medidas</strong></td>'+
' </tr>'+
' <tr class="Estilo2">'+
' <td width="44%">Perimetro: <input name="medida_u'+ campos +'" type="text" id="medida_u'+ campos +'" size="5" disabled/> </td>'+
' <td width="20%">cm</td>'+
' <td> </td>'+
' </tr>'+
' <tr class="Estilo2">'+
' <td colspan="3">Precio unitario: $ <input name="precio_u'+ campos +'" type="text" id="precio_u'+ campos +'" size="10" disabled/> pesos</td>'+
' </tr>'+
' <tr>'+
' <td colspan="3" class="Estilo2 Estilo5">'+
"-------------------------------------------------------------------------" +
' </tr>'+
"</table>";
var contenedor2= document.getElementById("contenedorcampos2"+campos);
contenedor2.appendChild(NvoCampo2);
}if((posicion2=='Maria Luisa') || (posicion2=='Vidrio') || (posicion2=='Bastidor' || (posicion2=='Macosel'))){
container = document.getElementById('contenido'+campos) ;
//NvoCampo2= document.createElement("div");
container.innerHTML=
"<table width='80%' >" +
' <tr>'+
' <td colspan="3" class="Estilo2"><strong>Medidas de los margenes</strong></td>'+
' </tr>'+
' <tr class="Estilo2">'+
' <td>Superior:'+
' <input name="superior" type="text" id="superior'+ campos +'" size="3" /> cm'+
' </td>'+
' <td colspan="2">Izquierdo:'+
'<input name="izquierdo" type="text" id="izquierdo'+ campos +'" size="3" />cm</td>'+
' </tr>'+
' <tr class="Estilo2">'+
' <td>Inferior:'+
' '+
' <input name="inferior" type="text" id="inferior'+ campos +'" size="3" /> cm</td>'+
' <td colspan="2">Derecho:'+
'<input name="derecho" type="text" id="derecho'+ campos +'" size="3" /> cm'+
' </tr>'+
'<tr>'+
' <td colspan="3" class="Estilo2">Número de parte:'+
' <select name="parte'+campos+'" id="parte'+campos+'" onchange="JavaScript:fncSumarArea();"></select></td>'+
'</tr>'+
' <tr class="Estilo2">'+
' <td width="54%">Área: <input name="medida_u'+ campos +'" type="text" id="medida_u'+ campos +'" size="5" disabled/> '+
' cm<sup>2</sup></td>'+
' <td width="10%"></td>'+
' <td width="36%"> </td>'+
' </tr>'+
' <tr class="Estilo2">'+
' <td colspan="3">Precio unitario: $ <input name="precio_u'+ campos +'" type="text" id="precio_u'+ campos +'" size="10" disabled/> pesos</td>'+
' </tr>'+
' <tr>'+
' <td colspan="3" class="Estilo2 Estilo5">'+
"-------------------------------------------------------------------------" +
' </tr>'+
"</table>";
var contenedor2= document.getElementById("contenedorcampos2"+ campos);
contenedor2.appendChild(NvoCampo2);
}
}
//Funcion agregar campos de categoria y partes
function agregarCampo(){
campos = campos + 1;
var NvoCampo= document.createElement("div");
NvoCampo.id= "divcampo_"+(campos);
NvoCampo.innerHTML=
"<table width='80%' >" +
' <tr>'+
' <td height="30" colspan="2" bgcolor="#FAFAFA" class="Estilo2"><strong>'+campos+' Elemento de la orden de trabajo</strong></td>'+
' <td width="23%" height="30" align="center" bgcolor="#FAFAFA" class="Estilo2">'+
" <a href='JavaScript:quitarCampo(" + campos +");'> Quitar </a>" +
' </tr>'+
' <tr>'+
' <td colspan="3" class="Estilo2">Tipo de categoría:'+
' <select name="categoria'+campos+'" id="categoria'+campos+'" onchange="agregarCampoS(this)">'+
' <option value="1">Maria Luisa</option>'+
' <option value="2">Moldura</option>'+
' </select></td>'+
' </tr>'+
'<tr>'+// bgcolor="#CC0066"
' <td colspan="3" class="Estilo2">'+
"<div id='contenido"+campos+"'></div>" +
' </td>'+
'</tr>'
"</table>";
var contenedor= document.getElementById("contenedorcampos");
contenedor.appendChild(NvoCampo);
}
//Funcion para quitar elementos
function quitarCampo(iddiv){
var eliminar = document.getElementById("divcampo_" + iddiv);
var contenedor= document.getElementById("contenedorcampos");
contenedor.removeChild(eliminar);
}
sin embargo, pasa algo raro ya que cuando cambio por primera vez el select ("categoria"+campos) no se muestra el Alert, después si cambio nuevamente el valor del select el "Alert" se muestra 2 veces y si vuelvo a cambiar el valor del select aparece una vez mas, osea 3, y así sucesivamente.
aparte no ejecuta el archivo "subcategories.php":
Código PHP:
<?php
$conexion = new mysqli('localhost', '', '', '');
$id_category = $_POST['id_category'];
$result = $conexion->query("SELECT * FROM clientes WHERE tienda = ".$id_category);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$html .= '<option value="'.$row['id'].'">'.$row['nombre'].'</option>';
}
}
echo $html;
?>
en verdad agradezco mucho tu ayuda!!
muchas gracias!