Get textarea value by javascript

5

I have a form that with a button "duplicates" so many times 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">&#xE3DA;</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">&#xE263;</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 one 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 amount and adding these. To obtain the data of this form, I globally declared a variable called HTML products that initialized 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 moment of printing in the console or sending it to the mail, all the variables that were sent to print appear LESS the "observations" that is a text area. It appears to me as undefined and I do not understand why

Here a photo of the site and its console printing

Thank you very much for your contributions.

    
asked by Fernanda Pichardo 05.04.2017 в 22:40
source

2 answers

2

In the line where you get the value of textarea you look for it as an input

observaciones = divProducto.find('input[id="observaciones"]').val()

you must use textarea as a selector

observaciones = divProducto.find('textarea[id="observaciones"]').val() 
    
answered by 05.04.2017 / 22:56
source
1

Test with $(tuSelector).val(); where tuSelector is a valid way to get textarea .

I suggest using jQuery in everything ; since you're already loading it ; if only the jQuery will remove certain problems like using val() if it is a select, input, text ...

    
answered by 05.04.2017 в 22:48