Javascript does not work without alert()

Question

I have a Javascript function that works well until I comment out/or delete the alert() line. It calculates the sum of up to 30 fields if they exist and if they have a value.

HTML:

<input type="text" onblur="Calculatenettobrutto(1);">

JavaScript:

function Calculatenettobrutto(n) {
  var Feldnummer=n;
  var nettowert,bruttowert;
  var nettosumme, bruttosumme,neuenettosumme,neuebruttosumme;
  var Wertfuer='Mehrwertsteuersatz'
  //Mehrwertsteuer auslesen
  var dataString = 'Name='+Wertfuer;
  var thisObject = this;
  this.wert=$.ajax({
    type: "POST",
    url: "ajax_get_Einstellungen.php",
    data: dataString,
    cache: false,
    success: function(wert) {
      nettowert = document.getElementById('Netto'+Feldnummer).value;
      bruttowert = parseFloat(nettowert) * wert;
      document.getElementById('Brutto'+Feldnummer).value=parseFloat(bruttowert);
      return wert;
    }
  });

  var nettosumme=0,bruttosumme=0, x=1;
  while (x < 30) {
  var Feldname='Netto'+x;
  if ( document.getElementById('Netto'+x) ) {
    //If field Netto+x exist then check if it has a value
    var nettowert=document.getElementById('Netto'+x).value;
    //if it has a value add values to nettosumme and bruttosumme
    if (nettowert) {
      nettosumme=parseFloat(nettosumme)+parseFloat(document.getElementById('Netto'+x).value);
      //IF I COMMENT THIS OUT, I get a NAN in my Bruttosumme column
      alert(nettosumme);
      bruttosumme=parseFloat(bruttosumme)+parseFloat(document.getElementById('Brutto'+x).value);
    }
  }
  x++;
}
document.getElementById('Nettosumme').value=parseFloat(nettosumme);
document.getElementById('Bruttosumme').value=parseFloat(bruttosumme);

}

How I make it work even if the alert() line is removed?

Make sure you don't have any breakpoints set in your debugger. — George Cummins, May 21 '13 at 16:36
Are you SURE that the value is there at the time of execution, and not a tiny bit afterwards? This seems to work because you delay the rest of the execution with your `alert()` command. — h2ooooooo, May 21 '13 at 16:37
Are you calling this function after the document has sent the ready event? — George Reith, May 21 '13 at 16:38
I am absolutely new to javascript. I will try to reproduce it in jsFiddle.net Do not know what this is yet, but will find out. — user2335635, May 21 '13 at 16:43
You have a lot of needless parseFloat in your code, but that's definitely not the problem. Using a fiddle and try to rebuild the error is a good start. What happens after you remove the alert? Are there any errors (in Firebug or Chrome console or something)? — MofX, May 21 '13 at 16:55
I tried to reproduce it in jsFillde.net but the php code didn't work there and without the php I do not have the netto fieldnumbers. I was rethinking about the issue, the brutto field is filled in an inner function of this function, so I thought this must happen before, but probably this all happens at the same time? — user2335635, May 21 '13 at 16:59
Yes I was just hoping to fix the problem with the needless parseFloat. When I remove the alert, the nettosumme I get a nan Value in my Bruttosumm field. — user2335635, May 21 '13 at 17:00
I think you have to post some more code to show us how this "inner function" works and when it is called. Maybe there is something asynchronous? — MofX, May 21 '13 at 17:01
i have saved the whole javascript here http://jsfiddle.net/zBYqe/ as I am not allowed to write another answer here, this is easier to read. My inner function is a ajax function that gets a value from my databse to calculate the brutto column. then in the lines I have postetd already, I want to summ up all brutto columns. — user2335635, May 21 '13 at 17:02
@MofX Your edit on the question was too radical. I've rolled it back. How can you add source code, to the question? I assume good faith, but you should add an answer and not change the question.. (I see now, you have done) — hek2mgl, May 21 '13 at 17:28
@MofX... I see now, you copied it from jsfiddle. Now I would say radical change, but not too radical.. Sorry, my fault — hek2mgl, May 21 '13 at 17:31
@hek2mgl Yes took it from the fiddle to make the question compatible to my answer without looking at the fiddle — MofX, May 21 '13 at 17:37
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Bergi, May 21 '13 at 17:37
@Bergi No I don't think it's a duplicate, but it's very similar. A typical beginners mistake — MofX, May 21 '13 at 17:38

score 6 · Answer 1 · edited May 21 '13 at 17:43

The problem is that you do an asynchronous ajax request:

<input type="text" onblur="Calculatenettobrutto(1)" />

This calls Calculatenettobrutto as soon as the users leaves the field. Then your function is called:

var Feldnummer = 1;
this.wert=$.ajax({
   ...
   success: function(wert) {
      ...
      nettowert = document.getElementById('Netto'+Feldnummer).value;
      bruttowert = parseFloat(nettowert) * wert;
      document.getElementById('Brutto'+Feldnummer).value=parseFloat(bruttowert);
   }
});

//alert("Wait a little");
document.getElementById('Brutto'+Feldnummer).value <-- BANG

The problem here is the following: The function defined within ajax() is called when the result of the ajax call is returned from the server, the code after the ajax() is executed immediately. So you try to get the value from the field before it was set.

While the alert window is visible, the script is suspended and the ajax call returns and executes the "success" code setting the value of "Brutto...". After you close the alert, the code is executed and now "Brutto..." has a value.

The probably easiest solution would be to move your sum calculation function into the "success" function

This should work - or put the calc part in a new function and call that in the succes, but same effect. I debated putting in an answer using the `deffered` but this should work. — Mark Schultheiss, May 21 '13 at 17:46

Javascript does not work without alert()

1 Answers1