jQuery.each doens't work on Safari

Question

I have a problem with my jQuery script and Safari (Mac + iPhone). This is the structure of the page:

As I need to modify the data before sending it to the next script, I read all of the forms (serializeArray), modify it to my needs, write them in a new form (display:none) and let it send to the next page. This is the script:

$("input#newsubmit").click(function(e) {
    e.preventDefault();
    arraytix = [];
    checkboxStatus = 0;
    $("input[id^=field]").each(function(i) {
         if ($(this).val() != 0) {
              arraytix[i] = $(this).attr('name') + ":" + $(this).val() + ":" + $(this).parent().parent().find("li.four").find("input[id*=price_item]").val() + ":" + $(this).parent().parent().find("li.five").find("input[id*=vvk_item]").val();
         }
    });

    var carttix = '';
    jQuery.each(arraytix, function(i) {
         if (arraytix.hasOwnProperty(i)) {
             if (i == arraytix.length - 1) {
                 carttix += this;
             } else {
                 carttix += this + '-';
             }
         }
    });

    $("form#finalSubmit").append( '<input name="cart" value="'+carttix+'" />');
    $("form#finalSubmit").append( '<input name="versand" value="'+$("select#item_vat_1").val()+'" />');
    $("form#finalSubmit").append( '<input name="barzahlung" value="'+checkboxStatus+'" />');
    if (checkboxStatus == 0) { 
         var fields = $("fieldset.customer").serializeArray();
         alert("before each");
         jQuery.each(fields, function(i, field){
             $("form#finalSubmit").append( '<input name="'+field.name+'" value="'+field.value+'" />');
             alert("loop");
         });
         alert("after jquery.each");
    }
    //$("form#finalSubmit").submit();
}

The first instance of jQuery.each works as expected on all browsers and plattforms. The second instance of jQuery.each with the append command doesn't execute on Safari on all plattforms.

For debugging purpose I have added some alerts. Mac with Safari: alert("before each") and alert("after each") get triggered, jQuery.each doens't. Other browsers (including Firefox Mac) haven't got any problem. The first alert, some alert("loop")s and the last alert fire up as it should be.

What is the problem here?

Answer 1

serializeArray(), according to a little bit of Googling, is normally only supposed to work on actual form or input elements. Right now, you're basically trying to ask it to serialize a fieldset. Try changing your serializeArray() line to:

var fields = $("fieldset.customer :input").serializeArray();

I think you can make this code quite a bit clearer as well. I've added notes where I think you should be investigating and/or learning. There's nothing jQuery-wise that shouldn't be working in the browsers you mentioned, at least not that I can see. I've made the above-mentioned change in the code below as well:

$("#newsubmit").click(function(e) { // just the ID is faster than including the element type
    e.preventDefault();

    var arraytix = [], // added "var" to stay in local scope
        checkboxStatus = 0; // where does this get set? It's always 0

    $("input[id^=field]").each(function() { // you don't need 'i' anymore
         // find some things up front so you're not asking jQuery to
         // find them over and over again
         var $this = $(this),
             $grandParent = $this.parent().parent(),
             val = $this.val();

         if (val !== "0") { // val() usually returns a string
              // use push() to avoid creating a sparse array
              arraytix.push([
                  $this.attr('name'),
                  val, 
                  $grandParent.find("li.four").find("input[id*=price_item]").val(),      
                  $grandParent.find("li.five").find("input[id*=vvk_item]").val()
             ].join(':')); // forget about adding those colons manually
         }
    });

    // join the entries with a hyphen
    var carttix = arraytix.join('-');

    // append your elements; jquery doesn't need you to close your tags
    var $form = $('#finalSubmit'); // again, no element type in selector
    // chain calls where you can
    $form 
        .append('<input name="cart" value="'+carttix+'">')
        .append('<input name="versand" value="'+$("#item_vat_1").val()+'">')
        .append('<input name="barzahlung" value="'+checkboxStatus+'">');

    // This is always 0 -- are you setting it somewhere else?
    if (checkboxStatus == 0) { 
         // serializeArray is only supposed to work on actual input elements
         // adjusted below:
         var fields = $("fieldset.customer :input").serializeArray();
         console.log("before each");
         // Make sure fields is in the format you're expecting
         console.log(fields);
         $.each(fields, function() {
             $form.append( '<input name="'+this.name+'" value="'+this.value+'">');
             console.log("loop");
         });
         console.log("after jquery.each");
    }

    //$form.submit();
}

I changed your alerts to console.log. You can inspect the actual elements in a proper debugging tool like Firebug or Chrome's console (hit F12 in most browsers to open their consoles).