JSFiddle - React, Tailwind, and code Playground

by Devendra Mani

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://montrezorro.github.io/bootstrap-checkbox/javascripts/bootstrap-checkbox/css/bootstrap-checkbox.css">
<script src="http://montrezorro.github.io/bootstrap-checkbox/javascripts/bootstrap-checkbox/js/bootstrap-checkbox.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<form class="form" method="POST" action="unit-reservation.php" id="reservationForm">
<div class="form-horizontal">
            <div class="control-group">
              <label class="control-label"><b>Firstname (*):</b></label>
              <div class="controls">
                <input type="text" name="customerfname" required />
              </div>
            </div>
            <div class="control-group">
              <label class="control-label"><b>Middlename (*):</b></label>
              <div class="controls">
                <input type="text" name="customermname" required />
              </div>
            </div>

            <div class="control-group">
              <label class="control-label"><b>Lastname (*):</b></label>
              <div class="controls">
                <input type="text" name="customerlname" required />
              </div>
            </div>

            <div class="control-group">
              <label class="control-label"><b>Email Address (*):</b></label>
              <div class="controls">
                <input type="email" name="customeremailaddress" required />
              </div>
            </div>

            <div class="control-group">
              <label class="control-label"><b>Address:</b></label>
              <div class="controls">
                <input type="text" name="customeraddress"  required />
              </div>
            </div>

            <div...

JavaScript

$(function(){

  $(".btn-show-modal").click(function(e){ 
    e.preventDefault(); 
    var id = $(this).attr('id'); 
    var modal_id = "dialog-example_"+id; 
    $("#"+modal_id).modal('show'); 
  });

  $(".btn btn-custom").click(function(e) {
    var id = $(this).attr('id');
    var modal_id = "dialog-example_"+id;
    $("#reservationForm").submit();
    $("#"+modal_id).modal('hide');
  });


});