I have a form that with a button is "duplicated" as many times as the user wants.
<div id="productosTotal">
<div id="producto">
<label>Nombre del producto *</label>
<input type="text" name="NombreProducto" class="md-input" id="NombreProducto" required class="md-input" />
<br/>
<label>Observaciones del producto como manejo, empaquetado, etc.</label>
<textarea rows="1" cols="50" name="observaciones" id="observaciones" class="md-input selecize_init" placeholder=""></textarea>
<br>
<div class="uk-grid">
<div class="uk-width-medium-1-2">
<div class="uk-input-group">
<span class="uk-input-group-addon"><i class="material-icons md-36"></i></span>
<label>Cantidad *</label>
<input type="number" name="cantidad" id="cant" class="md-input" value="1" steps="1" min="1" max="10" required class="md-input" />
</div>
</div>
<div class="uk-width-medium-1-2">
<div class="uk-input-group">
<span class="uk-input-group-addon"><i class="material-icons md-36"></i></span>
<label>Precio Unitario *</label>
<input class="md-input masked_input label-fixed" id="precioU" name="precioU" type="text" data-inputmask="'alias': 'currency', 'groupSeparator': '.', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'" data-inputmask-showmaskonhover="false" style="text-align: right;" onKeyPress="return justNumbers(event);">
</div>
</div>
</div>
</div>
</div><!--fin del Div a duplicar-->
<button class="md-btn md-btn-wave waves-effect waves-button" id="button" onClick="duplicar()"> Agregar otro producto </button>
This above is the form. Below I put the function that duplicates it
var original = document.getElementById('product');
function duplicar()
{
var clone = original.cloneNode(true);
clone.id= "producto" + ++k;
original.parentNode.appendChild(clone);
}
And this form calculates the subtotal by multiplying the unit price by the quantity and adding these. To get the data for this form, I globally declared a variable called productsHTML that I initialize to empty in the function called "calculate"
productosHTML="";
var sub1=0;
for(var c=0; c<=k; c++)
{
if(c==0){
var divProducto= $("#producto"); //este es el div de producto principal
}else{
var divProducto= $('#producto'+c);//este ya es el que creas de duplicar
}
NombreProducto = divProducto.find('input[id="NombreProducto"]').val()
observaciones = divProducto.find('input[id="observaciones"]').val()
cant = divProducto.find('input[id="cant"]').val() // aqui se obtine el valor de input de cantidad del div antes definido
precioU = divProducto.find('input[id="precioU"]').val()
//var prod =document.getElementById("producto :cantidad");
//var productosHMTL="";
// productosHTML+='<tr align="center"><td width="160" style="font-size: 14px;"><label >' + NombreProducto + '</label></td><td width="260" valign="top" style="font-size: 14px;"><label>' + observaciones + '</label></td><td width="60" valign="top" style="font-size: 14px;"><label>'+ cant +'</label></td><td width="70" valign="top" style="font-size: 14px;"><label>'+ precioU +'</label></td></tr>';
//prueba
productosHTML=productosHTML.concat('<tr align="center"><td width="160" style="font-size: 14px;"><label >'+NombreProducto +'</label></td><td width="260" valign="top" style="font-size: 14px;"><label>' + observaciones + '</label></td><td width="60" valign="top" style="font-size: 14px;"><label>'+ cant +'</label></td><td width="70" valign="top" style="font-size: 14px;"><label>'+ precioU +'</label></td></tr>');
//Productos para duplicar
cantidad=cant;
unitario=precioU;
sub1+=cantidad*unitario;
}
**El cálculo lo hace bien, lo muestra en pantalla correctamente. Pero los detalles de éste formulario lo debo enviar a un correo con ésta función:**
function pedir()
{
//var productosHTML = "";
//Inicia validaci?n
var orgv=document.getElementById("org").value;
var desv=document.getElementById("des").value;
var NombreCompradorv=document.getElementById("NombreComprador").value;
var CelDesv=document.getElementById("CelDes").value;
var NombreRemitentev=document.getElementById("NombreRemitente").value;
var MailRemitentev=document.getElementById("MailRemitente").value;
var CelRemv=document.getElementById("CelRem").value;
var NombreProductov=document.getElementById("NombreProducto").value;
var cantidadv=document.getElementById("cant").value;
var PrecioUv=document.getElementById("precioU").value;
var datev=document.getElementById("date").value;
var horariov=document.getElementById("horario").value;
var pagov = $('input[name="pago"]:checked').val();
if (orgv==="" || desv==="" || NombreCompradorv==="" || CelDesv==="" || NombreRemitentev === "" || MailRemitentev==="" || CelRemv==="" || NombreProductov==="" || cantidadv==="" || PrecioUv<0 || datev==="" || horariov==="" || pagov==="")
{
alert("Ingresar campos obligatorios marcados con *");
return false;
}
else
{ //Si se completa la condici�n, mostrar...
//Ingresamos un mensaje a mostrar
UIkit.modal.confirm("Si los datos son correctos, presione Ok", function()
{
//variables
var org=document.getElementById("org").value;
var des=document.getElementById("des").value;
var referencias=document.getElementById("referencias").value;
var NombreComprador=document.getElementById("NombreComprador").value;
var TelDes=document.getElementById("TelDes").value;
var CelDes=document.getElementById("CelDes").value;
var NombreRemitente=document.getElementById("NombreRemitente").value;
var MailRemitente=document.getElementById("MailRemitente").value;
var TelRem=document.getElementById("TelRem").value;
var CelRem=document.getElementById("CelRem").value;
var NombreProducto=document.getElementById("NombreProducto").value;
var observaciones=document.getElementById("observaciones").value;
var cantidad=document.getElementById("cant").value;
var PrecioU=document.getElementById("precioU").value;
var date=document.getElementById("date").value;
var horario=document.getElementById("horario").value;
var pago = $('input[name="pago"]:checked').val();
//
//var productosHTML=" ";
//Resultados de cotizaci?n
//Ajax
$.ajax({
method:"POST",
dataType:"json",
url:"./enviarcorreo.php",
data:{
org:org,
des:des,
referencias:referencias,
NombreComprador:NombreComprador,
TelDes:TelDes,
CelDes:CelDes,
NombreRemitente:NombreRemitente,
MailRemitente:MailRemitente,
TelRem:TelRem,
CelRem:CelRem,
//NombreProducto:NombreProducto,
//observaciones:observaciones,
//cantidad:cantidad,
//PrecioU:PrecioU,
productosHTML:productosHTML,
date:date,
horario:horario,
pago:pago,
//cotizaciones
costo:costo,
subtotal:subtotal,
total:total
}}) //fin de datos
.done(function(msg2)
{
console.log("pagos");
}) //fin del done
.fail(function( jqXHR, textStatus ) { console.log("fail jqXHR::"+jqXHR+" textStatus::"+textStatus);})
.always(function(){ console.log("always");});
//console.log(productosHTML);
//location.reload(true);
console.log(productosHTML);
//alert("Pedido realizado. Espera respuesta pronto");
}, function ()
{
console.log("Rejected")
//console.log("hola " + pago);
}); //fin mensaje
} //Fin de validaci?n
} //fin pedir
At the time of printing in the console or sending it to the mail, all the variables that were sent to print appear EXCEPT the "observations" one, which is a text area. It appears to me as undefined and I don't understand why
Here a photo of the site and its impression in console
Thank you very much for your collaborations.
In the line where you get the value of the textarea you look for it as an input
you must use textarea as selector
Try
$(tuSelector).val();
wheretuSelector
is valid way to get thetextarea
.I suggest you use jQuery on everything ; since you are already loading it ; By itself, jQuery saves you certain problems, such as using
val()
whether it is a select, input, text...You can do it with native js by doing the following:
If I'm not mistaken your id is 'observations' but the one that corresponds to the textarea element