JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form class="form-horizontal" action="finish.php" method="post" id="additional">
      <input type="hidden" name="recid" value="1">

      <table class="table table-condensed table-hover table-bordered">

		  <tr>
		  <td><strong>Adverse events</strong></td>
		  <td>Have you had a new medical condition or an exacerbation of an existing condition since the last contact with the study researchers, including dizziness or sweating?</td>
		  <td>
			  <div class="controls">
	      		  <label class="radio inline">
		  <input type="radio" name="AE_W2" id="AE_W2Yes" value="" required>Yes</label>
		  		  <label class="radio inline">
		  <input type="radio" name="AE_W2" id="AE_W2No" value="" required>No</label>
		  		  <label for="AE_W2" class="error"></label>
	    </div>
		  </td>
		  </tr>
		  
		  
		  <tr id="adverseEventDetails">
		  <td></td>
		  <td>Please describe this and when it started</td>
		  <td>
			  <div class="controls">
		  <textarea name="AE_Details_W2" id="AE_Details_W2" rows="3"></textarea>
		  <label for="AE_Details_W2" class="error"></label>
	    </div>
		  </td>
		  </tr>

		  
		  
		  
		  </table>
       </div>

      
      

	  
	 

	  
       
       	<div class="control-group">
		    <div class="controls">
		      <button type="submit" class="btn btn-primary">Continue</button>
		      <button type="reset" class="btn">Reset</button>
		    </div>
		</div>
    
      </form>

JavaScript

$().ready(function() {
		// validate the form when it is submitted
		$("#additional").validate();
		
		if($("#AE_W2yes:checked").length != 0){
					// yes is checked... show the dependent fields  
						$("#adverseEventDetails").show(); 
					}else{
						// hide it and blank the fields, just in case they have something in them
						$("#adverseEventDetails").hide(); 
						$("#AE_Details_W2").val("");
					}


		$("#AE_W2yes").click(function () {
    $("#adverseEventDetails").show();
});

$("#AE_W2no").click(function () {
    $("#adverseEventDetails").hide();
    $("#AE_Details_W2").val("");
});
		
		});