Question

Modifying Address Field in Forms

Forms

Updated February 23, 2018

asked on November 18, 2013

I'm trying to modify the Address Field Attributes so that it does not show the Country...however, the first Field I can get to successfully work, but the remaining Fields the Country does not go away? I've attached a Screenshot of my Script and Form.

Capture.PNG (50.05 KB)

| Download

0 0

Answers

APPROVED ANSWER

replied on November 18, 2013 • Show version history

Aha! The reason it isn't showing up is that the address field is in a collection. When fields are included in collections (which can be repeatable), they're giving a different ID attribute.

Replace your JavaScript with the following:

$(document).ready (function () {
$("input[id*=_DSG3]").siblings().text('State');
$("input[id*=_DSG5]").parent().children().css('display', 'none'); 
})

This code will change all address fields on the form.

0 0

View 6 previous replies

replied on November 18, 2013

Eric,

That worked...except when I hit the "add" button for to add another addresss (under Real Estate), the new address field contains the County and Also still says Province/Region?

0 0

replied on November 18, 2013

Probably need to set an action to force that setting again. (I believe the code is only meant to run on generating the image on your screen and not during page actions)

0 0

SELECTED ANSWER

replied on November 18, 2013

Hi Daryl,

As Kenneth said, if you're adding address fields to the form after it loads, you'll need to add some JavaScript so that the new fields are also updated. Here's the code:


$(document).ready(function() {
  addressChange();
$('.cf-collection-append').click(addressChange);                   

function addressChange() {
  $("input[id*=_DSG3]").siblings().text('State'); 
  $("input[id*=_DSG5]").parent().children().css('display', 'none');
}
  
})

2 0

replied on January 27, 2014

Eric,

What changes in the code would be necessary to only apply this to this specific Address Field Collection?

Example: I have multiple Address Field Collections within 1 form and I would like to change the field names for each collection independently.

Thanks,

Nate

0 0

replied on January 27, 2014

Hi Nathan,

The easiest way to do it is to add distinct classes to each address field you want to modify. Then, you can use compound selectors in your code to target the appropriate ones. If you're on Forms 9.1, you can reference the fields within an address field using very intuitive classes. Here's an example:

Using this CSS rule, I can hide the Country field in all address fields on a form:

.Country+label, .Country {display:none;}

If I only want to modify one address field, I can add a class to it. In this example, I added the second class to an address field.

.second .Country+label, .second .Country {display:none;}

Now, instead of hiding all the Country fields on the form, it only hides the one in the address field with the second class. You can use the same sort of compound selectors in your code, too.

1 0

replied on January 27, 2014

Eric,

Okay, I'm able to display/not display the items with CSS but I'm looking to simply change the names, not display some and not others. I have attached a screenshot of what I'm working with.

You'll see that both Address Collections are displaying as expected, now I'm just looking to see what code I need to add to make the setting apply to only one of the collections at a time.

Thanks,

Nate

Address Collection.PNG (43.79 KB)

| Download

0 0

replied on January 27, 2014 • Show version history

You'll just add the field's ID (q7 or q64) to the selector, like so:

$("#q7 input[id*=_DSG1]").siblings().text('City');

1 0

replied on July 31, 2015

We need to make the Address Field required, is there a way we can add the default value of USA to the Country field if it is hidden? Also is there way we can add a JavaScript dropdown menu for the State field as well?

0 0

replied on July 31, 2015

You can use the following Javascript (note that the Address field is Field1)

$(document).ready (function () {
  
  $(".Country").parent().children().val("USA");
  $(".Country").parent().children().css('display', 'none');
  
  $('.State').replaceWith('<select name="Field1_DSG3" class="form-item-field  required State" vo="e" required="required" id="Field1_DSG3">' +
        '<option></option>' +
        '<option value="Alabama">AL</option>' +
        '<option value="Alaska">AK</option>' +
        '<option value="Arizona">AZ</option>' +
        '<option value="Arkansas">AR</option>' +
        '<option value="California">CA</option>' +
        '</select>');
  
})

This will set the country to be USA while hiding that field. As for the state field, it's being replaced with a select element and you can just populate the options with the state information.

Here's what it looks like when filling out the form:

Here's what the submission looks like:

1 0

SELECTED ANSWER

replied on November 18, 2013

Hi Daryl,

As Kenneth said, if you're adding address fields to the form after it loads, you'll need to add some JavaScript so that the new fields are also updated. Here's the code:


$(document).ready(function() {
  addressChange();
$('.cf-collection-append').click(addressChange);                   

function addressChange() {
  $("input[id*=_DSG3]").siblings().text('State'); 
  $("input[id*=_DSG5]").parent().children().css('display', 'none');
}
  
})

2 0

Replies

replied on August 31, 2015

Is it possible to use the code to change the headings in the printable/email version after the form has been submitted? I am using the following code:

  $('.Address1').siblings().text('Mailing');
  $('.Address2').siblings().text('Physical');
  $(".Country").parent().children().css('display', 'none');

here is the form before being submitted:

Here is the submitted form:

We need the Mailing and Physical Address line titles to carry through on the submitted form. Any ideas?

1 0

replied on November 18, 2013

you saying each time you add another collection of fields that the country field does not get hidden?

You probably will want to use CSS for this. I believe I saw an answer on how to hide the country field (or it was in the LF Forums) inside a form and then once you have the suggested way to accomplish this task, you will need to test and see if adding another instance of that collection will break that hide technique

0 0

replied on November 25, 2013

Thanks Eric and Kenneth...that worked....all is good now!!

0 0

View 6 previous replies

replied on February 6, 2014

So my form when filling it out is fine as it only shows, State and not country, province or region...but on the form that gets stored in Laserfiche...it a showing all of that instead of just the state. Any ideas why?

0 0

replied on February 6, 2014

Thanks for catching this! When Save to Repository saves a copy of the form, it views it as read-only. When the address fields are read-only, they no longer have input boxes, so the previous code was not targeting them correctly. This will work:

$(document).ready(function () {
  $("input[id*=_DSG3], span[id*=_DSG3]").siblings().text('State');
  $("span[id*=_DSG5], input[id*=_DSG5]").parent().children().css('display', 'none');
});

0 0

replied on February 7, 2014

I am not sure how to handle this code because the code you gave before calls a function addressChange().

0 0

replied on February 7, 2014

Ah, yes the previous code would look for everything when the form loads and change it. The following code looks for the address field in read-only format (what it will be when Save to Repository tries to save it) and makes changes.

$(document).ready(function () {
  $("span[id*=_DSG3]").siblings().text('State');
  $("span[id*=_DSG5]").parent().children().css('display', 'none');
});

0 0

replied on February 7, 2014

So it it a matter of using one or the other or can I use both?

0 0

replied on February 7, 2014

You can use both.

0 0

replied on February 11, 2014

Eric,
It's not working...here's what I have (I have multiple Address Fields that this needs to apply to).

$(document).ready(function() {

addressChange();

$('.cf-collection-append').click(addressChange);

function addressChange() {

$("input[id*=_DSG0]").siblings().text('Address Line 1');

$("input[id*=_DSG3]").siblings().text('State');

$("input[id*=_DSG4]").siblings().text('Zip Code');

$("input[id*=_DSG5]").parent().html('');

}

})

$(document).ready(function () {

$("input[id*=_DSG0], span[id*=_DSG0]").siblings().text('Address Line 1');

$("input[id*=_DSG3], span[id*=_DSG3]").siblings().text('State');

$("input[id*=_DSG4], span[id*=_DSG4]").siblings().text('Zip Code');

$("span[id*=_DSG5], input[id*=_DSG5]").parent().children().css('display', 'none');

});

0 0

replied on February 11, 2014

The following should work. Replace what you have with this:

$(document).ready(function () {

    addressChange();

    $('.cf-collection-append').click(addressChange);

    function addressChange() {
        $("span[id*=_DSG0], input[id*=_DSG0]").siblings().text('Address Line 1');
        $("span[id*=_DSG3], input[id*=_DSG3]").siblings().text('State');
        $("span[id*=_DSG4], input[id*=_DSG4]").siblings().text('Zip Code');
        $("span[id*=_DSG5], input[id*=_DSG5]").parent().children().css('display', 'none');
    }

});

If that still isn't working, please attach a screenshot of the saved form so I can see the issue.

0 0

replied on February 23, 2018

What if I wanted to add an input field or input fields to the "Address Field" say I wanted to include another input field in that collection called "Carrier Name" or anything? Please direct me to the correct section if I'm replying in the wrong area for this.

0 0

You are not allowed to follow up in this post.

Question

Question

Modifying Address Field in Forms

Answers

Replies

Sign in to reply to this post.