javascript - How to extract data from div id using ajax? -

i'm trying figure out how that, don't have clue. need text div using ajax , use php send smtp, believe need know how make ajax part.

let's have this:

<div id="trajeto-texto1">      <span id="resultado">          <div class="calculo"><label>distância: 0.00 km</label></div>          <div class="calculo"><label>duração: 0 min.</label></div>          <div class="calculo"><label>custo: r$ 0,00</label></div>      </span>                     </div> 

and need parse every single text inside div id "trajeto-texto", or inside span id "resultado".

it's php echo, in javascript.

console debugging, apparently there nothing related form:

failed load resource: server responded status of 404 (not found) main.js:61 uncaught typeerror: undefined not function main.js:60 have included google maps api multiple times on page. may cause unexpected errors. 33209.html:9 uncaught referenceerror: j not defined vm7253:10 uncaught typeerror: cannot set property 'geometry' of undefined dados-do-formulario.js:100 uncaught syntaxerror: unexpected token : http://sitesdemo.mghospedagem.com/ivam-entregas/3/images/bg.png failed load resource: server responded status of 404 (not found) 33209.html:1 uncaught referenceerror: j not defined 33209.html:9 uncaught referenceerror: j not defined 33209.html:3 uncaught referenceerror: j not defined 33209.html:6 uncaught referenceerror: j not defined http://sitesdemo.mghospedagem.com/ivam-entregas/3/33209/css failed load resource: server responded status of 404 (not found) 

update

ok, decided give try, still no success:

 $(document).ready( function(){ //quando documento estiver pronto     $('#btnenviar').click( function(){ /* quando clicar em #btn */         /* coletando dados */         var nome  = $('#nome').val();          var email = $('#email').val();   var distance = $("#distance").text(); var duration = $("#duration").text(); var costs = $("#costs").text();                    var msg   = $('#txtdetalhes').val();                                                     var end1 = $('#1').val();          var end2 = $('#txtenderecochegada').val();             if(nome.length <= 3){                        alert('informe o seu nome');                                     return false;                    }             if(email.length <= 3){                        alert('informe o seu email');                                     return false;                    }             if(end1.length <= 3){                        alert('informe o endereço de partida');                                     return false;                    }                                  if(end2.length <= 5){                        alert('informe o endereço de chegada');                                     return false;                    }               if(msg.length <= 5){                        alert('informe os detalhes');                                 return false;                    }                                   /* construindo url */  /*  var urldata = "&nome=" + nome + "&email=" + email +  "&end2=" + end2 + "&distance=" + distance + "&duration=" + duration + "&costs=" + costs + "&msg=" + msg + "&end1=" + end1;  */          // extract values      var data = [];     $('#resultado span').each(function (index, item) {         var id = $(item).attr('id');         data[id] = $(item).text();     });      // have values?     console.log(data);      // post values backend.php (adjust url).     $.ajax({         type: "post",         url: "sendmailivam.php",         data: data,         success: function (response) {             console.log(response);         }     }); });     var urldata = {      "nome": nome,     "email": email,     "distance": distance,     "duration": duration,     "costs": costs,    "msg": msg,     "end1": end1,     "end2": end2 };           // ajax            $.ajax({              type: "post",              url: "sendmailivam.php", // endereço phpmailer              async: true,              data: urldata, // informa url              success: function(data) { // sucesso                   $('#retornohtml').html(data);              },              beforesend: function() { // antes de enviar                   $('.loading').fadein('fast');               },              complete: function(){ // completo                   $('.loading').fadeout('fast');              }          });         });     });  

tried again, believe didn't miss point now, , suspect problem is: data empty. how i'm doing it:

$(document).ready(function() { //quando documento estiver pronto      $('#btnenviar').click(function() { /* quando clicar em #btn */          /* coletando dados */          var nome = $('#nome').val();          var email = $('#email').val();             /*                   var distance = $("#distance").text();                   var duration = $("#duration").text();                   var costs = $("#costs").text();                  */            // extract values           var data = [];          $('#resultado span').each(function(index, item) {              var id = $(item).attr('id');              data[id] = $(item).text();          });           // have values?          console.log(data);             var msg = $('#txtdetalhes').val();          var end1 = $('#1').val();          var end2 = $('#txtenderecochegada').val();             if (nome.length <= 3) {              alert('informe o seu nome');              return false;          }          if (email.length <= 3) {              alert('informe o seu email');              return false;          }            if (end1.length <= 3) {              alert('informe o endereço de partida');              return false;          }          if (end2.length <= 5) {              alert('informe o endereço de chegada');              return false;          }          if (msg.length <= 5) {              alert('informe os detalhes');              return false;          }           //construindo url          var urldata = {              "nome": nome,              "email": email,              "data": data,              "msg": msg,              "end1": end1,              "end2": end2          };            /*             var urldata = {                       "nome": nome,                       "email": email,                       "distance": distance,                       "duration": duration,                       "costs": costs,                       "msg": msg,                       "end1": end1,                       "end2": end2                   };           */             // ajax            $.ajax({              type: "post",              url: "sendmailivam.php", // endereço phpmailer              async: true,              data: urldata,                // informa url              success: function(data) { // sucesso                   $('#retornohtml').html(data);              },              beforesend: function() { // antes de enviar                   $('.loading').fadein('fast');              },              complete: function() { // completo                   $('.loading').fadeout('fast');              }          });              // have values?          console.log(data);          });  }); 

i interpret question bit , maybe it's want:

1 how extract values html?

the trick add 1 more dom element, make selection of actual values easier.

<div id="trajeto-texto1">      <span id="resultado">         <div class="calculo">distância: <span id="distance">1.00</span> km</div>         <div class="calculo">duração: <span id="duration">2</span> min.</div>         <div class="calculo">custo: r$ <span id="costs">3,00</span> </div>     </span>         <button id="submitbutton">send</button> </div> 

this allows select "values" without worries (split or regexp value text of label).

you use $("#distance") select dom element id jquery. value append .text();.

var distance = $("#distance").text(); var duration = $("#duration").text(); var costs = $("#costs").text(); 

or bit better use .each() iteration on dom elements , build data object, so:

// extract values var data = []; // iterate on dom element inside span (= item) $('#resultado span').each(function (index, item) {     // item, id     var id = $(item).attr('id');     // item, text, value     data[id] = $(item).text(); });  console.log(data); // browser console = debug display = open key f12 

the console output is: [distance: "1.00", duration: "2", costs: "3,00"].

ok, made sure data contains values want send... now: let's send.

2 how send values on php?

well, depends. post or request. hmm, lets go post:

// data looks this, got var data = [distance: "1.00", duration: "2", costs: "3,00"];  // post data array php backend $.post("backend.php",     data: data,     function(data,status){       // response }); 

---

full example:

http://jsfiddle.net/b6w0ckmj/2/

$('#submitbutton').click(function (evt) {      // extract values      var data = [];     $('#resultado span').each(function (index, item) {         var id = $(item).attr('id');         data[id] = $(item).text();     });      // have values?     console.log(data);      // post values backend.php (adjust url).     $.ajax({         type: "post",         url: "/echo/html/",         data: data,         success: function (response) {             console.log(response);         }     }); });