Question

Javascript dropdown for State field in forms address block does not save

Forms

Updated April 1, 2018

asked on December 4, 2017 • Show version history

I am using some javascript code I found on LF Answers to create a dropdown in the state field of an address block. My problem is that the selection does not save with the form to the repository. I've seen that this is a problem when using a read only field, but my field is not read only. I'm setting the country with with javascript and it is saving, but not the state. Here is a snip of the code I'm using:

$(document).ready (function () {
$(".Country").parent().children().val("USA");

$(".State").attr("maxlength", 2);
$('.State').replaceWith('<select name="State" class="form-item-field State" vo="e"> ' +
'<option></option>' +
   '<option value=""></option>' +
   '<option value="AL">AL</option>' +
   '<option value="AK">AK</option>' +
   '<option value="AR">AR</option>' +
   '<option value="AZ">AZ</option>' +
   '<option value="CA">CA</option>' +
   '<option value="CO">CO</option>' +
   '<option value="CT">CT</option>' +
   '<option value="DC">DC</option>' +
    '</select>');
$(".State").parent().children().val();
});

Any help is appreciated

0 0

Answer

SELECTED ANSWER

replied on April 1, 2018

Hi Craig,

The original script did not handle the issue read-only form; actually it was a bug in Forms before 10.3 (reported in this post) that caused the script not being triggered on read-only form, which ended up making the read-only form looking fine.

After the bug was fixed in 10.3, you can update script like this to handle the issue on read-only form:

$(document).ready (function () {
  if ($('input[name=IsLocked]').val() == 'False')
  {
  	$(".Country").parent().children().val("USA");

    $(".State").attr("maxlength", 2);
    $(".State").each(function(){
      var id = $(this).attr("id");
      $(this).replaceWith('<select id="'+id+'" name="'+id+'" class="form-item-field State"> ' +
      '<option></option>' +
      '<option value=""></option>' +                      
      '<option value="AL">AL</option>' +
      '<option value="AK">AK</option>' +
      '<option value="AR">AR</option>' +
      '<option value="AZ">AZ</option>' +
      '<option value="CA">CA</option>' +
      '<option value="CO">CO</option>' +
      '<option value="CT">CT</option>' +
      '<option value="DC">DC</option>' +   
      '</select>');
    });
  }
});

2 0

Replies

replied on December 6, 2017

Hi Craig,

Can you try adjust your script to the following and change the "1" in Field1_DSG3 to the actual field id of your address field:

$('.State').replaceWith('<select id="Field1_DSG3" name="Field1_DSG3" class="form-item-field State"> ' +
    '<option></option>' +
    '<option value=""></option>' +                      
    '<option value="AL">AL</option>' +
    '<option value="AK">AK</option>' +
    '<option value="AR">AR</option>' +
    '<option value="AZ">AZ</option>' +
    '<option value="CA">CA</option>' +
    '<option value="CO">CO</option>' +
    '<option value="CT">CT</option>' +
    '<option value="DC">DC</option>' +   
    '</select>');

0 0

View 4 previous replies

replied on December 7, 2017

I changed the javascript code as you requested but when the form is submitted the State is still not saved. I've attached a screenshot.

address_state.PNG (40.2 KB)

| Download

0 0

replied on December 7, 2017

So there are more than one address field on the form? Then you will need to replace them separately since the field ids are different. Try the following:

$(".State").each(function(){
    var id = $(this).attr("id");
    $(this).replaceWith('<select id="'+id+'" name="'+id+'" class="form-item-field State"> ' +
    '<option></option>' +
    '<option value=""></option>' +                      
    '<option value="AL">AL</option>' +
    '<option value="AK">AK</option>' +
    '<option value="AR">AR</option>' +
    '<option value="AZ">AZ</option>' +
    '<option value="CA">CA</option>' +
    '<option value="CO">CO</option>' +
    '<option value="CT">CT</option>' +
    '<option value="DC">DC</option>' +   
    '</select>');
  });

0 0

replied on December 8, 2017 • Show version history

I apologize but I don't know javascript, so I'm not sure what you are saying. I copied that sample put that in my javascript but now the State drop down does not work at all.

0 0

replied on December 10, 2017

Hi Craig,

Did you remove all original script? The script above is used to replace the $('.State').replaceWith... part.

The whole script should be like:

$(document).ready (function () {
 $(".Country").parent().children().val("USA");
  
  $(".State").attr("maxlength", 2);
  $(".State").each(function(){
    var id = $(this).attr("id");
    $(this).replaceWith('<select id="'+id+'" name="'+id+'" class="form-item-field State"> ' +
    '<option></option>' +
    '<option value=""></option>' +                      
    '<option value="AL">AL</option>' +
    '<option value="AK">AK</option>' +
    '<option value="AR">AR</option>' +
    '<option value="AZ">AZ</option>' +
    '<option value="CA">CA</option>' +
    '<option value="CO">CO</option>' +
    '<option value="CT">CT</option>' +
    '<option value="DC">DC</option>' +   
    '</select>');
  });
});

1 0

replied on December 14, 2017

This works perfect and now the state saves with the form to the repository.

Thanks Rui

0 0

replied on March 30, 2018

This was working but now when I submit the form and it saves to the repository it does not show the state selected. It just shows a drop down field, the field does save correctly to metadata though. Do you think this is related to upgrading to 10.3? I subsequently have now upgraded to 10.3.1 and it is still not working correctly.

0 0

SELECTED ANSWER

replied on April 1, 2018

Hi Craig,

After the bug was fixed in 10.3, you can update script like this to handle the issue on read-only form:

$(document).ready (function () {
  if ($('input[name=IsLocked]').val() == 'False')
  {
  	$(".Country").parent().children().val("USA");

    $(".State").attr("maxlength", 2);
    $(".State").each(function(){
      var id = $(this).attr("id");
      $(this).replaceWith('<select id="'+id+'" name="'+id+'" class="form-item-field State"> ' +
      '<option></option>' +
      '<option value=""></option>' +                      
      '<option value="AL">AL</option>' +
      '<option value="AK">AK</option>' +
      '<option value="AR">AR</option>' +
      '<option value="AZ">AZ</option>' +
      '<option value="CA">CA</option>' +
      '<option value="CO">CO</option>' +
      '<option value="CT">CT</option>' +
      '<option value="DC">DC</option>' +   
      '</select>');
    });
  }
});

2 0

You are not allowed to follow up in this post.

Question

Question

Javascript dropdown for State field in forms address block does not save

Answer

Replies

Sign in to reply to this post.