JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<!--<form action="vote-test.php" method="POST">-->
<!--<input type="text" name="movieID" value="41154" /><br />
<input type="text" name="userID" value="15" /><br />-->
<input type="checkbox" name="scene" id="scene" value="1" data-role="button" />
<label for="checkbox1">Extra Scene(s)</label><br />
<input type="checkbox" name="outtakes" id="outtakes" value="1" data-role="button" />
<label for="checkbox1">Outtakes</label><br />
<input type="checkbox" name="enhanced" id="enhanced" value="1" data-role="button" />
<label for="checkbox1">Enhanced</label><br />
<input type="checkbox" name="teaser" id="teaser" value="1" data-role="button" />
<label for="checkbox1">Teaser</label><br />
<input type="checkbox" name="funny" id="funny" value="1" data-role="button" />
<label for="checkbox1">Funny</label><br />
<input type="checkbox" name="awesome" id="awesome" value="1" data-role="button" />
<label for="checkbox1">Awesome</label><br />
<input type="radio" name="when" id="start" value="1" />
<label for="radio1">Only the Start</label><br />

<input type="radio" name="when" id="middle" value="1"  />
<label for="radio2">Until the Middle</label><br />

<input type="radio" name="when" id="end" value="1"  />
<label for="radio3">Until the Very End</label><br />
<input type="submit" name="whyYesVote" id="whyYesVote" value="Submit" />
<!--</form>-->

JavaScript

//var movieID = getUrlVars()["movieID"];
$('#whyYesVote').click(function() {
  
  //var scene = $('#scene:checked').val();//1 or null?
    //if (scene === undefined) {
    //  scene = null;
    //}
  //var outtakes = $('#outtakes:checked').val();
  //makeNull(outtakes);
  //var enhanced = $('#enhanced:checked').val();
  //var teaser = $('#teaser:checked').val();
  //var funny = $('#funny:checked').val();
  //var awesome = $('#awesome:checked').val();
  //var start = $('#start:checked').val();
  //var middle = $('#middle:checked').val();
  //var end = $('#end:checked').val();
    
  var scene = setValue('scene');
  var outtakes = setValue('outtakes');
  var enhanced = setValue('enhanced');
  var teaser = setValue('teaser');
  var funny = setValue('funny');
  var awesome = setValue('awesome');
  var start = setValue('start');
  var middle = setValue('middle');
  var end = setValue('end');
  
    
  function setValue(varName) {
    if ($('#' + varName + '').attr('checked')) {
      //varName = 1;
      return 1;        
      //return varName;
    }
    else { 
      //varName = null;
      //return varName;
      return null;
    }                
    //alert(outtakes);
}
    
  alert(scene + ' | ' + outtakes + ' | ' + enhanced + ' | ' + teaser + ' | ' + funny + ' | ' + awesome + ' | ' + start + ' | ' + middle + ' | ' + end);

  //function makeNull(type) {
  //  if (type === undefined) {
  //    type = null;   
  //  }
  //}        
});