CODEWITHSUNDEEP
javascriptjqueryhtml
MailBlade
MailBlade

Reputation: 339

Copy text from text box onkeyinput to other textbox based on dropdown?

Good day.

I need to copy what's being typed into a textbox to multiple other text boxes.

The catch is that there is a dropdown which must determine this.

The process: User will enter a "Commodity" into the "Commodity" text box.

After this, they will then select from a dropdown the number of "Delivery Places". If they choose "1"; textbox "Commodity1" will have the same contents as the main "Commodity" textbox.

If they choose "2" as "DeliveryPlaces", both "Commodity1" & "Commodity2" will have the contents typed into "Commodity". This process should follow until "5" for "DeliveryPlaces".

The reason I want it done like this is that most of our clients will only order one type of commodity, even though it will be transported to multiple locations;

function copy(){
if (document.getElementById("DeliveryPlaces").value = "1")
  {
    document.getElementById("Commodity1").value=document.getElementById("Commodity").value;

  }
  
 else if (document.getElementById("DeliveryPlaces").value = "2")
  {
    document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity2").value=document.getElementById("Commodity").value;

  }
  
  else if (document.getElementById("DeliveryPlaces").value = "3")
  {
    document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity3").value=document.getElementById("Commodity").value;

  }
  
  else if (document.getElementById("DeliveryPlaces").value = "4")
  {
    document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity3").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity4").value=document.getElementById("Commodity").value;

  }
  
  else if (document.getElementById("DeliveryPlaces").value = "5")
  {
    document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity3").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity4").value=document.getElementById("Commodity").value;
	document.getElementById("Commodity5").value=document.getElementById("Commodity").value;

  }
  
else 
  {
      document.getElementById("Commodity1").value="";
	  document.getElementById("Commodity2").value="";
	  document.getElementById("Commodity3").value="";
	  document.getElementById("Commodity4").value="";
	  document.getElementById("Commodity5").value="";

  }
}
<p>
Commodity
</p><input type="textbox" id="Commodity" onkeyinput="copy();">
<p>
Commodity1
</p><input type="textbox" id="Commodity1"> 
<p>
Commodity2
</p><input type="textbox" id="Commodity2">
<p>
Commodity3
</p><input type="textbox" id="Commodity3">
<p>
Commodity4
</p><input type="textbox" id="Commodity4">
<p>
Commodity5
</p><input type="textbox" id="Commodity5">

<p>
Delivery Places
</p>
<select style="width:50px;" id="DeliveryPlaces">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

so by filling it in automatically we save the user some time.

I managed to get it working without the if conditions, that was simple enough. Now, however, it's only filling in "Commodity1" even though I choose a "DeliveryPlace" which IS NOT "1".

Any help would be appreciated.

Upvotes: 0

Views: 150

Answers (4)

Habbi
Habbi

Reputation: 301

I would do it like this: 

function copy() {
    var e = document.getElementById("DeliveryPlaces")
    var selection = parseInt(e.options[e.selectedIndex].value);
    var input = document.getElementById("Commodity").value;
    var field;

    for (var i = 1; i < 6; i++) {
        field = "Commodity" + i;
        if (i <= selection) {
            document.getElementById(field).value = input;
        } else {
            document.getElementById(field).value = "";
        }
    }
}

This way, you can clear the other commodities, when you change to a lower delivery place + you can easily add more by editing the for loop.

Upvotes: 2

AE1
AE1

Reputation: 77

Switch:

if (document.getElementById("DeliveryPlaces").value = "1")

to if (document.getElementById("DeliveryPlaces").value == "1")

The code is actually switching DeliveryPlaces to 1 in your statement

Upvotes: 2

DeCo
DeCo

Reputation: 21

Your function should receive the number of the dropdown. That is, if you selected 2 copy (2) so you can use a for and go through the ones you want to fill

for (i = item.length; i = 0; i--) { 
    document.getElementById("Commodity"+i).value=document.getElementById("Commodity").value;
}

The for will go from low to high until it reaches 0. that means that it will count if it is 5. 5,4,3,2,1 and will fill all the fields that you want. This avoids the amount of spaghetti code you have in your structure.

I understand that you are using pure javascript. But you could use jquery and it would make the job easier.

Upvotes: 1

Kamikazi
Kamikazi

Reputation: 77

Try using:

var e = document.getElementById("DeliveryPlaces")
var selection = e.options[e.selectedIndex].value;

Then do your condition based on the value in selection.

you are currently selecting the value of the Select element not the option you have actually selected.

Edit: it may be text rather than value you need on your selection, but give it a go!

Upvotes: 2

Related Questions