Question

Forms - Edited title, is there any way to keep that edited title on submit?

Forms

Updated October 8, 2015

asked on October 5, 2015 • Show version history

So, I have this function in my javascript:

function titleSet() {
  var first = $('#Field7:text').val();
  var middle = $('#Field8:text').val();
  var last = $('#Field9:text').val();
    
  $("#form-title-wrap label").text("For "+ first + " " + middle + " " + last );
}

It works well when calling it when a change is made to the person's name

$(".nameInfo input").change(titleSet);

I do this because sometimes users will be juggling more than one form at the same time.

However I can't seem to figure how to display this when it loads the submitted form screen. I have also tried adding in

The variable data to the form description setting

but that doesn't seem to do anything either.

I've also called the function using .action-button like this:

$(".action-btn").click(function(){
    titleSet();
  });

but again it just looks like this:

(I have blanked out the form title in these because it includes the name of the company).

Any ideas how I might do this?

0 0

Answer

SELECTED ANSWER

replied on October 8, 2015

Okay, I have an answer. :)

HTML5 supports something called Web Storage, which you can read more about at W3Schools. This allows information to be saved between pages, as we desire. There are two kinds of web storage: indefinite localStorage and sessionStorage which expires at the end of browsing session. The latter is more appropriate for our purposes.

I set up a sample form; there are three text input fields, all with class ".name-info". I gave each individual input a class as well (".first-name-li", etc.) for clarity in example, but the id selectors can work just as well. The following JavaScript works:

$(document).ready(function() {
  // SAVE THE DEFAULT FORM TITLE (FROM THE FORM SETTINGS)
  formtitle = $('#form-title-wrap h1').text();
  // COLLECT DEFAULT NAME INPUTS
  var fName = $('.first-name-li input:text').val();
  var mName = $('.middle-name-li input:text').val();
  var lName = $('.last-name-li input:text').val();
  // CHECK TO SEE IF THERE ARE NAME INPUTS;
  // IF NOT, WE ARE ON THE SUBMIT PAGE. USE sessionStorage TO ACCESS THE INPUT NAMES
  if (fName == null || mName == null || lName == null) {
    fName = sessionStorage.getItem('fName');
    mName = sessionStorage.getItem('mName');
    lName = sessionStorage.getItem('lName');
  }
  // GENERATE CUSTOM TITLE
  customTitle(fName,mName,lName);
});

// WHEN THE USER MAKES CHANGES TO THE INPUT FIELDS
$(document).on('keyup', '.name-info input', function() {
  // STORE THE CURRENT INPUT VALUES TO sessionStorage
  storeNames();
  // UPDATE THE TITLE
  titleSet();
});

// STORING CURRENT INPUT VALUES TO sessionStorage
function storeNames() {
  // STORE THE CURRENT VALUE OF THE INPUT FIELDS IN sessionStorage
  sessionStorage.setItem('fName',$('.first-name-li input:text').val());
  sessionStorage.setItem('mName',$('.middle-name-li input:text').val());
  sessionStorage.setItem('lName',$('.last-name-li input:text').val());
}

// UPDATING THE FORM TITLE
function titleSet() {
  // COLLECT THE NAMES STORED IN sessionStorage
  var fName = sessionStorage.getItem('fName');
  var mName = sessionStorage.getItem('mName');
  var lName = sessionStorage.getItem('lName');
  // GENERATE CUSTOM TITLE
  customTitle(fName,mName,lName);
}

// GENERATING THE CUSTOM TITLE
function customTitle(fName,mName,lName) {
  // IF THE INPUTS WERE BLANK, DISPLAY THE DEFAULT FORM TITLE
  if ((fName == "" && mName == "" && lName == "")) {
    $('#form-title-wrap h1').text(formtitle);
  } else {
    // OTHERWISE INCLUDE THE NAMES IN THE TITLE
    $('#form-title-wrap h1').text(formtitle + ": " + fName + " " + mName + " " + lName);
  }
}

In this example, the default form title is set from the Edit Form view. If the names are blank, this default form title is displayed. Otherwise, the form title is in the form "DEFAULT_FORM_TITLE: FIRST_NAME MIDDLE_NAME LAST_NAME". It can be edited, of course, to suit your particular needs.

Hope this helps!

[Edit: moved to main thread, out from under my previous reply.]

2 0

replied on October 8, 2015

Very useful!!!!

I will play around with this and see if I can implement it. Thanks for finding this!

0 0

Replies

replied on October 6, 2015

Are you referring to the Thank You page that is shown after the form is initially submitted? If so, I don't think this is possible because I don't think it reads the custom JavaScript that is entered into the process.

0 0

replied on October 6, 2015

Right. I'm still playing around with this, but in principle once the page reloads, all of the JavaScript variables reset. And so for example if you try to populate the form title with the value of text input fields, when the confirmation page loads, there are no text input fields to draw from! Hence either default behavior, a blank title, or "UNDEFINED" showing up in place of variable values, depending on how exactly the code has been written. You could check for null values and display a default title in that case, but this is not quite what the OP asked for.

In theory, using cookies to store the information would preserve the (for example, name) information on page reload. The trouble with this approach is there is no way to guarantee that the form-filler has cookies enabled.

0 0

replied on October 8, 2015 • Show version history

Okay, I have an answer. :)

$(document).ready(function() {
  // SAVE THE DEFAULT FORM TITLE (FROM THE FORM SETTINGS)
  formtitle = $('#form-title-wrap h1').text();
  // COLLECT DEFAULT NAME INPUTS
  var fName = $('.first-name-li input:text').val();
  var mName = $('.middle-name-li input:text').val();
  var lName = $('.last-name-li input:text').val();
  // CHECK TO SEE IF THERE ARE NAME INPUTS;
  // IF NOT, WE ARE ON THE SUBMIT PAGE. USE sessionStorage TO ACCESS THE INPUT NAMES
  if (fName == null || mName == null || lName == null) {
    fName = sessionStorage.getItem('fName');
    mName = sessionStorage.getItem('mName');
    lName = sessionStorage.getItem('lName');
  }
  // GENERATE CUSTOM TITLE
  customTitle(fName,mName,lName);
});

// WHEN THE USER MAKES CHANGES TO THE INPUT FIELDS
$(document).on('keyup', '.name-info input', function() {
  // STORE THE CURRENT INPUT VALUES TO sessionStorage
  storeNames();
  // UPDATE THE TITLE
  titleSet();
});

// STORING CURRENT INPUT VALUES TO sessionStorage
function storeNames() {
  // STORE THE CURRENT VALUE OF THE INPUT FIELDS IN sessionStorage
  sessionStorage.setItem('fName',$('.first-name-li input:text').val());
  sessionStorage.setItem('mName',$('.middle-name-li input:text').val());
  sessionStorage.setItem('lName',$('.last-name-li input:text').val());
}

// UPDATING THE FORM TITLE
function titleSet() {
  // COLLECT THE NAMES STORED IN sessionStorage
  var fName = sessionStorage.getItem('fName');
  var mName = sessionStorage.getItem('mName');
  var lName = sessionStorage.getItem('lName');
  // GENERATE CUSTOM TITLE
  customTitle(fName,mName,lName);
}

// GENERATING THE CUSTOM TITLE
function customTitle(fName,mName,lName) {
  // IF THE INPUTS WERE BLANK, DISPLAY THE DEFAULT FORM TITLE
  if ((fName == "" && mName == "" && lName == "")) {
    $('#form-title-wrap h1').text(formtitle);
  } else {
    // OTHERWISE INCLUDE THE NAMES IN THE TITLE
    $('#form-title-wrap h1').text(formtitle + ": " + fName + " " + mName + " " + lName);
  }
}

Hope this helps!

You are not allowed to follow up in this post.

Question

Question

Forms - Edited title, is there any way to keep that edited title on submit?

Answer

Replies

Sign in to reply to this post.