Divide My Form

by Ryan Perez

HTML

<form name="catcustomcontentform30175" onsubmit="return checkWholeForm30175(this)" enctype="multipart/form-data" method="post" action="/CustomContentProcess.aspx?CCID=20492&OID={module_oid}&OTYPE={module_otype}">
    <table class="webform" cellspacing="0" cellpadding="2" border="0">
    <tr><td>
       <h1>
    Title
    </h1>
    </td></tr>
   
        <tr>
            <td>
                <label for="ItemName">Item Name</label>
                <br />
                <input class="cat_textbox_small" type="text" name="ItemName" id="ItemName" maxlength="255" /> &bull;</td>
        </tr>
        <tr>
            <td>
                <label for="ItemDescription">Item Description</label>
                <br />
                <textarea name="ItemDescription" id="ItemDescription" cols="10" rows="4" class="cat_listbox" text=""></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label for="CAT_Custom_72">Type of Student <span class="req">*</span>
                </label>
                <br />
                <select name="CAT_Custom_72" id="CAT_Custom_72" class="cat_dropdown">
                    <option value=" ">-- Please select --</option>
                    <option value="Canadian">Canadian</option>
                    <option value="International">International</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="CAT_Custom_1">First Name (as on passport): <span class="req">*</span>
                </label>
                <br />
                <input type="text" maxlength="4000" name="CAT_Custom_1" id="CAT_Custom_1" class="cat_textbox" />
            </td>
        </tr>
        <tr>
            <td>
                <label for="CAT_Custom_2">Last Name (as on passport): <span class="req">*</span>
                </label>
                <br />
                <input type="text" maxlength="4000" name="CAT_Custom_2" id="CAT_Custom_2" class="cat_textbox" />
...

CSS

.form-block {background:red;display:none}
.start {background:brown; height:20px}
.first (dispa)
div[name="test0"] {background:blue}
div[name="test1"] {background:grey}
div[name="test2"] {background:pink}
.

JavaScript

$('form h1').parent().parent().after().each(function(){
     $(this).before('<div class="start"></div>');
});

$('.start').each(function() {
    $(this).nextUntil('.start').wrapAll('<div class="form-block"></div>');
});;

$('.form-block').each(function(index){

$(this).attr('name', 'test' + index );

});

$('.start').remove();

$('.form-block:first-child').addClass('first current');
$('.form-block:last-child').addClass('last');
$('.first').show();
$('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});