Display onclick checkbox works. Won't hide and reset values when unchecked

[sallywillard]

When a visitor checks the checkbox, 2 other inputs are displayed. When the visitor unchecks the checkbox, I want the input values reset and the inputs to NOT be displayed.

Appreciate corrections.
SW

I put this on https://jsbin.com/rigozos and GitHubGists

This is the html:

  <style type="text/css" >
    .inpmtcc {display:none;}
    #InPmtMethodTxns_CryptoCurrency, #InPmtMethodRisk_CryptoCurrency  {display:none;}
  </style>

  <div class="row">
    <div class="columns medium-5" >
      <input id="InPmtMethod_CryptoCurrency" type="checkbox" name="InPmtMethod_CryptoCurrency" onclick="javascript:DisplayInPmtCryptoCurrency()" ><label for="InPmtMethod_CryptoCurrency">Crypto Currency</label>
    </div>
    <div class="columns medium-4" >
      <label class="inpmtcc" id="InPmtMethodTxns_CryptoCurrency" >Number Crypto Currency transactions<input id="InPmtMethod_CryptoCurrencyINP" class="inputanumber" type="text" pattern="[0-9]{1,7}" name="InPmtMethodTxns_CryptoCurrency" value="0" ></label>
    </div>
    <div class="columns medium-3" >
      <label class="inpmtcc" id="InPmtMethodRisk_CryptoCurrency" >Rate the Risk (1=highest, 5 lowest)<input id="InPmtMethodRisk_CryptoCurrencyINP" class="inputanumber" type="text" pattern="[1-5]{1,1}" name="InPmtMethodRisk_CryptoCurrency" ></label>
    </div>
  </div>

and the js:

function DisplayInPmtCryptoCurrency() {
	var selectpmCryptoCurrency = document.getElementById("InPmtMethod_CryptoCurrency");
    if (selectpmCryptoCurrency.value=='on') {
        document.getElementById("InPmtMethodTxns_CryptoCurrency").style.display = 'block';
        document.getElementById("InPmtMethodRisk_CryptoCurrency").style.display = 'block';
    } else {
        document.getElementById("InPmtMethodTxns_CryptoCurrency").style.display = 'none';
        document.getElementById("InPmtMethodRisk_CryptoCurrency").style.display = 'none';
        document.getElementById("InPmtMethodTxns_CryptoCurrencyINP").value = 0;
        document.getElementById("InPmtMethodRisk_CryptoCurrencyINP").value = 5;
    }
} 

[m3g4p0p]

Hi @sallywillard, instead of

if (selectpmCryptoCurrency.value=='on') {/* ... */}

you have to check

if (selectpmCryptoCurrency.checked) {/* ... */}

PS: We can’t see your HTML code if you don’t format it as code (e.g. using the </> button in the comment box). This also make it more readable anyway. :-)

[sallywillard]

Thanks, That worked to hide the elements.
I’ll edit my original post to display the html. I tried usine the </> but apparently didn’t do something correctly.
Sally

[m3g4p0p]

You got the transactions input ID wrong – in the HTML it’s InPmtMethod_CryptoCurrencyINP, in the JS InPmtMethodTxns_CryptoCurrencyINP. BTW you can see such errors in console of your browser dev tools:

Uncaught TypeError: Cannot set property ‘value’ of null

[sallywillard]

Thank you.
I updated html from my test page:

  <div class="row">
	  <div class="columns medium-5" >
		  <input id="InPmtMethod_CryptoCurrency" type="checkbox" name="InPmtMethod_CryptoCurrency" onclick="javascript:DisplayInPmtCryptoCurrency()" ><label for="InPmtMethod_CryptoCurrency">Crypto Currency</label>
	  </div>
	  <div class="columns medium-4" >
		  <label class="inpmtcc" id="InPmtMethodTxns_CryptoCurrency" >Number Crypto Currency transactions<input id="InPmtMethodTxns_CryptoCurrencyINP" class="inputanumber" type="text" pattern="[0-9]{1,7}" name="InPmtMethodTxns_CryptoCurrency" value="0" ></label>
	  </div>
	  <div class="columns medium-3" >
		  <label class="inpmtcc" id="InPmtMethodRisk_CryptoCurrency" >Rate the Risk (1=highest, 5 lowest)<input id="InPmtMethodRisk_CryptoCurrencyINP" class="inputanumber" type="text" pattern="[1-5]{1,1}" name="InPmtMethodRisk_CryptoCurrency" ></label>
	  </div>
  </div>

This is the js that works:

function DisplayInPmtCryptoCurrency() {
	var selectpmCryptoCurrency = document.getElementById("InPmtMethod_CryptoCurrency");
    if (selectpmCryptoCurrency.checked) {
        document.getElementById("InPmtMethodTxns_CryptoCurrency").style.display = 'block';
        document.getElementById("InPmtMethodRisk_CryptoCurrency").style.display = 'block';
    } else {
        document.getElementById("InPmtMethodTxns_CryptoCurrency").style.display = 'none';
        document.getElementById("InPmtMethodRisk_CryptoCurrency").style.display = 'none';
        document.getElementById("InPmtMethodTxns_CryptoCurrencyINP").value = 0;
        document.getElementById("InPmtMethodRisk_CryptoCurrencyINP").value = '';
    }
}

I’ve gone thru the live form and tested all of the updated elements. These now work as I had hoped they would.

[sallywillard]

Thanks. I have looked before and not seen errors but then, again, I’ve now updated and all of my form values work and reset.
Thanks very much.
Sally

[coothead]

Hi there sallywillard,

personally, I would remove the event handler from
the HTML and the CSS from the JavaScript…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.hide {
    display:none;
 }

</style>

</head>
<body> 
<form id="cryptoForm" action="#">
 <div class="row">

  <div class="columns medium-5" >
    <input type="checkbox" id="InPmtMethod_CryptoCurrency" name="InPmtMethod_CryptoCurrency">
    <label for="InPmtMethod_CryptoCurrency">Crypto Currency</label>
  </div>

  <div class="columns medium-4" >
    <label class="inpmtcc hide" id="InPmtMethodTxns_CryptoCurrency">Number Crypto Currency transactions
    <input type="text" class="inputanumberCry" name="InPmtMethodTxns_CryptoCurrency" pattern="[0-9]{1,7}" value="0">
    </label>
   </div>

   <div class="columns medium-3" >
     <label class="inpmtcc hide" id="InPmtMethodRisk_CryptoCurrency">Rate the Risk (1=highest, 5 lowest)
     <input type="text" class="inputanumber" name="InPmtMethodRisk_CryptoCurrency" pattern="[1-5]{1,1}">
     </label>
   </div>

  </div>
</form>

<script>
(function( d ) {
   'use strict';
	var spmCC = d.getElementById( 'InPmtMethod_CryptoCurrency' ),
        ipmTCC = d.getElementById( 'InPmtMethodTxns_CryptoCurrency' ),
        ipmMRCC = d.getElementById( 'InPmtMethodRisk_CryptoCurrency' );

        spmCC.addEventListener( 'input', 
          function(){
             if ( spmCC.checked ) {
                  ipmTCC.classList.remove( 'hide' );
                  ipmMRCC.classList.remove( 'hide' );
              } 
             else {
                  ipmTCC.classList.add( 'hide' );
                  ipmMRCC.classList.add( 'hide' );

                  d.getElementById( 'cryptoForm' ).reset();
         }
     },false);
}( document ));
</script>

</body>
</html>

coothead

[sallywillard]

Thank you.
This is just 1 of 6 types of transactions the form asks people about. For that reason the form reset won’t work for this purpose.
Would I create a function () for each of my txn types or can I use an array?

Sally

[m3g4p0p]

It would certainly make sense to abstract away that functionality, for example using data attributes:

HTML

<div>
  <label>
    <input type="checkbox" data-toggle="foo">
    Toggle "foo"
  </label>
</div>

<div id="foo" class="hidden">
  <label>
    The foo value
    <input value="foo">
  </label>
</div>

<div>
  <label>
    <input type="checkbox" data-toggle="bar">
    Toggle "bar"
  </label>
</div>

<div id="bar" class="hidden">
  <label>
    The bar value
    <input value="bar">
  </label>
  <label>
    The other bar value
    <input value="baz">
  </label>
</div>

JS

var toggleBoxes = document.querySelectorAll('[data-toggle]')

var restoreDefault = function (element) {
  element.value = element.defaultValue
}

toggleBoxes.forEach(function (toggleBox) {
  // Get the element that should be toggled...
  var toggleTarget = document.getElementById(toggleBox.dataset.toggle)
  // ... and the input elements it contains
  var containedInputs = toggleTarget.querySelectorAll('input')

  toggleBox.addEventListener('click', function () {
    if (toggleBox.checked) {
      // Show the target element
      toggleTarget.style.display = 'block'
    } else {
      // Hide the target element
      toggleTarget.style.display = 'none'
      // Reset the values of all contained input elements
      // to their default values (i.e. their `value` attribute)
      containedInputs.forEach(restoreDefault)
    }
  })
})

(Storing those relations in the JS would be possible too, but it’s better to keep the JS as agnostic as possible as to how the markup looks like.)

[sallywillard]

I’ll play with this and come back with future questions.
This is the first survey for this group but I have other sites and forms that will certainly benefit from all I’ve picked up (and learned) today.
Thanks,
Sally