I've been battling to get this work for the last day or so and its driving me up the wall.

Firstly I'm using the 'SPUtility' jQuery scripts which are great to showing or hiding fields depending on conditions which is a requirement of this form I'm writing. So that all works great. The next requirement is that I need to have the save and cancel buttons redirect to pages where the user sees a 'thank-you.aspx' page or if cancel just returns them to the root page.

What I've been finding is the examples out there are all hit and miss for me, the logical thing to do would be to do it with jQuery since its already loaded for the form, I don't write much with jQuery so might just need some help in getting it right. I know there is a foolproof way to redirect the buttons if I use SP Designer and I use this to replace the button

    <input type="button" value="Close" name="gobackbutton2" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={http://portal}')}" />

However I can't use SPUtility with a custom form.. so back to the drawing board.

So my SPutility html page looks like this:

<script type="text/javascript">

// wait for the window to load $(window).load(function () {

document.getElementById("s4-ribbonrow").style.display = "none";

  try {
     var count = 0;
     var fields = SPUtility.GetSPFields();
     var list = "";
     for (var name in fields) {
        if (fields.hasOwnProperty(name)) {
           list += name;
           list += " ("
           list += SPUtility.GetSPField(name).Type;
           list += ")<br/>"
  } catch (e) {
     if (typeof console === 'undefined') {
     } else {

// custom code starts here - AP

var contactField = SPUtility.GetSPField('Contact');

var showOrHideField = function(){ var contactFieldValue = contactField.GetValue();

//window.alert('inside method');        
if(contactFieldValue === 'No'){     
    SPUtility.GetSPField('Contact Method').Hide();
    SPUtility.GetSPField('Contact Info').Hide();
    else {
    SPUtility.ShowSPField('Contact Method');
    SPUtility.ShowSPField('Contact Info');
//  call function


//call function if dropdown changes $(contactField.Dropdown).on('change',showOrHideField);

$("input[id$=SaveItem]").click(function() {
    window.location.href = 'http://www.google.com';


The last bit of jQuery won't even trigger in IE. I've also tried the following:

    var button = $("input[id$=SaveItem]");  
 change redirection behavior  
button.click(function() {  
    var elementName = $(this).attr("name");  
    var aspForm = $("form[id=aspnetForm]");  
    var oldPostbackUrl = aspForm.attr("action");  
    var oldPostbackUrl = aspForm.action;
    var currentSourceValue = GetUrlKeyValue("Source", true, oldPostbackUrl);  
    var newPostbackUrl = oldPostbackUrl.replace(currentSourceValue, "/sites/mysite/DispForm.aspx");  

    if (!PreSaveItem()) return false;  
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(elementName, "", true, "", newPostbackUrl, false, true));  

Which worked for the Save button for me but as soon as I tried to code the Cancel button it stopped that from working. So is there anything I can do here? Open to other suggestions.

1 Answer 1


In the end I just opted for a custom input form in SharePoint designer and ended up writing the jQuery in a CEWP to do the show / hide. I just could not find a way to reliably redirect with jQuery combined with the SPUtility.js

Still SPUtility is a very handy set of js for SharePoint.

jQuery in the end was:

function hideColumn(c) { 
  $(".ms-formlabel h3 nobr").filter(function() { 
    var thisText = $.trim($(this).clone().children().remove().end().text()); 
 //   alert("::" + thisText + "::"); 
    return thisText.indexOf(c) === 0 && thisText.length === c.length; 

function showColumn(c) { 
  $(".ms-formlabel h3 nobr").filter(function() { 
    var thisText = $.trim($(this).clone().children().remove().end().text()); 
 //   alert("::" + thisText + "::"); 
    return thisText.indexOf(c) === 0 && thisText.length === c.length; 

$(document).ready(function() {

  hideColumn("Contact Info"); 
  hideColumn("Contact Method"); 

  $("select[title = 'Contact']").bind("change", function(){
  var contactVal = $("select[title = 'Contact']").val();
  if (contactVal == "Yes")
    showColumn("Contact Info"); 
    showColumn("Contact Method"); 
    hideColumn("Contact Info"); 
    hideColumn("Contact Method"); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.