Custom function for serialization of form inputs (and selects)

Question

I didn't find an equivalent of .serialize() for vanilla javascript, so I rolled my own.

    function uzim_vred(phpdoc,parent_id){
    
    var name = "";
    var val = "";
    var str = phpdoc+"?,";
    var len = ($("#"+parent_id+" [name]").length);
    var i = 0;
    
    $("#"+parent_id+" [name]").each(function(){
        
        i++;
        name = $(this).attr('name');
        val = $(this).val();

        str += name+"="+val;
        
        if(i<len){
            str += "&,"
        }
    
    });
    
    i = 0;
    var elems = str.split(",");

    str = "";
    while(i<=len){
        str += elems[i];
        i++
    }
    
    
        var xhttp = new XMLHttpRequest();
    
        xhttp.onreadystatechange = function() {
    
            if((document.getElementById("raport")!=undefined || document.getElementById("raport")!=null) && this.readyState == 4 && this.status == 200){
                document.getElementById("raport").innerHTML = this.responseText;
            }
     
        };

        xhttp.open("GET", str, false);      
        xhttp.send();
    
}

How to envoke it:

<button type="button" onclick="uzim_vred('yourPHPscript.php',$(this).parent().attr('id'))">Send</button>

First argument is a path to and name of php script, second is used for id of form element from whom you want to "serialize" values.

Answer 1

You are not really implementing in plain JavaScript in that you are using jQuery inside the function. This seems to be an odd choice. Are you using jQuery or not? You should make a decision. If you are using jQuery, then I don’t know why this function would exist at all.

The function name itself is meaningless and does not at all convey what the function does.

You are not url encoding your query string.

You are not handling case where your asynchronous fails to return 200 response.

You are using loop counters where you don’t really need to.

It makes no sense how you build a query string then split it apart and then reassemble it.

Code style is problematic:

• inconsistent indentation
• lines of code that are too long

Answer 2

$("#"+parent_id+" [name]")

If you are using jQuery, then why not use the serialize method? I think that is what Mike was suggesting.

Answer 3

Revised code as per remarks of Mike Brant and 200_success:

• Renamed function for easier understanding what it does.
• Improved indentation.
• Added encoding if you send data to remote location.
• Use this keyword instead of using jQuery to invoke parent element id.

function serialization(phpdoc,me){

    var parent_id = me.parentNode.id
    var name = "";
    var val = "";
    var str = phpdoc+"?,";
    var i = 0;
        
    var net = document.getElementById(parent_id).querySelectorAll("#"+parent_id+" [name]");
    var len = document.getElementById(parent_id).length-1;
        
    while(i<len) {
            
        name = net[i].getAttribute("name");
        val = net[i].value;
           
        i++
        str += name+"="+val;
            
        if(i<len){
            str += "&,"
        }
            
    }
        
    i = 0;
    var elems = str.split(",");

    str = "";
    while(i<=len){
        str += elems[i];
        i++
    }
    str = encodeURI(str);
    
    var xhttp = new XMLHttpRequest();
        
    xhttp.onreadystatechange = function() {
        
        if((document.getElementById("raport")!=undefined || document.getElementById("raport")!=null) && this.readyState == 4 && this.status == 200){
            document.getElementById("raport").innerHTML = this.responseText;
        }
         
    };

    xhttp.open("GET", str, false);      
    xhttp.send();

}

And how to invoke it:

<button type="button" onclick="serialize('yourPHPscript.php',this)">Send</button>