jQuery Plugin Form To CSS - form to CSS generator

jQuery Plugin Form To CSS form to CSS generator

by onigetoc

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://gitcdn.xyz/cdn/onigetoc/FormToCSS/601091988830ad4bcbb63db8df7a1cdb5ff9652e/js/jquery.serializejson.min.js"></script>
<script src="https://cdn.rawgit.com/senchalabs/cssbeautify/master/cssbeautify.js"></script>
<script src="https://rawgit.com/onigetoc/iTabbar/master/src/cssParser.js"></script>
<script src="https://cdn.rawgit.com/onigetoc/FormToCSS/master/js/formtocss.js"></script>
<div class="container">

  <div class="row">
    <div id="targetDIV" class="col-sm-6">
      <h2>Form to CSS generator | jQuery Plugin</h2>

      <form class="form-horizontal formClass well well-small">
        <!--<form class="form-inline formClass"> -->
        <fieldset>

          <!-- Form Name -->

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">Body Background: </label>
            <div class="col-md-8">
              <input type="text" id="bodycolor" name="body[background-color]" placeholder="placeholder" value="#feb" class="form-control input-md">
              <span class="help-block">name="body[background-color]"</span>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">H2 Background Color:</label>
            <div class="col-md-8">
              <input type="text" class="form-control input-md" name="h2[background-color]" value="#fff" />
              <span class="help-block">name="h2[background-color]" value="#fff"</span>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">Class .container font-size</label>
            <div class="col-md-8">
              <input type="number" class="form-control input-md" max="20" min="1" name=".help-block[font-size]:px" value="14" />
              <span...

JavaScript

/**** CALL fortoCSS PLUGIN ****/
$(".formClass").formtoCSS({
  beautify: true,
  prefix: true,
  target: '#targetDIV',
  targetShow: true,
  addcss: '#addcss', // add more css from #addcss hidden textarea
  output: 'pre,#result'
});
/*******************************/
//$(".formClass input:first").keyup();

/************************* JQUERY CODE TO DO OTHERS THINGS AND TRICKS ************************/

/**** RESET FORM ****/

$("#resetform").on("click", function() {
  $(".formClass")[0].reset();
  $(".formClass input:first").keyup(); //keyup to trigger the change
})

// Trick: Trigger change on load or anytime value on .val ect with keyup():
//$("#bodycolor").val('#f43').keyup();
//$(".formClass input:first").keyup();