You are viewing limited content. For full access, please sign in.

Question

Question

Javascript customized address field

Forms
Updated September 12, 2017
asked on September 11, 2017

Good day all.

 

i found a thread in a previous post on lf answers to customize the state field in the address field to a dropdown menu with options. See code below :
 

$(document).ready (function () {
$(".State").siblings().text('Province');
$(".Postal").siblings().text('Postal Code');
$("input[id*=_DSG3]").siblings().text('Province');
$("input[id*=_DSG1]").parent().children().css('display', 'none'); //hides address 2


$(".Country").parent().children().val("South Africa"); 
  
$('.State').replaceWith('<select name=""Field1_DSG3" class="form-item-field State" vo="e" id ="Field1_DSG3">'+

        '<option></option>' +
        '<option value="Gauteng">Gauteng</option>' +

        '<option value="KwaZulu">KwaZulu-Natal</option>' +
                        
        '<option value="EasternCape">Eastern Cape</option>' +

        '<option value="FreeState">Free State</option>' +
        
        '<option value="Limpopo">Limpopo</option>' +

        '<option value="Mpumalanga">Mpumalanga</option>' +
         
        '<option value="NothernCape">Northern Cape</option>' +
        
        '<option value="North West">North West</option>' +

        '<option value="WesternCape">Western Cape</option>' +
                        
        '</select>'); 
  
});

The problem i am facing is that when i do select a state, it does not get saved on the form. In the next user task, the state field is blank and it also saves on the repository blank.

 

Any suggestions on how to solve this?

 

Thanks.

0 0

Replies

replied on September 11, 2017

Im not 100% sure this is the issue but it looks like you have an extra " in your code.

Try changing:

$('.State').replaceWith('<select name=""Field1_DSG3" class="form-item-field State" vo="e" id ="Field1_DSG3">'+

To:

$('.State').replaceWith('<select name="Field1_DSG3" class="form-item-field State" vo="e" id ="Field1_DSG3">'+

 

0 0
replied on September 11, 2017

Hi Aaron

That is not the isssue, the form does not submit if i remove the double quotes.

it gives the below error :

0 0
replied on September 12, 2017

Hmm ok, try this:

$(document).ready (function () {
$(".State").siblings().text('Province');
$(".Postal").siblings().text('Postal Code');
$("input[id*=_DSG3]").siblings().text('Province');
$("input[id*=_DSG1]").parent().children().css('display', 'none'); //hides address 2



$(".Country").parent().children().val("South Africa"); 
  
$('.State').hide().parent().append('<select name="newState" class="form-item-field State" vo="e" id ="newState">'+

        '<option></option>' +
        '<option value="Gauteng">Gauteng</option>' +

        '<option value="KwaZulu">KwaZulu-Natal</option>' +
                        
        '<option value="EasternCape">Eastern Cape</option>' +

        '<option value="FreeState">Free State</option>' +
        
        '<option value="Limpopo">Limpopo</option>' +

        '<option value="Mpumalanga">Mpumalanga</option>' +
         
        '<option value="NothernCape">Northern Cape</option>' +
        
        '<option value="North West">North West</option>' +

        '<option value="WesternCape">Western Cape</option>' +
                        
        '</select>'); 
  
  $(document).on('change','#newState', function() {
    $('.State').val($(this).val());
  });
});

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...