[Gelöst] duplicate records from one set of fields to next set of fields

[Author]

Artikel

[AndreG3332]

I have a membership type of site.

In the registration form the new user fills in, he is required to complete his physical address and postal address Each one consist of 5 fields. Instead of completing both manually, the client wants us to add a function where if the one has been completed that there is a button that says copy to the other address fields. So in other words, if the client completed the physical address and his postal address is the same he can just click the button to auto-complete the other.

[Waqar Supporter Languages: Englisch (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

Since there is no built-in feature available for this, it will require some custom script.

For example, suppose you have these 10 single type fields for the addresses:

Physical Address Fields:
post-physical-field-1
post-physical-field-2
post-physical-field-3
post-physical-field-4
post-physical-field-5

Postal Address fields:
post-postal-field-1
post-postal-field-2
post-postal-field-3
post-postal-field-4
post-postal-field-5

To add a link that copies the values from Physical Address fields to the Postal Address fields, you can add an "HTML content" field in your form, with the copy link code, like this:

<a href="#" id="copy-address-fields-link">Copy Physical Address to Postal Address</a>

And in the form's "JS editor", you can include the following script that copies the values from the physical address fields, into their respective postal address fields, when the copy link is clicked:

jQuery( document ).ready(function() {
	jQuery('#copy-address-fields-link').click(function(){
		event.preventDefault();
		var fieldVal1 = jQuery('input[name="wpcf-post-physical-field-1"]').val();
		var fieldVal2 = jQuery('input[name="wpcf-post-physical-field-2"]').val();
		var fieldVal3 = jQuery('input[name="wpcf-post-physical-field-3"]').val();
		var fieldVal4 = jQuery('input[name="wpcf-post-physical-field-4"]').val();
		var fieldVal5 = jQuery('input[name="wpcf-post-physical-field-5"]').val();

		jQuery('input[name="wpcf-post-postal-field-1"]').val(fieldVal1);
		jQuery('input[name="wpcf-post-postal-field-2"]').val(fieldVal2);
		jQuery('input[name="wpcf-post-postal-field-3"]').val(fieldVal3);
		jQuery('input[name="wpcf-post-postal-field-4"]').val(fieldVal4);
		jQuery('input[name="wpcf-post-postal-field-5"]').val(fieldVal5);
	});   
});

Feel free to adjust these field slugs, as used on your website.

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[AndreG3332]

Hi Waqar

Thank you for your code snippets. I have implemented them however it still dies not copy. I would appreciate it if you could just have a look at the code for any obvious errors you could pick up.

Here is the html for the form.

[credform]

<!––FORM CONTAINER-->

	<div class="container">
<!––FORM CONTAINER-->


<!––ERROR MESSAGES-->
		<div class="errors">[cred_field field='form_messages' class='alert alert-warning']</div>
<!––END ERROR MESSAGES-->

<!––START CONTAINER1 FORMATTING-->
  	<div class = "container1">


<!––CONTAINERPHYA (PHYSICAL ADDRESS FORMATTING-->	
		<div class ="containerphya">

<!––PHYSICAL ADDRESS FORMATTING-->	
		
				<div class="form-group pa">
							<label for="%%FORM_ID%%_physical_address">
								[cred_i18n name='physical_address-label']
										Physical Address
								[/cred_i18n]
							</label>
								[cred_field field='physical_address' placeholder = "Physical Address" force_type='field' class='form-control' output='bootstrap']
				</div>
<!––END PHYSICAL ADDRESS FORMATTING-->	
				
			
<!––PHYSICAL ADDRESS CONTINUED FORMATTING-->
			
				<div class="form-group pacon">
					<label for="%%FORM_ID%%_physical_address_line">
							[cred_i18n name='physical_address_line-label']
								Physical address Cont
							[/cred_i18n]
					</label>
						[cred_field field='physical_address_line' placeholder = "Physical Address cont"  force_type='field' class='form-control' output='bootstrap']
				</div>
<!––END PHYSICAL ADDRESS CONTINUED FORMATTING-->
		
		
		
<!––PHYSICAL ADDRESS CITY FORMATTING--> 
		
				<div class="form-group paci">
						<label for="%%FORM_ID%%_physical-address-city">
								[cred_i18n name='physical-address-city-label']
									Physical address City
								[/cred_i18n]
						</label>
								[cred_field field='physical-address-city' force_type='field' placeholder = "Physical Address city" class='form-control' output='bootstrap']
				</div>
<!––END PHYSICAL ADDRESS CITY FORMATTING-->
		
<!––PHYSICAL ADDRESS REGION FORMATTING--> 
		
				<div class="form-group pareg">
						<label for="%%FORM_ID%%_physical_address_region">
								[cred_i18n name='physical_address_region-label']
									Physical Address Province
								[/cred_i18n]
						</label>
								[cred_field field='physical_address_region' force_type='field' placeholder = "Physical Address Province" class='form-control' output='bootstrap' select_text='Select Province']
				</div>
<!––END PHYSICAL ADDRESS REGION FORMATTING-->		
	
<!––PHYSICAL ADDRESS POSTALOASTAL FORMATTING--> 
				<div class="form-group postcode">
						<label for="%%FORM_ID%%_physical_address_postal_code">
								[cred_i18n name='physical_address_postal_code-label']
										Physical Address Postal Code
								[/cred_i18n]
						</label>
								[cred_field field='physical_address_postal_code' force_type='field' placeholder = "Physical Address Postcode" class='form-control' output='bootstrap']

				</div>
<!––END PHYSICAL ADDRESS POSTALOASTAL FORMATTING-->
				
		</div>

      
	
	
		 
<!––CONTAINERPOSTAL FORMATTING-->
	
        <div class = "containerpostal">  
                 
<!––CONTAINERPOSTAL ADDRESS FORMATTING-->				 
				<div class="form-group postadd">
						<label for="%%FORM_ID%%_postal_address_line" >
								[cred_i18n name='postal_address_line-label']
                                      Postal Address
								[/cred_i18n]
						</label>
								[cred_field field='postal_address_line' force_type='field' placeholder = "Postal Address" class='form-control' output='bootstrap']
            	</div>

<!––END POSTAL ADDRESS FORMATTING-->


<!––START POSTAL ADDRESS  CONT FORMATTING-->
       
				<div class="form-group postadcont">
						<label for="%%FORM_ID%%_postal_address_cont">
								  [cred_i18n name='postal_address_cont-label']
									  Postal address (cont)
								  [/cred_i18n]
							</label>
								[cred_field field='postal_address_cont' force_type='field' placeholder = "Postal Address Cont." class='form-control' output='bootstrap']
				</div>
<!––END POSTAL ADDRESS CONT FORMATTING-->
 <!––POSTAL ADDRESS CITY FORMATTING--> 
		
				<div class="form-group poci">
						<label for="%%FORM_ID%%_postal-address-city">
								[cred_i18n name='postal-address-city-label']
									Postal address City
								[/cred_i18n]
						</label>
								[cred_field field='postal-address-city' force_type='field' placeholder = "Postal Address city" class='form-control' output='bootstrap']
				</div>                 
          

<!––POSTAL ADDRESS PROV FORMATTING-->
    
				<div class="form-group postprov">
						<label for="%%FORM_ID%%_postal-address-province">
							  [cred_i18n name='postal-address-province-label']
									Postal address Province
							  [/cred_i18n]
						</label>
								[cred_field field='postal-address-province' force_type='field' placeholder = "Postal Address Province" class='form-control' output='bootstrap' select_text='Select Province']
				</div>
<!––END POSTAL ADDRESS PROV FORMATTING-->    

<!––POSTAL CODE FORMATTING-->
				<div class="form-group postpcode">
					<label for="%%FORM_ID%%_postal-address-post-code">
						[cred_i18n name='postal-address-post-code-label']
								Postal Address (post code)
						[/cred_i18n]
					</label>
						[cred_field field='postal-address-post-code' force_type='field' placeholder = "Postal Code" class='form-control' output='bootstrap']
				</div>
<!––POSTAL ADDRESS PROV FORMATTING-->
			</div>
<!––END POSTAL ADDRESS PROV FORMATTING-->			
        </div>  
<!––END CONTAINER POSTAL-->

      
 <!––SUBMIT BUTTON FORMATTING-->
	
  <div class="containerbutton">
        <div class="subbtn">
              <div class="backbtn">
                        <button class="backbutton" type="button" onclick="javascript: window.history.back();" class="button">
                                Back
                        </button>
              </div>
              <div class="nextbtn">
                    [cred_field field='form_submit' output='bootstrap' value='Next' class='btn btn-primary btn-lg']
              </div>	
         </div>
		 <div class="copyphystopost"> 
					<a href="#" id="copy-address-fields-link">
							Copy Physical Address to Postal Address
					</a> 
  <!–– END CONTAINERPHYA (PHYSICAL ADDRESS FORMATTING-->
		 
  </div>

  
<! -- END BUTTON FORMATTING-->

</div> 
<! -- END CONTAINER FORMATTING-->

[/credform]

 

Here iis the css code

 
.container{
  display:flex;
  flex-direction:column;
   background-color:#27A189; 
}
.container1{
  	display:flex;    
  	justify-content:space-around;
  	padding-top:60px;
  	padding-bottom:60px;
	
}	
.subbtn{
  		display:flex;
        flex-direction:row;
  		justify-content: center;
        align-items: center;
		margin-bottom:50px;	
}

.containerphya{
	border-width: 2px;
  	width:33%;
}
.containerpostal{
	border-width: 2px;
  	width:33%;
    
}
/*.containerbutton1{
  	background-color:#27A189;
  	justify-content: center;
  	align-items:center;
    width:100%;
  	padding:0 0 25px 0;
}
.containerbutton2{
  	background-color:#27A189;
  	justify-content: center;
  	align-items:center;
    width:100%;
  	padding:0 0 25px 0;
}
*/
label{
	display: none;
}

input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textareat {
    padding: .75em;
    height: auto;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-radius: 50px;
 	background: rgba(255,255,255,0.15);
    box-shadow: none;
    box-sizing: border-box;
    transition: all .2s linear;
  	font-family: 'Roboto',sans-serif;
    font-weight: 400;
    font-size: 15px;
    font-size: 1rem;
  	color:#fff;
  	margin-bottom:20px;
}

input[type=email]:hover, input[type=number]:hover, input[type=password]:hover, input[type=reset]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=url]:hover, select:hover, textareat:hover{ 	
  background-color:/*27A189*/ rgba(255,255,255,0);
}

	input::placeholder, input:focus{
		color:#fff;
}

input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=reset]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,input[type=textfield]:focus,  input[type=url]:focus, select:focus, textareat:focus {
  
  	background-color: #0D7B6A;
 	border-width: 2px;
    border-style: solid;
    border-color: #fff !important;
    border-radius: 0px !important;
}
input[type=email]:visited, input[type=number]:visited, input[type=password]:visited, input[type=reset]:visited, input[type=search]:visited, input[type=tel]:visited, input[type=text]:visited, input[type=url]:visited, select:visited, textareat:visited {
  
  	background-color: #0D7B6A;
 	border-width: 2px;
    border-style: solid;
    border-color: #fff !important;
    border-radius: 0px !important;
  	color:#fff!important;
}

.subbtn:hover{
	background-color:rgba(255, 255,255,0.0)
} 
.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type="button"], input[type="submit"], input[type="reset"], .backbutton {
	height: auto;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-radius: 50px;
}

input::placeholder, input:focus{
		color:#fff;
}
/* andre se code */

/*.subbtn:hover{
	background-color:rgba(255, 255,255,0.0)
}*/
.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type="button"], input[type="submit"], input[type="reset"], .backbutton {
	height: auto;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-radius: 50px;
}

input::placeholder, input:focus{
		color:#fff;
}
input[type="submit"], .backbutton{
	height: auto;
    border-width: 2px;
    border-style: solid;
    border-color:#fff;
    border-radius: 50px;
   	padding: 15px 100px 15px 100px;
   	background-color: rgba(255,255,255,0.15);
   	
   
}

input[type="submit"]:hover, .backbutton:hover{
	background-color:rgba(255,255,255,0);
	border-width: 2px;
    border-style: solid;
    border-color: #fff;  
}

#cred_form_1396_1_form_submit_1:hover:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}
#cred_form_1396_1_form_submit_1: {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
  	background-color: rgba(255, 255, 255, 0.15);
	border-color: #fff;
  bottom: 0px;
}

finally the java script

jQuery( document ).ready(function() {
    jQuery('#copy-address-fields-link').click(function(){
        event.preventDefault();
        var fieldVal1 = jQuery('input[name="physical_address"]').val();
        var fieldVal2 = jQuery('input[name="physical_address_line"]').val();
        var fieldVal3 = jQuery('input[name="physical-address-city"]').val();
        var fieldVal4 = jQuery('input[name="physical_address_region"]').val();
        var fieldVal5 = jQuery('input[name="physical_address_postal_code"]').val();
 
        jQuery('input[name="postal_address_line"]').val(fieldVal1);
        jQuery('input[name="postal_address_cont"]').val(fieldVal2);
        jQuery('input[name="postal-address-city"]').val(fieldVal3);
        jQuery('input[name="postal-address-province"]').val(fieldVal4);
        jQuery('input[name="postal-address-post-code"]').val(fieldVal5);
    });   
});

I would appreciate it you could just have a look.

[Waqar Supporter Languages: Englisch (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

In my example JS code snippet, I included the prefix 'wpcf-' before the field slugs, but, I don't see it in your JS code.

Can you please include the prefix 'wpcf-' before the field slugs in the JS code and then test the fields again?

If it still doesn't work, please share the link to the page, where this form can be seen.