CODEWITHSUNDEEP
javascript
Shweta Patil
Shweta Patil

Reputation: 35

Javascript function working only for first FORM

I have a form with javascript function for copying the SELECT dropdown value onchange to Input Hidden field.

below is my code:

function setBilling(){
    var ddl = document.getElementById("billing");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-bill");
    var textBox = document.getElementById("billingcycle");
    if(mailValue=="1"){
    	textBox.value = "First";
    }
    else if(mailValue=="2"){
    	textBox.value = "Second";
    }
}
<div class="box1">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box2">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box3">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box4">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

Javascript Function is working with 1st Div, but not working with remaining DIV. I tried to all other javascript functions but none of it is working.

What should I do to execute in javascript functions in all divs?

Upvotes: 0

Views: 198

Answers (3)

Corey
Corey

Reputation: 200

You are using id's that are NOT unique. You would need to do something like this, or use classes and change the code accordingly. JSFiddle Here...

<div class="box1">
<form action="" method="post">
<input type="hidden" name="billingcycle1" id="billingcycle1"/>
<select id="billing1" onchange="setBilling('1')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box2">
<form action="" method="post">
<input type="hidden" name="billingcycle2" id="billingcycle2"/>
<select id="billing2" onchange="setBilling('2')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box3">
<form action="" method="post">
<input type="hidden" name="billingcycle3" id="billingcycle3"/>
<select id="billing3" onchange="setBilling('3')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box4">
<form action="" method="post">
<input type="hidden" name="billingcycle4" id="billingcycle4"/>
<select id="billing4" onchange="setBilling('4')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>





function setBilling(boxNum){
    var ddl = document.getElementById("billing" + boxNum);
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-bill");
    var textBox = document.getElementById("billingcycle" + boxNum);
    if(mailValue=="1"){
        textBox.value = "First";
    }
    else if(mailValue=="2"){
        textBox.value = "Second";
    }
}

Upvotes: 1

Engin Ardı&#231;
Engin Ardı&#231;

Reputation: 2469

function setBilling(element) {
  var ddl = element;
  var selectedOption = ddl.options[ddl.selectedIndex];
  var mailValue = selectedOption.getAttribute("data-bill");
  var textBox = document.getElementById("billingcycle");
  if (mailValue == "1") {
    textBox.value = "First";
  } else if (mailValue == "2") {
    textBox.value = "Second";
  }
}
<div class="box1">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box2">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box3">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box4">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

Upvotes: 0

Hans
Hans

Reputation: 968

The problem here is that your HTML is invalid, since it uses the same ID on multiple elements.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id: "The id global attribute defines a unique identifier (ID) which must be unique in the whole document."

When you run document.getElementById("billing");, it only returns the first node with the ID of billing.

Consider using different IDs, or use a class and getElementsByClassName or querySelectorAll.

Upvotes: 3

Related Questions