How to hide and show label control JavaScript?

Question

I have a project in which I have to set shipping address for online shopping. For paying, payment option are various credit cards for example: paypal, visa etc. so payment option is a drop down menu.

I have two labels namely "creditcard no" and "ccv". these should be hidden initially. Once payment option (from dropdown) is chosen, those two labels should appear.

$(document).ready(function() {
  $('.nav-toggle').click(function() {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function() {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Show');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });

});

.round-border {
  border: 1px solid #eee;
  border: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section class="round-border">
    <div>
      <button href="#collapse1" class="nav-toggle">credit card</button>
    </div>
    <div id="collapse1" style="display:none">

      <label>
        Payment Option

        <select name="credit">
          <option value="paypal">Paypal</option>
          <option value="Visa">Visa</option>
          <option value="Visa">Master Card</option>
          <option value="Discover">Discover</option>
          <option value="American Express">American Express</option>
          <option value="Alipay">Alipay</option>
        </select>
      </label>

      <br>Card Number:
      <input type="text" size="24" maxlength="20" name="cc_number" onBlur="
          
          cc_number_saved = this.value;
          this.value = this.value.replace(/[^\d]/g, '');
          if(!checkLuhn(this.value)) {
            alert('Sorry, this is not a valid number - Please try again!');
            this.value = '';
          }
        " onFocus="
          // restore saved string
          if(this.value != cc_number_saved) this.value = cc_number_saved;
        ">
      <input type="submit" type="submit" name="submit" value="Ok">
      <br>ccv:&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <input type="text" name="ccv" required>
      <br>
    </div>
  </section>
</body>

Simply add an event listener on the dropdown `onChange="displayFields();"`. Optionally in your displayFields function you could check and make sure an option was actually selected before displaying the fields. Obviously the fields are initially hidden with css `display:none`. — atomCode, Mar 25 '15 at 04:00
Thank you @atomcode for replying soon. Is there any example or link i can look because i am new to javascript and asp. Thanks alot — toofaced, Mar 25 '15 at 04:06
I recommend you learn more about the onChange event [here](http://www.w3schools.com/jsref/event_onchange.asp). Also look at css display [here](http://www.w3schools.com/css/css_display_visibility.asp) — atomCode, Mar 25 '15 at 04:08
Also to change the css style display attribute with basic javascript [follow this example](http://www.w3schools.com/jsref/prop_style_display.asp). This is what you would put in your function. — atomCode, Mar 25 '15 at 04:13
This is not a good way to ask a question here. Did you try anything so far to solve your problem? Show your effort first so people might show theirs. — Rajesh, Mar 25 '15 at 04:22
This is like, you are asking people to write code for you. Hiding and showing the contents is very common and easy thing. You should try something and share so that others will help you to find the error in your code. — BabyDuck, Mar 25 '15 at 06:33

JMP · Answer 1 · 2015-03-25T09:56:15.450

0

This code does what you ask.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
  display:none;
}
</style>
<script> 
function display() {
  ccn.style.display='inherit';
  ccv.style.display='inherit';
}
</script>
</head>
<body>
<form>
<select onchange='display();'>
  <option selected>Please select...</option>
  <option>Visa</option>
  <option>MasterCard</option>
  <option>Paypal</option>
</select>
<label id='ccn'>Credit Card Number</label>
<label id='ccv'>Credit Card Validation</label>
</form>
</body>
</html>

function display() {
  ccn.style.display = 'inherit';
  ccv.style.display = 'inherit';
}

label {
  display: none;
}

<form>
  <select onchange='display();'>
    <option selected>Please select...</option>
    <option>Visa</option>
    <option>MasterCard</option>
    <option>Paypal</option>
  </select>
  <label id='ccn'>Credit Card Number</label>
  <label id='ccv'>Credit Card Validation</label>
</form>

The CSS for the label element initially doesn't display the labels. When the dropdown is changed the onChange event fires, which calls the display() function. This then makes the labels visible by changing the style of the labels via the DOM.

I didn't know about the script rule, but for conformities sake, I have altered the code.

edited Mar 25 '15 at 09:56

answered Mar 25 '15 at 04:47

JMP

4,417
17
30
41

Do you intend to explain the code? See [How do I write a good answer?](http://stackoverflow.com/help/how-to-answer) – user692942 Mar 25 '15 at 09:25
Not the best example either what happens if they choose "Please select..." again? A better approach would be to create a toggle function or just harness jQuery framework to accomplish it. – user692942 Mar 25 '15 at 09:35
The code also incorporates bad practice such as placing ` – user692942 Mar 25 '15 at 09:45
While the edit is better there is no need to move it into the `` unless you are going to use `defer`, you just needed to move it to the end of the body but before the ``. Placing it in the `` is fine but can have performance implications without using `defer`. See [Where is the best place to put – user692942 Mar 25 '15 at 10:24
I didn't know it makes any difference - aren't HTML5, CSS3 and JavaScript all asynchronous, so its load HTML, apply CSS, execute script? – JMP Mar 25 '15 at 10:32
They are protocols nothing more, they're still dependent on what the browser supports and while most "modern" browser will support async loading of script and css some do not. HTML5 provides `async` and `defer` attributes for this very reason. See [Deep dive into the murky waters of script loading](http://www.html5rocks.com/en/tutorials/speed/script-loading/). Just because we use HTML5 doesn't mean this isn't still an issue. – user692942 Mar 25 '15 at 10:54
why don't all the external scripts just lie on the client-side? - it would save a lot of time. is there any info on what browsers are currently most popular? – JMP Mar 25 '15 at 10:57
Kind of going off topic a bit now, but [statcounter.com](http://gs.statcounter.com/#browser-ww-monthly-201403-201502) should shed some light on the subject. Also can [compare individual versions](http://gs.statcounter.com/#browser_version-ww-monthly-201403-201502). – user692942 Mar 25 '15 at 11:06
Thanks @ Jon Mark Perry. @Lankymart, i used a toggle as i suggested. It worked nicely in .html yet didn't work in .asp. Thanks all for helping me out. – toofaced Mar 25 '15 at 15:43

How to hide and show label control JavaScript?

1 Answers1