Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jQuery function/plugin - Loop through JSON object and updated HTML form elements

Posted on 2011-02-17
9
Medium Priority
?
1,108 Views
Last Modified: 2012-05-11
I am having a JSON string be serialized after form submit. I have it returning this format: http://tobiascohen.com/files/stackoverflow/jquery-form-serializeObject.html - submit the form

I am trying to get a function where I can pass the JSON object and run it through a loop to update:

- inputs
- select
- radio
- check

if present. Instead of listing out each line of code for every input. If I make it run through a loop I can keep it dynamic, save code and use it for other areas.

Any ideas?

Thanks.
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
9 Comments
 
LVL 27

Expert Comment

by:BigRat
ID: 34917911
I'm surprised that there isn't something like this already available. However I have something in which is similar to XML and it goes like this :-

function ratlUpdateForm(xml) {
   var dataNodes = xml.selectNodes('/result/data/*');
   for(var i=0; i<dataNodes.length; i++) {
      var node = dataNodes[i];
      var nodeName = node.nodeName;
      var docNode = document.getElementById(nodeName);
      if(docNode!=null) 
         var typeName = (docNode.type?docNode.type:docNode.tagName);
         if(typeName=='checkbox') {
            // check the box
            ratSetCheckBox(docNode,node.text);
         } else if(typeName=='radio') {
            ratSetRadioValue(docNode,node.text);
         } else if(typeName=='select') {
            ratSetSelectValue(docNode,node.text);
         } else if(typeName=='DIV') {
            docNode.innerHTML=node.text;
         } else if(typeName=='SPAN') {
            docNode.innerText=node.text;
         } else if(typeName=='IMG') {
            docNode.src=node.text;
         } else {
            // text box types (text/hidden/textarea/password)
            docNode.value=node.text;
            if(docNode.onblur) docNode.onblur();
         }
   }
}

The auxillary functions are :-

function ratSetCheckBox(boxNode,text) {
   boxNode.checked=(text=='1');
}

function ratSetSelectValue(selectObj,newValue) {
   for(var i=0;i<selectObj.options.length;i++) {
      if (newValue==selectObj.options[i].value) {
         selectObj.options[i].selected=true;
      }
   }
}

function ratSetRadioValue(radioObj, newValue) {
	if(!radioObj) return;
	var radioLength = radioObj.length;
	if(radioLength == undefined) {
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()) {
			radioObj[i].checked = true;
		}
	}
}

so I hope that will be a start. You just need to take the JSON string and turn it into a list of name/value pairs (in an array) and loop through it doing the document.getElementById().

Open in new window

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 34918273

I think you need a function like this:

function loadForm( jsonString ) {
  var formData;
  eval( "formData = " + jsonString );
  for ( var member in formData ) {
    var formField = $("form>*[name='" + member + "']");
    switch ( formField.attr("type") ) {
      case "text":
      case "textarea":
      case "select-one":
        formField.val( formData[member] );
      break;
      case "radio":
      case "checkbox":
        $(formField).each( function() {
          $(this).attr( { checked: ( $(this).val() == formData[member] ) } );
        });
      break;
      default:
        alert( formField.attr("type") );
      break;
    }
  }
}

Open in new window


Here's a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26828499.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script>
<script type="text/javascript">

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
 
jQuery(document).ready( function () {

  $('form').submit(function() {
    alert($.toJSON($('form').serializeObject()));
    return false;
  });

  $("#load").click( function() {
    loadForm( $("#source").val() );
  });

});

function loadForm( jsonString ) {
  var formData;
  eval( "formData = " + jsonString );
  for ( var member in formData ) {
    var formField = $("form>*[name='" + member + "']");
    switch ( formField.attr("type") ) {
      case "text":
      case "textarea":
      case "select-one":
        formField.val( formData[member] );
      break;
      case "radio":
      case "checkbox":
        $(formField).each( function() {
          $(this).attr( { checked: ( $(this).val() == formData[member] ) } );
        });
      break;
      default:
        alert( formField.attr("type") );
      break;
    }
  }
}

</script>
<body>

<textarea id="source" cols="100" rows="3">
{"Fname": "First", "Lname": "Last", "gender": "Male", "food[]": "Pizza", "quote": "Remember the Alamo", "education": "College", "TofD": "Night"}
</textarea>
<input id="load" type="button" value="Load" />

<form action="" method="post"> <br/>
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<p><input type="submit" /></p>
</form>
 
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34918335
Proculopsis: going to go try this out, I will let you know how it works out.

Thanks for this.
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34920573
This is what I have now
 
function loadForm(saveObjectName, formNameSel) {
    console.log("object: " + saveObjectName);
    for (var member in saveObjectName) {
        var formField = $(""+formNameSel+">*[name='" + member + "']");
        console.log(formField);
        switch (formField.attr("type")) {
            case "text":
            case "textarea":
            case "select-one":
                formField.val(formData[member]);
                break;
            case "radio":
            case "checkbox":
                $(formField).each(function () {
                    $(this).attr({ checked: ($(this).val() == formData[member]) });
                });
                break;
            default:
                alert(formField.attr("type"));
                break;
        }
    }
}

Open in new window


When i debug and view the selector inside the for loop. It returns the # for MEMBER not the name of the input/josn
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34920695
I have this that runs on save:

    saveTemp = $("form.validateDialog").serializeObject();
    saveObjectName.push(saveTemp);

Does that look right take the serialized data and push to the object saveObjectName (this is passed as a parameter in a function)
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34920810
And this alert returns undefined:

alert(formField.attr("type"));
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34923834

Need to see the json string and html to fine tune this solution.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34938170
I was able to work with this and tweak the changes, solid function! I am working on a similar format but slightly different. If I paste could you tell me quickly if it would work for a string similar to this if not, I  can open a new question if you would prefer. Similar concept but different string.

String:
 
var invoice = {
        "Importer": "123456",

        "ImporterContact": {
            "Name": "test_importer_contact"
        },
        "InvoiceNo": "5436345",

        "InvoiceType": "L",
        "Supplier": {
            "Name": "test_supplier_name",

            "Street1": "test_supplier_street1",
            "Street2": "test_supplier_street2",

            "City": "test_supplier_city",
            "State": "test_supplier_state",

            "PostCode": "test_supplier_postcode",
            "Country": "test_supplier_country",

            "Phone": "test_supplier_phone",
            "IRSNo": "test_supplier_irs_no",

            "MID": "test_supplier_mid",
            "Type": 0,
            "PNCEmail": "test_supplier_pncemail"

        },
        "Exporter": {
            "Name": "test_exporter_name",
            "Street1": "test_exporter_street1",

            "Street2": "test_exporter_street2",
            "City": "test_exporter_city",

            "State": "test_exporter_state",
            "PostCode": "test_exporter_postcode",

            "Country": "test_exporter_country",
            "Phone": "test_exporter_phone",

            "IRSNo": "test_exporter_irs_no",
            "MID": "test_exporter_mid",

            "Type": 0,
            "PNCEmail": "test_exporter_pncemail"
        },
        "UCons": {

            "Name": "test_ucons_name",
            "Street1": "test_ucons_street1",

            "Street2": "test_ucons_street2",
            "City": "test_ucons_city",

            "State": "test_ucons_state",
            "PostCode": "test_ucons_postcode",

            "Country": "test_ucons_country",
            "Phone": "test_ucons_phone",

            "IRSNo": "test_ucons_irs_no",
            "MID": "test_ucons_mid",

            "Type": 0,
            "PNCEmail": "test_ucons_pncemail"
        },
        "Buyer": {

            "Name": "test_buyer_name",
            "Street1": "test_buyer_street1",

            "Street2": "test_buyer_street2",
            "City": "test_buyer_city",

            "State": "test_buyer_state",
            "PostCode": "test_buyer_postcode",

            "Country": "test_buyer_country",
            "Phone": "test_buyer_phone",

            "IRSNo": "test_buyer_irs_no",
            "MID": "test_buyer_mid",

            "Type": 0,
            "PNCEmail": "test_buyer_pncemail"
        },
        "ReleasePort": "test_release_port",

        "InvoiceDate": "11/24/2010",
        "Currency": "US",

        "EntryNo": "235",
        "TransType": "Consignment",

        "ReferenceNumber": [
        "3425345",
        "43568433",
        "3453456"


    ],
        "PaymentTerms": "Basics",

        "TotalAmount": 2500.75,
        "GrossWeight": 245.76,
        "BillLading": [
        {

            "BillLadingNo": "test_bill_lading_no1",
            "BillLadingQty": 35,

            "BillLadingUOM": "1N",
            "BillLadingSCAC": "test_1234",

            "BillLadingType": "M"
        },
        {
            "BillLadingNo": "test_bill_lading_no2",

            "BillLadingQty": 10,
            "BillLadingUOM": "1N",
            "BillLadingSCAC": "test_1056",

            "BillLadingType": "M"
        }
    ],
        "FeePercent": 92,
        "DiscountValue": 175.00,

        "FreightCurrency": "United States of America",
        "DiscountCurrency": "United States of America",
        "InsuranceCurrency": "United States of America",

        "InsuranceCharges": 25.00,
        "Freight": 550.00,
        "ArrivalDate": "11/30/2010",

        "SCACCode": "ABCD",
        "TotalUnitsShipped": 17,
        "DeliveryTerms": "Cost Ins. and Freight to Dest.",

        "BrokerProductDesc": "test_broker_product_descripton",
        "TotalDue": 2800.00,

        "UOM": "Bale",
        "RelatedParty": "Y",

        "CountryOfExport": "United State of America",
        "ExportDate": "10/16/2010",

        "Charges": 400.00,
        "RelatedDoc": [
        { "Id": "2626AAG", "Number": "2462442" },

        { "Id": "24627AH", "Number": "8835833" },

    ],
        "VesselName": "test_vessel_name",
        "VesselNo": "2364",

        "PortLading": "test_port_lading",
        "ContainerNum": [
        "235265233",
        "623663666",
        "823826262"
    ],
        "LocationQualifier": "test_location_qualifier",

        "LocationIndicator": "test_location_indicator",
        "LocationCode": "test_location_code",

        "USCLocation": "test_usc_location",
        "MarksNumbers": "test_marks_numbers",

        "PaymentBy": "Shipper",
        "Insured": "Y",

        "IT": [
        {
            "Date": "11/11/2010",
            "Number": "test_it_number11451",

            "PortUnlading": "test_port_unlading11"
        },
        {
            "Date": "11/10/2010",

            "Number": "test_it_number2",
            "PortUnlading": "test_port_unlading2"

        }
    ],
        "DateSubmitted": "10/22/2010",
        "DateCreated": "10/22/2010",

        "UserName": "test_username",
        "PNCImage": "",

        "Template": false,
        "LineItem": [

    ]
    };

Open in new window


How I am currently loading the data from the string above:
 
// Load supplier data
    if (invoice.Supplier.length != 0) {
        var supplier_display = invoice.Supplier;
        var supplier_load_input = '';
        supplier_load_input = supplier_display.Name + " - " + supplier_display.Street1 + " - " + supplier_display.Street2 + " - " + supplier_display.City + " - " + supplier_display.State + " - " + supplier_display.PostCode;
        $("input.supplier_party").val(supplier_load_input);
        $("div.supplier_load_box").show();

        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_name").html(supplier_display.Name);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_street1").html(supplier_display.Street1);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_street2").html(supplier_display.Street2);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_city").html(supplier_display.City);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_state").html(supplier_display.State);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_post_code").html(supplier_display.PostCode);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_country").html(supplier_display.Country);
        $("#invoice_no_" + invNo + " .supplier_load_box .ship_party_phone").html(supplier_display.Phone);
    }

    // Load exporter data
    if (invoice.Exporter.length != 0) {
        var exporter_display = invoice.Exporter;
        var exporter_load_input = '';
        exporter_load_input = exporter_display.Name + " - " + exporter_display.Street1 + " - " + exporter_display.Street2 + " - " + exporter_display.City + " - " + exporter_display.State + " - " + exporter_display.PostCode;
        $("input.exporter_party").val(exporter_load_input);
        $("div.exporter_load_box").show();

        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_name").html(exporter_display.Name);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_street1").html(exporter_display.Street1);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_street2").html(exporter_display.Street2);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_city").html(exporter_display.City);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_state").html(exporter_display.State);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_post_code").html(exporter_display.PostCode);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_country").html(exporter_display.Country);
        $("#invoice_no_" + invNo + " .exporter_load_box .ship_party_phone").html(exporter_display.Phone);
    }
    // Load consginee data
    if (invoice.UCons.length != 0) {
        var ucons_display = invoice.UCons;
        var ucons_load_input = '';
        ucons_load_input = ucons_display.Name + " - " + ucons_display.Street1 + " - " + ucons_display.Street2 + " - " + ucons_display.City + " - " + ucons_display.State + " - " + ucons_display.PostCode;
        $("input.consignee_party").val(ucons_load_input);
        $("div.consignee_load_box").show();

        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_name").html(ucons_display.Name);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_street1").html(ucons_display.Street1);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_street2").html(ucons_display.Street2);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_city").html(ucons_display.City);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_state").html(ucons_display.State);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_post_code").html(ucons_display.PostCode);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_country").html(ucons_display.Country);
        $("#invoice_no_" + invNo + " .consignee_load_box .ship_party_phone").html(ucons_display.Phone);
    }
    // Load buyer data
    if (invoice.Buyer.length != 0) {
        var buyer_display = invoice.Buyer;
        var buyer_load_input = '';
        buyer_load_input = buyer_display.Name + " - " + buyer_display.Street1 + " - " + buyer_display.Street2 + " - " + buyer_display.City + " - " + buyer_display.State + " - " + buyer_display.PostCode;
        $("input.buyer_party").val(buyer_load_input);
        $("div.buyer_load_box").show();

        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_name").html(buyer_display.Name);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_street1").html(buyer_display.Street1);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_street2").html(buyer_display.Street2);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_city").html(buyer_display.City);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_state").html(buyer_display.State);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_post_code").html(buyer_display.PostCode);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_country").html(buyer_display.Country);
        $("#invoice_no_" + invNo + " .buyer_load_box .ship_party_phone").html(buyer_display.Phone);
    }
    $("#invoice_no_" + invNo + " .invoice_no").val(invoice.InvoiceNo);
    $(".entry_filing_type option[value=" + invoice.InvoiceType + "]").attr("selected", "selected");
    $("#ImporterId").val(invoice.Importer);
    $("#invoice_no_" + invNo + " .discount_currency").val(invoice.DiscountCurrency);
    $("#invoice_no_" + invNo + " .discount_amount").val(invoice.DiscountValue);
    $("#invoice_no_" + invNo + " .insurance_currency").val(invoice.InsuranceCurrency);
    $("#invoice_no_" + invNo + " .insurance").val(invoice.InsuranceCharges);
    $("#invoice_no_" + invNo + " .freight").val(invoice.Freight);
    $("#invoice_no_" + invNo + " .arrival_date").val(invoice.ArrivalDate);
    $("#invoice_no_" + invNo + " .total_units_shipped").val(invoice.TotalUnitsShipped);
    $("#invoice_no_" + invNo + " .delivery_terms option[value='" + invoice.DeliveryTerms + "']").attr("selected", "selected");

    if (invoice.RelatedParty == "Y") {
        $("#invoice_no_" + invNo + " input[name=related_parties]").filter("[value='Y']").attr("checked", "checked");
    } else {
        $("#invoice_no_" + invNo + " input[name=related_parties]").filter("[value='N']").attr("checked", false);

    }

    $("#invoice_no_" + invNo + " .units_of_measure option[value=" + invoice.UOM + "]").attr("selected", "selected");
    $("#invoice_no_" + invNo + " .country_of_export").val(invoice.CountryOfExport);
    $("#invoice_no_" + invNo + " .export_date").val(invoice.ExportDate);
    $("#invoice_no_" + invNo + " .vessel_name").val(invoice.VesselName);
    $("#invoice_no_" + invNo + " .vessel_flight_no").val(invoice.VesselNo);
    $("#invoice_no_" + invNo + " .port_lading").val(invoice.PortLading);
    $("#invoice_no_" + invNo + " .usc_location").val(invoice.USCLocation);
    $("#invoice_no_" + invNo + " .payment_by option[value=" + invoice.PaymentBy + "]").attr("selected", "selected");

    if (invoice.Insured == "Y") {
        $("#invoice_no_" + invNo + " input[name=insured]").filter("[value='Y']").attr("checked", "checked");
    } else {
        $("#invoice_no_" + invNo + " input[name=insured]").filter("[value='N']").attr("checked", false);

    }

    $("#invoice_no_" + invNo + " .release_port").val(invoice.ReleasePort);
    $("#invoice_no_" + invNo + " .invoice_date").val(invoice.InvoiceDate);
    $("#invoice_no_" + invNo + " .entry_no").val(invoice.EntryNo);
    $("#invoice_no_" + invNo + " .currency").val(invoice.Currency);
    $("#invoice_no_" + invNo + " .invoice_type option[value=" + invoice.TransType + "]").attr("selected", "selected");
    $("#invoice_no_" + invNo + " .payment_terms option[value=" + invoice.PaymentTerms + "]").attr("selected", "selected");
    $("#invoice_no_" + invNo + " .gross_weight").val(invoice.GrossWeight);
    $("#invoice_no_" + invNo + " .delivery_location").val(invoice.LocationCode);
    $("#invoice_no_" + invNo + " .manifest_description").val(invoice.BrokerProductDesc);
    $("#invoice_no_" + invNo + " .freight_to_border").val(invoice.Charges);
    $("#invoice_no_" + invNo + " .country_export").val(invoice.CountryOfExport);
    $("#invoice_no_" + invNo + " .units_shipped").val(invoice.TotalUnitsShipped);
    $("#invoice_no_" + invNo + " .freight_currency").val(invoice.FreightCurrency);
    $("#invoice_no_" + invNo + " .location_code").val(invoice.LocationCode);

    if ((invoice.ReferenceNumber != undefined) && (invoice.ReferenceNumber != null) && (invoice.ReferenceNumber.length > 0)) {
        if (invoice.ReferenceNumber.length == 1) {
            $("#invoice_no_" + invNo + " .ref_no").val(invoice.ReferenceNumber[0]);
            $("#invoice_no_" + invNo + " .ref_no").show();
            $('.refDisplayBox').hide();
        } else {
            $("#invoice_no_" + invNo + " .ref_no").hide();
            $('.refDisplayBox').show();

            var dropDown = $('.refDisplayBox')[0];
            dropDown.options.length = 0;

            for (var i = 0; i < invoice.ReferenceNumber.length; i++) {
                var referenceNumber = invoice.ReferenceNumber[i];
                dropDown.options[dropDown.options.length] = new Option(referenceNumber, referenceNumber);
            }
        }

    }
    if ((invoice.RelatedDoc != undefined) && (invoice.RelatedDoc != null) && (invoice.RelatedDoc.length > 0)) {
        if (invoice.RelatedDoc.length == 1) {
            $('.mrdDisplayBox').hide();
        } else {
            //$("#invoice_no_"+invNo+" .ref_no").hide();
            $('.mrdDisplayBox').show();

            var mrdDropDown = $('.mrdDisplayBox')[0];
            mrdDropDown.options.length = 0;

            for (var i = 0; i < invoice.RelatedDoc.length; i++) {
                var reldatedDoc = invoice.RelatedDoc[i];
                mrdDropDown.options[mrdDropDown.options.length] = new Option(invoice.RelatedDoc[i].Id + " - " + invoice.RelatedDoc[i].Number, invoice.RelatedDoc[i].Number);
            }
        }
    }
    if ((invoice.IT != undefined) && (invoice.IT != null) && (invoice.IT.length > 0)) {
        if (invoice.IT.length == 1) {
            $('.itDisplayBox').hide();
        } else {
            $('.itDisplayBox').show();

            var itDropDown = $('.itDisplayBox')[0];
            itDropDown.options.length = 0;

            for (var i = 0; i < invoice.IT.length; i++) {
                var itBox = invoice.IT[i];
                itDropDown.options[itDropDown.options.length] = new Option(invoice.IT[i].Number + " - " + invoice.IT[i].Date + " - " + invoice.IT[i].PortUnlading, invoice.IT[i].Number);
            }
        }
    }
    if ((invoice.BillLading != undefined) && (invoice.BillLading != null) && (invoice.BillLading.length > 0)) {
        if (invoice.BillLading.length == 1) {
            $('.bolDisplayBox').hide();
        }
        else {
            //$("#invoice_no_"+invNo+" .ref_no").hide();
            $('.bolDisplayBox').show();

            var bolDropDown = $('.bolDisplayBox')[0];
            bolDropDown.options.length = 0;

            for (var i = 0; i < invoice.BillLading.length; i++) {
                var bolBox = invoice.BillLading[i];
                bolDropDown.options[bolDropDown.options.length] = new Option(invoice.BillLading[i].BillLadingType + " - " + invoice.BillLading[i].BillLadingSCAC + " - " + invoice.BillLading[i].BillLadingQty + " - " + invoice.BillLading[i].BillLadingUOM, invoice.BillLading[i].BillLadingSCAC);
            }
        }

    }
    if ((invoice.ContainerNum != undefined) && (invoice.ContainerNum != null) && (invoice.ContainerNum.length > 0)) {
        if (invoice.ContainerNum.length == 1) {
            $('.conDisplayBox').hide();
        } else {
            $('.conDisplayBox').show();
            var conDropDown = $('.conDisplayBox')[0];
            conDropDown.options.length = 0;
            for (var i = 0; i < invoice.ContainerNum.length; i++) {
                var containerNumber = invoice.ContainerNum[i];
                conDropDown.options[conDropDown.options.length] = new Option(containerNumber, containerNumber);
            }
        }
    }

Open in new window


The conditionals at the bottom of the page LOAD data in to a SELECT box that is type multiple so I need to add each option for every line in the JSON.

Thanks again.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 34938225
I have a shot of the fields I am talking about

- set val in of input text
- set value of selected item in a select
- drop in all items in to a select type multiple (example: related documents)

Will the function you made be similar, judging by the fields posted and string format
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question