JSFiddle - React, Tailwind, and code Playground

by cowdd

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form action="/category" method='GET' id="testForm">
  <button type="submit" class="btn btn-default render">
    name
  </button>
</form>

<div class="modal fade" id="render_page" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="form-horizontal">

        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <div id="user_msg" align="left">Rendering Page... </div>
        </div>

      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
      $(".render").click(function(evt) {
        $('#render_page').modal('show');
        
        // add data before submitting
        var input1 = $("<input>")
          .attr("type", "hidden")
          .attr("name", "mydata1").val("value1");
        $('#testForm').append($(input1));
        input2 = $("<input>")
          .attr("type", "hidden")
          .attr("name", "mydata2").val("value2");
        $('#testForm').append($(input2));
        
        // assemble and output submitted data in the console for debugging
        var $inputs = $('#testForm :input');
        var values = {};
        $inputs.each(function() {
          values[this.name] = $(this).val();
        });
        console.log(values);
        
        // For debugging without submitting return false.
        // return true, to submit the form
        return false;
      });
    });