Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Everything needed to make your form elements useful. (jQuery 1.4.2+)
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
LICENSE
README.md
jquery.jqForms.1.0.4.js
jquery.jqForms.1.0.4.min.js
jquery.jqFroms.1.0.4.css

README.md

jqForms

jqForms is a small plugin that has been developed based on the jQuery 1.4.2 library. It is meant to give you a customizable form by modifying a small amount of CSS and calling a simple JavaScript command.

Usage

Here are all the different ways to have jqForms customize your HTML forms.

Required Files

jquery.jqForms.1.0.1.js jquery.jqForms.1.0.1.css

Basic HTML

<html>
<head>
    <title>jqForms Example</title>
    <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="jquery.jqForms.1.0.css" />
</head>
<body>
<form method="post">
    <!-- Your jqForms HTML here. -->
</form>
<script type="text/javascript" src="jquery.jqForms.1.0.js"></script>
<script type="text/javascript">
    $(function(){
        $("form").jqForms();
    });
</script>
</html>

Extra Radio Options

Have a page with tons of radio buttons? Now you can easily group the radio buttons into an easy-to-use interface.

<div class="jqf-extra-radio">
    <div class="jqf-row">
        <input type="radio" name="option" value="1" /> Option 1
    </div>
    <div class="jqf-row">
        <input type="radio" name="option" value="2" /> Option 2
    </div>
    <div class="jqf-row">
        <input type="radio" name="option" value="3" /> Option 3
    </div>
    <div class="jqf-row">
        <input type="radio" name="option-extra" /> Extra Options
        <div class="jqf-extra-radio-children">
            <input type="radio" name="option" value="4" /> Option 4
            <input type="radio" name="option" value="5" /> Option 5
            <input type="radio" name="option" value="6" /> Option 6
        </div>
    </div>
</div>

Editable Form

This will allow you to turn a block of text elements into an editable form.

<div class="jqf-editable">
    <p class="jqf-editable-out">
        <span id="firstName-out">First</span> <span id="lastName-out">Last</span><br />
        <span id="email-out">Email</span>
    </p>
    <div class="jqf-editable-form">
        <input type="text" id="firstName" name="firstName" /> <input type="text" id="lastName" name="lastName" /><br />
        <input type="text" id="email" name="email" />
    </div>

    <a href="#edit" class="jqf-editable-toggle">Edit Form</a>
</div>

CHANGELOG

1.0.4 (2010/10/13)

  • Minor bug fix with callbacks.

1.0.3 (2010/10/13)

  • Added a callback for jqf-editable after clicking the toggle.

1.0.2 (2010/10/11)

  • Added onComplete() callback.

1.0.1 (2010/10/11)

  • Added $.editableForm();

1.0.0 (2010/10/04)

  • Initial Basic Release
  • Contains $.extraRadioOptions();
Something went wrong with that request. Please try again.