Display hidden text input field javascript

Question

I want to display the hidden text field for user to enter if they had chosen particular drop box's value. here is my snippet code

var cCust = document.getElementsByName('customerType');
cCust.onchange = cType;

function cType(){
		var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}
		
	}

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

There is no error shown in console.
Here is the reference that I refer to. See here
It changes the getElementById to getElementsByNames according to my form attributes.
Is there anything I missed or mistake??

Roljhon · Accepted Answer · 2017-04-06 08:27:38Z

2

The reason why your onchange event handler is not being assign to your select element is because the document.getElementsByName('customerType') will return an array and not the exact reference. You should be pointing to your index 0. See below:

var cCust = document.getElementsByName('customerType');
cCust[0].onchange = cType;
function cType(){
		//var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}		
}

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

answered Apr 6, 2017 at 8:27

Roljhon

1,3392 gold badges9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ccs Over a year ago

As i follow the reference, all of the attribute used is ID, getElementById. However in my form, it using getElementsByName, What i don't understand is why we have to assign an array to getElementsByName while getElementById do not need?

Roljhon Over a year ago

getElementsByName will tend to get all the elements and will return a collection of that element/ s while getElementById will get the first instance of the element with the corresponding ID. That' why it is used for referencing a specific element unlike the getElementsByName. If you want to use getElementById on your select, provide an ID to it.

Mamun · Accepted Answer · 2017-04-06 08:24:19Z

Your onchange were not firing. I think you can carry on with the following:

function cType(){
    var cCust = document.getElementsByName('customerType');
    var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
    
    alert(selectValue);
    
    if (selectValue == "trd"){
        document.getElementById('tradeCustDetails').style.visibility ="visible";
        document.getElementById('retCustDetails').style.visibility="hidden";
        
    }
    else{
        document.getElementById('tradeCustDetails').style.visibility ="hidden";
    }
    
}

<form id= "bookingForm">
<section id="placeOrder">
      <h2>Place order</h2>

      Customer Type: <select name="customerType" onchange="cType()">
          <option value="">Customer Type</option>
          <option value="ret">Customer</option>
          <option value="trd">Trade</option>
      </select>

      <div id="retCustDetails" class="custDetails">
          Forename <input type="text" name="forename" value=""/>
          Surname <input type="text" name="surname" value ="" />
      </div>
      <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
          Company Name <input type="text" name="companyName" />
      </div>
  </section>
</form>

AryKay · Accepted Answer · 2017-04-06 08:24:30Z

Your issue was with the way you invoked onChange for customerType. I removed it from your script and added it as an attribute to the html as onChange="cType(this)". This way every time the value of the dropdown changes, function cType is called with the current context (this) as parameter.

Hope this helps :)

function cType(){
		var cCust = document.getElementsByName('customerType');
		var selectValue =  cCust[0].options[cCust[0].selectedIndex].value;
		
		alert(selectValue);
		
		if (selectValue == "trd"){
			document.getElementById('tradeCustDetails').style.visibility ="visible";
			document.getElementById('retCustDetails').style.visibility="hidden";
			
		}
		else{
			document.getElementById('tradeCustDetails').style.visibility ="hidden";
		}
		
	}

<form id= "bookingForm">
<section id="placeOrder">
			<h2>Place order</h2>
		
			Customer Type: <select name="customerType" onChange="cType(this)">
				<option value="">Customer Type</option>
				<option value="ret">Customer</option>
				<option value="trd">Trade</option>
			</select>

			<div id="retCustDetails" class="custDetails">
				Forename <input type="text" name="forename" value=""/>
				Surname <input type="text" name="surname" value ="" />
			</div>
			<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
				Company Name <input type="text" name="companyName" />
			</div>
		</section>
    </form>

muratoner · Accepted Answer · 2017-04-06 08:39:23Z

Why you dont use direct onchange event in html?

<select name="customerType" onchange="cType()">
    <option value="">Customer Type</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

Snippet

var cCust = document.getElementsByName('customerType');
cCust.onchange = cType;

function cType() {
    var selectValue = cCust[0].options[cCust[0].selectedIndex].value;

    alert(selectValue);
    debugger;
    if (selectValue == "trd") {
        document.getElementById('tradeCustDetails').style.visibility = "visible";
        document.getElementById('retCustDetails').style.visibility = "hidden";

    } else {
        document.getElementById('tradeCustDetails').style.visibility = "hidden";
    }

}

<form id= "bookingForm">
	<section id="placeOrder">
		<h2>Place order</h2>

    Customer Type: 
		<select name="customerType" onchange="cType()">
			<option value="">Customer Type</option>
			<option value="ret">Customer</option>
			<option value="trd">Trade</option>
		</select>
		<div id="retCustDetails" class="custDetails">
            Forename 
			<input type="text" name="forename" value=""/>
            Surname 
			<input type="text" name="surname" value ="" />
		</div>
		<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
            Company Name 
			<input type="text" name="companyName" />
		</div>
	</section>
</form>

Benji Lees · Accepted Answer · 2017-04-06 08:44:43Z

document.getElementsByName('customerType') returns an array like object of elements with the attribute name='customerType'.

document.getElementsByName('customerType')[0] will return the first element with the attribute name='customerType'.

This should work

var cCust = document.getElementsByName('customerType')[0];
cCust.onchange = cType;

function cType() {
  var cCust = document.getElementsByName('customerType')[0];
  console.log(cCust.options[cCust.selectedIndex].value)
  var selectValue = cCust.options[cCust.selectedIndex].value;


  if (selectValue == "trd") {
    document.getElementById('tradeCustDetails').style.visibility = "visible";
    document.getElementById('retCustDetails').style.visibility = "hidden";

  } else {
    document.getElementById('tradeCustDetails').style.visibility = "hidden";
  }

}

Collectives™ on Stack Overflow

Display hidden text input field javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related