0

I have an EditForm that I am using JSLink to run some javascript that gets the Content Type and then sets the options in a drop down box according to the Content Type.

This works fine, but now the users want another drop down box to be added and filled with different options depending on what they pick from the first drop down box.

I tried to reload the page from the onchange event of the first drop down but this loses the selected value.

I also tried adding window.location to the onchange event with the url of the page and appending the selected value to the end but this loses all the other values on the form.

Is there a way to reload the page and keep the selected value of the drop down?

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {

var ctxForm = {};
    ctxForm.Templates = {};
    ctxForm.Templates.Fields = {

     'Document_x0020_Type0' : { 'EditForm': setTypeValues },
     'Document_x0020_Tag' : { 'EditForm': setTagValues }

    };


  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);


function setTypeValues(renderCtx) {

    var ctName = renderCtx.CurrentItem.ContentType;  //get current Content Type 

    //get form context for our field
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(renderCtx);

    //local vars:
    var fldName = "cbo_" + formCtx.fieldName;    //used to set id of dropdown
    var fldValue = parseInt(formCtx.fieldValue); //get current value for edit form


    formCtx.registerGetValueCallback(formCtx.fieldName, function () {

    var cbo = document.getElementById(fldName);
    return cbo.options[cbo.selectedIndex].value;
    });

    //return <select> html to replace input control
    var html = [];
    var test = "<select id='" + fldName + "' onChange='location.reload()'"

    html.push(test);

switch (ctName){

case "Document":
default:

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Letter", fldValue));
html.push(getSelectItem("Invoice", fldValue));
html.push(getSelectItem("Company brochure", fldValue));
break;


case "Spreadsheet":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Appraisal", fldValue));
html.push(getSelectItem("Arrears summary", fldValue));
break;

case "Plan":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Heads of terms", fldValue));
html.push(getSelectItem("Lease", fldValue));
break;


}
html.push("</select>");

return html.join('');


}



function setTagValues(renderCtx) {

    var e = document.getElementById("cbo_Document_x0020_Type0");
    var ctName = e.options[e.selectedIndex].text;


    //get form context for our field
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(renderCtx);

    //local vars:
    var fldName = "cbo_" + formCtx.fieldName;    //used to set id of dropdown
    var fldValue = parseInt(formCtx.fieldValue); //get current value for edit form


     formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    var cbo = document.getElementById(fldName);
    return cbo.options[cbo.selectedIndex].value;
    });

     //return <select> html to replace input control
 var html = [];
 html.push("<select id='" + fldName + "'>");

switch (ctName){

case "":
default:

    break;

case "Letter":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("General", fldValue));
html.push(getSelectItem("Insurance", fldValue));
break;

case "Invoice":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Fees", fldValue));
html.push(getSelectItem("Service charge", fldValue));
break;

case "Company brochure":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Re-gear", fldValue));
html.push(getSelectItem("Development", fldValue));
break;


case "Appraisal":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Lettings", fldValue));
html.push(getSelectItem("Dilapidations", fldValue));
break;

case "Arrears summary":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Arrears", fldValue));
html.push(getSelectItem("Residuals, rates, liabilities", fldValue));
break;

case "Heads of terms":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Health and Safety", fldValue));
html.push(getSelectItem("Floor areas", fldValue));
break;

 case "Lease":

html.push(getSelectItem("", fldValue));
html.push(getSelectItem("Lease renewals", fldValue));
html.push(getSelectItem("Rent Review", fldValue));
break;

}
html.push("</select>");

return html.join('');

}


//build <option> tag 
function getSelectItem(value, selValue) {
if (value === selValue) 
    return "<option selected='selected' value='" + value + "'>" + value + "'</option>";
return "<option value='" + value + "'>" + value + "</option>";
}


})();
  • may I ask why you actually need to reload the page? – Hitodama Jun 15 '15 at 11:50
  • Can you paste your code? If you are handling the onchange() event in JavaScript then you may not need to reload the page. – users1100 Jun 15 '15 at 12:36
  • I thought I would need to reload the page to change the options in the 2nd drop down box when the user picks a value in the 1st drop down box, is there a way to change them without loading the page? – Mat Jun 15 '15 at 13:24
  • I've added the code above... – Mat Jun 15 '15 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.