<style type=text/css>
#enterName {
  visibility: hidden;
  padding-left: 50px;
}
</style>

<script type="text/javascript">
var agree=0;  // 0 = 'no', 1 = 'yes'

function agree2() {
  if (!document.getElementById) return false;
  agree=1;
  document.getElementById('box').style.background='#fff000';
  if (agree) {
    document.getElementById('enterName').style.visibility = 'visible';
  }
  document.enableform.box.focus();
}

function disagree() {
  if (!document.getElementById) return false;
  agree=0;
  if (!agree) {
    document.getElementById('enterName').style.visibility = 'hidden';
  }
  document.enableform.done.focus();
}

function goSubmit() {
  if (agree==0) {
    alert("DISGREE: You can insert the next step here");
  } else if (agree==1 && document.enableform.box.value=='') {
      alert("You must enter your name!");
      document.enableform.box.focus();
  } else {
    alert("AGREE: You can insert the next step here");
  }
}
</script>

<form name="enableform">
<input type="radio" name="enable" value="agree" onclick="agree2();">
I agree
<div id="enterName">Please enter your name to show agreement: 
<input type=text id="box" name="box"></div>
<input type="radio" name="enable" value="disagree" onclick="disagree();">
I disagree
<br><br>
<input type="button" value="Done!" name="done" onclick="goSubmit()">
</form>