JSFiddle - React, Tailwind, and code Playground

by Renoir Boulanger

HTML

<!doctype html>
<html>
    <head>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span12">
                    <h1>Confirm form before submitting using Twitter Bootstrap in a Modal window</h1>                    
<form class="form-horizontal" method="post" data-behavior="confirm">
    <caption>Testing form submit</caption>
        <fieldset>
            <div class="control-group"><label class=" control-label" for="formOne_field0">
            Text field
                    </label><div class="controls"><input type="text" value="" placeholder="00000000" name="formOne[field0]" id="formOne_field0"><p class="help-block">Some help block</p></div></div>
            <div class="control-group">
                <label class=" required control-label" for="formOne_field1">
            Field one
            <span title="Required" class="required-star"></span></label><div class="controls"><select required="required" name="formOne[field1]" id="formOne_field1"><option value="1">Option One</option><option value="1">Option One</option></select></div></div>
            <div class="control-group "><label class=" required control-label">
            End Date
            <span title="Required" class="required-star"></span></label><div class="controls"><div class="" id="formOne[fieldDate]"><select class=" input-small" required="required" name="formOne[fieldDate][month]" id="formOne_fieldDate_month"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option selected="selected" value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option...

CSS

.modal-wide {
  overflow:visible;
  width: 650px;
}

.modal-builder .control-label {
      padding:0 !important;
      font-weight:bold;
}


 /* In case you use a span.required-star
  * with title="required field", I don't want to
  * have them in modal
  **/
.modal-builder  .required-star {
    display:none;
}

.is-hidden,
.modal-builder .hide-in-confirm {
  display:none !important;
}

JavaScript

$(document).ready(function(){

    /**
     * Use form's content into a confirmation modal
     *
     * Using: http://nikku.github.com/jquery-bootstrap-scripting/
     * Requires: Twitter Bootstrap, dialog2
     *
     * @author: Renoir Boulanger
     */
    if ($('form[data-behavior=confirm]').length >= 1) {

        console.log('run.js: document ready : Applying confirmation, ' + $('form[data-behavior=confirm]').length + ' times');

        $('form[data-behavior=confirm] select').click(function() {
            var dataValue = $(this).find(':selected').text();
            $(this).attr('data-value', dataValue);

            // Debug console
            console.log('Adding data-value at: ' + dataValue);
        });

        $('form[data-behavior=confirm] .confirm-toggle').replaceWith('<input id="confirm-submit" type="submit" class="is-hidden"/>' + '<a href="#" class="confirm-toggle btn btn-primary">Continue</a>');

        /**
         *  Since we know javascript is executed so far, lets handle it with the confirmation.
         *
         *  That way, no javascript-enabled browsing user will be able to use the form. #progressiveEnhancement
         *
         *  Do the work.
         */
        $('form[data-behavior=confirm] .confirm-toggle').click(function(event) {
            event.preventDefault();

            // Get form content
            var form = $('form[data-behavior=confirm]').clone().attr('id', 'cloned'); //.appendTo('body');
            var i = 0;
            form.find(':input:not([type=hidden])').each(function() {
                var field = $(this);


                if (field.is('select')) {
                    fieldValue = $(this).attr('data-value');
                    if (fieldValue === undefined) {
                        fieldValue = field.find(':selected').html();

                        // Debug console
                        console.log('fieldValue was undefined, setting to : ' + fieldValue);
                    }

                   ...