JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/project/bootstrap.css">
<script src="http://tapmodo.github.io/jsintro/project/formy.js"></script>
<script src="http://tapmodo.github.io/jsintro/project/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/project/datepicker.css">
<div class="container">
    <div class="header">
      <ul class="nav nav-pills pull-right">
        <li><a href="http://tapmodo.github.io/jsintro/">Class Home</a></li>
      </ul>
      <h3 class="text-muted">My Project</h3>
    </div>

    <div class="jumbotron">
      <h1>Signup Form</h1>
      <p>Use the form on this page to sign up for a demo!</p>
    </div>


    <form role="form" id="signupForm">

    <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label for="nameInput">Your Name</label>
        <input
          type="text"
          class="form-control"
          name="name"
          placeholder="Enter your name"
          data-rules="required"
          data-message="You have to enter something here"
        />
      </div>
    </div>
    </div>

    <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="emailInput">Email Address</label>
        <input
          type="text"
          class="form-control"
          name="email"
          placeholder="Enter your email"
          data-rules="required, email"
          data-message="You don't know how to write a valid email?"
        />
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="phoneInput">Phone Number</label>
        <input
          type="text"
          class="form-control"
          name="phone"
          placeholder="Enter your digits"
          data-rules="required, phone"
          data-message="That ain't a phone # home girl."
        />
     ...

JavaScript

//Act 10.3   Submit Handler - 10.8 collect form data


$(function() {
    var signupForm = new $.Formy('#signupForm');
    
    $('[name=date]').datepicker();
    
    //submit handler
    $('#signupForm').submit(function(e) {
        if(signupForm.validate()) {
            $.get(
    "http://jsintro.apps.tapmodo.net/save?callback=?",   // URL
    $("#signupForm").serializeArray(),                     // Form Data
    function (data) { console.log(data); },      // Callback
    "jsonp"                                            // type (jsonp)
                

);
        }
        //alert("Form submit attempted. You are a NAUGHTY girl!");
    return false;   
    });
     
});