Set/Change Column(s) value on new form based on Lookup Column

Nov 14, 2013 at 7:08 PM
Hi there

We are using spservices extensively but mostly out of the box functions. What I want to implement is -
Say, there is a lookup column "Customer" in our Orders list which looks up to title column in "Customers" List. In the "Customers" list we have other fields such as Address, phone number, email etc.

So, we want to implement a feature on the Orders New form where , when someone selects a customer, it automatically gets the Address, phone number, email and fills it onto the New Form in the respective columns. Upon changing the customer selection, it should change other values too while remaining on the new form.

Any way to do this? If someone can post a code with an example list, I can than adapt the code to my needs.

Cheers
Sid
Coordinator
Nov 14, 2013 at 7:11 PM
Sid:

SPDisplayRelatedInfo does something similar to what you want. You could either use it and add you own logic into the completefunc or based your own code on how it works.

M.
Nov 14, 2013 at 7:18 PM
Hi Marc

Thank you for quick reply. I am trying to learn jQuery and reading your other blogs/articles but do need a bit of kickstart. I figured that SPDisplayRelatedInfo is what will help me but how do I manipulate/change it to not display but rather fill in stuff for me. I presume, I need to parse the returned data in the completefunc? Does SPDisplayRelatedInfo return the actual column display names or static names?
A small example with a bit of code would help.
Nov 14, 2013 at 8:48 PM
Edited Nov 14, 2013 at 8:52 PM
Ok, after doing a bit of reading, here is a test code I built up and nothing happens. We are using SP Foundation 2013 so, not sure where the issue is. It does not even display the columns.
<script type="text/javascript" src="../../Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.SPServices-2013.02ALPHA3.js"></script>


<script type="text/javascript">

jQuery(document).ready(function($){
$().SPServices.SPDisplayRelatedInfo({       
               columnName: "Customer", 
               relatedList: "{DA112625-44A8-453F-B5D6-A7F5B0531D6E}",
               relatedListColumn: "Title",
               relatedColumns: ["Address", "Customer_x0020_Contact", "Contact_x0020_Phone", "Contact_x0020_E_x002d_Mail"],
               displayFormat: "table", 
        matchOnId: true,
        completefunc: formfill,
               debug: true
});

function formfill() {
    var value1 = $("input[title='"SPDisplayRelatedInfo_" + Customer_x0020_Contact']").val();
    $("input[title='Customer Contact']").val("value1");
}

</script>
Nov 20, 2013 at 6:48 PM
Alright, I managed to get it working using GetListItems function. Below is the code I used.
<script type="text/javascript" src="../../Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.SPServices-2013.02ALPHA3.js"></script>



<script type="text/javascript">

$(document).ready(function() {

$("select[title='Customer']").change(function () {

var CustomerID = $("select[title='Customer']").val();

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "{DA112625-44A8-453F-B5D6-A7F5B0531D6E}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Customer_x0020_Contact' /><FieldRef Name='Contact_x0020_Phone' /><FieldRef Name='Contact_x0020_E_x002d_Mail' /><FieldRef Name='Address' /></ViewFields>",

    CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'>" + CustomerID + "</Value></Eq></Where></Query>",

    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var CustomerName = $(this).attr("ows_Title");
        var CustomerContact = $(this).attr("ows_Customer_x0020_Contact");
        var CustomerPhone = $(this).attr("ows_Contact_x0020_Phone");
        var CustomerEMail = $(this).attr("ows_Contact_x0020_E_x002d_Mail");
        var CustomerAddress = $(this).attr("ows_Address");
        $("input[title='Customer Contact']").val(CustomerContact);
        $("input[title='Contact Phone']").val(CustomerPhone);
        $("input[title='Contact E-Mail']").val(CustomerEMail);
        $("textarea[title='Delivery Address']").val(CustomerAddress);
         if (CustomerAddress == undefined)
            {
            var liHtml = "<Strong><li>The address details were not found in the system!!</li></Strong>";
            $("#tasksUL").empty().append(liHtml);
            }
         else
            {
            $("#tasksUL").empty();
            }
      });
    }
  });


});

});


</script>
<ul id="tasksUL"/>
Marked as answer by wdtlhelpdesk on 11/20/2013 at 11:50 AM