Jquery form no submission to IE7 and IE8

Question

I am currently using this plugin to send images as an attachment to an email as well as some other json data, and i am getting the proper results. But just not from IE7 and IE8, its not sending at all.. I have no idea why..

Suggestions anyone?

Here's the jsFiddle.

and then the javascript:

var g_counter = 1;
var dependant = ["dependant"];
var group;
var upload_input_passport = ["upload-passport-1"];
var upload_input_id = ["upload-id-1"];
var surname_input_groups = ["surname-group-1"];
var input_groups = ["group-1"];
var name_fields=[0];
var id_upload_input = "<input class='id_up'   name='myfile[]' type='file'  />";
var passport_upload_input = "<input class='passport_up'   name='myfile[]' type='file' />";
var surname_input = "<input id='surname' class='surname' name='surname' type='text' data-error='Surname error' />";
//Dependants Inputs
jQuery(document).ready(function(e) {
    jQuery(name_fields).each(function() {
        jQuery(id_upload_input).appendTo('#upload-id-1');
    });
    jQuery(name_fields).each(function() {
        jQuery(passport_upload_input).appendTo('#upload-passport-1');
    });
    jQuery(name_fields).each(function() {
        jQuery(surname_input).appendTo('#surname-group-1');
    });

    jQuery('#clone').click(function(e) {
        e.preventDefault();
        clone_dependant();
    });

    function clone_dependant() {
        var oldId = g_counter;
        g_counter++;
        currentdep ='dependant-'+g_counter;
        var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', currentdep);
        var id_up_newDiv = 'upload-id-'+ g_counter;
        var passport_up_newDiv = 'upload-passport-'+ g_counter;
        var surname_newDiv = 'surname-group-'+ g_counter;
        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#upload-id-1').attr('id',"upload-id-" + g_counter );
        $clonedDiv.find('#upload-passport-1').attr('id',"upload-passport-" + g_counter );
        $clonedDiv.find('#surname-group-1').attr('id',"surname-group-" + g_counter );
        $clonedDiv.find('#dep_num').html(g_counter);
        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input[type="file"]').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);
        upload_input_id.push(id_up_newDiv);
        upload_input_passport.push(passport_up_newDiv);
        surname_input_groups.push(surname_newDiv);
    }

var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){   
    result['dependants'] = [];
    jQuery('div[class*="dependant"]').each(function(k, v){
        dep_counter++
        dependants = {};
        dependants['surname'] = jQuery(v).find('.surname').val();
        dependants['id_upload'] = jQuery(v).find('.id_up').val();
        dependants['passport_upload'] = jQuery(v).find('.passport_up').val();
        result['dependants'].push(dependants);
    });

};
jQuery('#submit').click(function(){
    getValues();
    var jsonData = JSON.stringify(result);  
    (function() {
    var bar = jQuery('.bar');
    var percent = jQuery('.percent');
    var status = jQuery('#status');

    jQuery('form').ajaxForm({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        //iframe: true,
        data: {parameters: jsonData},
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.css("width", percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.css("width", percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    }); 

    })();   
});
});

and the HTML:

<form enctype="multipart/form-data">
    <div class="dependant-1" id="dependant-1">
        <div class="title">dependant <span id="dep_num">1</span>:</div>
        <div class="block_wrap left border_right">
                <div class="block">'surname'<div id="surname-group-1" class="right"></div></div>
        </div>
        <div class="block_wrap left border_right no_b">
             <div class="block">dep_passport<div id="upload-id-1" class="right"></div>
        </div>
       </div>

       <div class="block_wrap right no_b">
       <div class="block">dep_id<div id="upload-passport-1" class="right"></div>
       </div>
            </div>
    </div>
    <button id="submit">sub</button>
</form>
<button id="clone">duplicate</button>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

and finally the PHP used to send it:

<?php /*?><?php
$newdirectory = "tmp";
$count = 0;
foreach ($_FILES['myfile']['name'] as $filename)
{
    $temp = $_FILES['myfile']['tmp_name'][$count];
    move_uploaded_file($temp, $newdirectory . '/' . $filename);
    $count++;
}
print_r($_FILES);
?><?php */?>
<?
    function printMember($member) {
        foreach($member as $key=>$value) {
            //Fill the aux string first
            $str.= "$key : $value <br />";
        }
        //string that will be added to $msg variable inside the loop
        return $str;
    }

    $json = $_POST['parameters'];
    $json_string = stripslashes($json);
    $data = json_decode($json_string, true);
    $depCount = count($data["dependants"]);

    $msg .= "<h2>Main member data:</h2>";
    $msg .= printMember($data["mainmember"]);
    $msg .= "<h2>There are $depCount Dependants</h2>";

    foreach ($data["dependants"] as $index => $dependant) {
       $msg .= "<h2>Dependant $index</h2>";
       $msg .= printMember($dependant);
    }

    $strTo = "chante@jamfactory.co.za";
    $strSubject = "Image Testing";
    $strMessage = nl2br($msg);

    //*** Uniqid Session ***//
    $strSid = md5(uniqid(time()));

    $strHeader = "";
    $strHeader .= "From: Dawid<test@testme.co.za>\nReply-To:test@testme.co.za";

    $strHeader .= "MIME-Version: 1.0\n";
    $strHeader .= "Content-Type: multipart/mixed; boundary=\"".$strSid."\"\n\n";
    $strHeader .= "This is a multi-part message in MIME format.\n";

    $strHeader .= "--".$strSid."\n";
    $strHeader .= "Content-type: text/html; charset=utf-8\n";
    $strHeader .= "Content-Transfer-Encoding: 7bit\n\n";
    $strHeader .= $strMessage."\n\n";

    //*** Attachment ***//
    $count = 0;
    foreach($_FILES['myfile']['name'] as $filename)
    {
        $temp = $_FILES['myfile']['tmp_name'][$count];
        $strFilesName = $filename;
        $strContent = chunk_split(base64_encode(file_get_contents($temp))); 
        $strHeader .= "--".$strSid."\n";
        $strHeader .= "Content-Type: application/octet-stream; name=\"".$strFilesName."\"\n"; 
        $strHeader .= "Content-Transfer-Encoding: base64\n";
        $strHeader .= "Content-Disposition: attachment; filename=\"".$strFilesName."\"\n\n";
        $strHeader .= $strContent."\n\n";
        $count++;
    }


    $flgSend = @mail($strTo,$strSubject,null,$strHeader);  // @ = No Show Error //

    if($flgSend)
    {
        echo "Mail send completed.";
    }
    else
    {
        echo "Cannot send mail.";
    }
?>

Any help greatly appreciated :)..

scunliffe · Answer 1 · 2013-01-31T18:12:48.210

0

The behavior of the jQuery .clone() method changed in jQuery (1.6.4+) such that older IE versions will have issues.

In 1.6.4 jQuery changed their internal behavior to use the JavaScript .cloneNode() method which older IE versions have issue with.

For IE7 and below, this "hack" seems to get around the issue. http://jsfiddle.net/GZffK/3/

The key part is to use the old jQuery way... using the .outerHTML property when you encounter IE7.

    if($.browser.msie && (parseInt($.browser.version) < 8)){
        /*
            Dirty ugly hack to overcome bugs in IE with .cloneNode() method
            that is now used in jQuery 1.6.4+
        */
        var copiedDOMStr = $('#orig_test_0').get(0).outerHTML;    
        var copiedDOM = $(copiedDOMStr);    
    } else {
        var copiedDOM = $('#orig_test_0').clone();
    }

edited Jan 31 '13 at 18:12

answered Jan 31 '13 at 18:03

scunliffe

62,582
25
126
161

But its not the clone-ing that's the issue.. its that it doesn't send what-so-ever... – Jan 31 '13 at 18:12
your $clonedDiv will have issues with the ID attributes because older IE doesn't properly split the source from the copy... and any attempt to manipulate the ID will fail as it updates both the original and the clone... and having 2 elements with the same ID is both invalid and majorly error prone when you go to find/lookup the element later. If you play with the jsFiddle link I added, you can see that if you don't do the workaround, older IE shows the same ID over and over, and over. – scunliffe Jan 31 '13 at 18:21
1

Thank you so much for your troubles, I will experiment with this and send you feedback ASAP :) – Jan 31 '13 at 18:23

score 0 · Accepted Answer · answered Feb 04 '13 at 11:53

solved the issue...

It was as simple as adding method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php" and then also type="submit" to the submit function and it works perfectly in IE 7 and IE 8.

thanks for eveyone's help...

Jquery form no submission to IE7 and IE8

2 Answers2

Linked