Hiding parts of a form with javascript

Question

I am working within an application that allows me to alter the HTML code of a website software that we license. I am running in to an issue in that all of the fields are showing up at once and not entirely sure how to alter them to only show up if called on. I have seen alot of talk about Jquery for this scenario, but have no knowledge about that or any way to apply it, so I need to accomplish this inside of an HTML cell with either only HTML or embedded javascript. Any help is greatly appreciated!

In the image below, I have included a screenshot of the form that I am working with as well as the code below. Basically, Payment Method has two options: Credit card or department charge, and when credit card is selected I need the three additional options to disappear (Cost center, Full Account Number and USPS Postage method) and when Department charge is selected for them to show up again.

Below I've attached the code for their respective elements.

Choose payment method:

<div id="ctl00_content_CartBilling_ucPaymentMethod_divPaymentMethodText" class="PromptText">

<strong><span id="ctl00_content_CartBilling_ucPaymentMethod_Stringcontrol1"><b>Choose Payment Method:</b></span></strong>

Payment Method Selector

<div id="ctl00_content_CartBilling_ucPaymentMethod_divDdlPaymentMethod" class="SideMargin20">
<select name="ctl00$content$CartBilling$ucPaymentMethod$ddlPaymentMethod" id="ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod" class="DropDownMin150" onchange="CheckPurchaseMethodForNonCC( this );">
<option selected="selected" value="2">Credit Card</option>
<option value="11">Departmental Charge (enter number below)</option>

Additional Elements that need to hide when "Credit Card" selection of drop down is active

<div id="ctl00_content_CartBilling_divCostCenterDDL" class="SideMargin20">
                    <select name="ctl00$content$CartBilling$ddlCostCenter" onchange="javascript:setTimeout('__doPostBack(\'ctl00$content$CartBilling$ddlCostCenter\',\'\')', 0)" id="ctl00_content_CartBilling_ddlCostCenter" class="DropDownMin150">
<option selected="selected" value="0"></option>
<option value="1097005">1 - Credit Card</option>
<option value="1148142">2 - Account Charge</option>

<tr>
        <td colspan="3">
            <div id="w2p_form"><table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td><div class="PromptText"><strong><span>Full Account Number:</span></strong>  <span>(All Products)</span></div></td></tr><tr><td><div class="SideMargin20"><input name="CustomOrderField_69773" type="text" id="CustomOrderField_69773" size="50" maxlength="50" runat="server" onkeyup="SetItemLevelCustomOrderFieldTextBoxes(this, 'txtItemLevelCustomOrderField1');"></div></td></tr><tr><td><div class="PromptText"><strong><span>Postage Method (If applicable):</span></strong>  <span>(All Products)</span></div></td></tr><tr><td><div class="SideMargin20"><select name="CustomOrderField_69806" onchange="SetItemLevelCustomOrderFieldDropDown(this, 'ddlItemLevelCustomOrderField2');" id="CustomOrderField_69806" size="1" runat="server" align="top" style="vertical-align:top;width:122.8841px;">
<option value="12557~^&amp;USPS Bulk">USPS Bulk</option>
<option value="12590~^&amp;USPS First Class">USPS First Class</option>

score 0 · Answer 1 · answered Jul 10 '17 at 19:13

It appears as this has been answered already here. Here's the solution:

<script type="text/javascript">
function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

score 0 · Answer 2 · answered Jul 10 '17 at 19:17

Non jQuery answer:

Make a class called "hidden" or something and add it to all the input tags that you want to be able to hide, and make

display: none;

Then, using javaScript, we can check which button is selected:

var hideElements = document.getElementsByClassName(".hidden") // grabs elements

if(DropDownMin150.value === "1097005"){ //checks if credit card is selected

       hideElements.style.display = "hidden"; //hides the elements

 }
 else if(DropDownMin150.value === "1148142"){ //checks selection

       hideElements.style.display = "block"; // displays the options again.
}

score 0 · Answer 3 · answered Jul 10 '17 at 19:20

This is actually pretty simple and, while it can be done with JQuery, JQuery is hardly necessary and I would advise against using it as it is very simple without it.

All you really need is a CSS class that defines its corresponding elements as hidden. Then, based on which payment method is clicked, that class is either added or removed from the elements in question. That's it.

// Get references to elements:
var select = document.getElementById("ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod");
var special = document.getElementById("special");

function CheckPurchaseMethodForNonCC(sel){
  if(sel.value === "2"){
    special.classList.remove("hidden");
  } else {
    special.classList.add("hidden");  
  }
}

/* Adding elements to this class hides them, removing elements from this class 
   reverts them back to their original display value.    */
.hidden { display:none; }

<div id="ctl00_content_CartBilling_ucPaymentMethod_divPaymentMethodText" class="PromptText">
  <span id="ctl00_content_CartBilling_ucPaymentMethod_Stringcontrol1">
    <strong>Choose Payment Method:</strong>
  </span>
  
  <div id="ctl00_content_CartBilling_ucPaymentMethod_divDdlPaymentMethod" class="SideMargin20">
    <select name="ctl00$content$CartBilling$ucPaymentMethod$ddlPaymentMethod"
            id="ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod" class="DropDownMin150"
            onchange="CheckPurchaseMethodForNonCC(this);">
      <option selected="selected" value="2">Credit Card</option>
      <option value="11">Departmental Charge (enter number below)</option>
    </select>   
  </div>
</div>

<div id="special" class="hidden">
  Sometimes you'll see me, sometimes you won't!
</div>

score -1 · Answer 4 · answered Jul 10 '17 at 19:12

These names of classes and IDs are too long and option values are crazy too.

But this is what you are looking for

$(document).on('change','#ctl00_content_CartBilling_ucPaymentMethod_ddlPaymentMethod', function() {
  if ($(this).val() == 1097005) {
      $('#ctl00_content_CartBilling_divCostCenterDDL').hide();
  } else {
      $('#ctl00_content_CartBilling_divCostCenterDDL').show();
  }
})

Hiding parts of a form with javascript

4 Answers4