Copy Text From One Field To Another Field

JavaScript
1

Hello Campers,

I want to know if there is another way of coding a copy text to another text, for better practices. It seems that I’m taking each value input and place the copy to another literal by hand.
But what about if there is 10 input fields will i do all ? i mean for every input field in the html i will add another line of js as well ? or there is a faster way of looping thru all fields ? this is the code i got so far, it works! its very simple but i think there is a better way.

codePen: https://codepen.io/ivanmt07/pen/JjdeJPY?editors=1010

document.getElementById('btn').addEventListener('click', FillBilling);

function FillBilling() {
  
    var shipName = document.getElementById('shippingname');
    var shipCity = document.getElementById('shippingcity');
  
    var billName = document.getElementById('billingname');
    var billCity = document.getElementById('billingcity');
  
    billName.value = shipName.value;
    billCity.value = shipCity.value;
   
};
2

var ship = [[name],[city],…];
var bill = [[name],[city],…];

3

Hi @montanio19
Can you help me understand your answer maybe you can explain me how to approach your solution, will be more easy for me to understand. I appreciate your time.

4

He first set it to a variable making it locally then set it in an object and closed it off with an ;
This was an example how to store data in an object.
So you can recall it later on
You said you did’t want to copy them by hand did’t you?. This is an sollution of how to do it.

5

Hi there! Not sure if I explain my self correctly or if we are in the same page. If you then I will try to understand it. But what I mean was if you when and look at codepen. There I have 2 input fields, those two input fields I manage to copy them to another different input fields. Now my question is if I have more than 2 fields let said 10 I will have to go back to the js file and write 10 more lines and grab my Elements and do the same thing ? There is a short way I can do all in T once ? To copy them to my other 10 input fields ? Thanks!

6

Store:
var ship = [[name],[city],…];
var bill = [[name],[city],…];
Then you assign directly:
if (condition=){
bill[… ] = ship[… ] ;
}

7

What you are looking for is transferring data dynamically.

If you are approaching your current method, you have to do them manually because you are hard coding everything.

To make things dynamic and say you want to dynamically change 4 input fields.
You’ll need to introduce some pattern in code so that you can loop through them.

For example,

const prefixFrom = "shipping";
const subfixArray = [ "name", "city", "postal", "country" ];

for( let i = 0; i < subfixArray.length; i++ ) {
   const field = document.getElementById( `${prefixFrom}${subfixArray[i]}` );
   console.log( field.value );
}

Does this give you enough hints?

1 Like
8

You would have to collect all the inputs you want to effect and loop over them.

Maybe you mean something like this?
https://codepen.io/br3ntor/pen/jOPQaNe?editors=1010

1 Like
9

Hi there @Cowwy
Thanks for the information it was very helpful, the first post i made i knew i can do it with a for loop, but my problem was that i did not know i can add id’s elements right away in the new array created. that was my problem.

Second looking at you example, it give me a right away solution to what i was looking forward too. So i did the same thing and create another array of billing.

// Create an array and get the id elments for Billed. 
    var sendListBilling = ['billingname','billingcity'];

Then i add a for loop to iterate the shipped ids and make them equal to the billed ones,
and it worked just like my preview example with two elements by hand type.

for( var i = 0; i < copyListShip.length; i++ ){
      document.getElementById(sendListBilling[i]).value = document.getElementById(copyListShip[i]).value
    }

full code:

document.getElementById('btn').addEventListener('click', FillBilling);

function FillBilling() {
    // Create an array and get the id elments for shipped. 
    var copyListShip = ['shippingname','shippingcity'];
    // Create an array and get the id elments for Billed. 
    var sendListBilling = ['billingname','billingcity'];
    // for loop the copyListShip array and tranfer them into te ids of sendListBilling;
    for( var i = 0; i < copyListShip.length; i++ ){
      document.getElementById(sendListBilling[i]).value = document.getElementById(copyListShip[i]).value
    }
  
};

third yes this really gave me enough hints to finish my solution, i appreciate your help on this. i also updated codepen for any future references.
codepen:
https://codepen.io/ivanmt07/pen/JjdeJPY?editors=1010

1 Like
10

Hi @br3ntor thank you so much for your help, it really worked as well this one also shows another way for the solution, also very fast and it seems that this one your collection the first form and add its elements to it, this we will only do an array for it, and will transfer to all elements.

Thank for your help and support.