Submit your widget

jquery.popupform - jQuery Popup Form takes a regular html form element and converts it into a popup.

Created 4 years ago   Views 14245   downloads 2180    Author n/a
jquery.popupform - jQuery Popup Form takes a regular html form element and converts it into a popup.
View DemoDownload
43
Share |

Popup Form

jQuery Popup Form takes a regular html form element, converts it into a popup and converts request into AJAX request. Open it programmtically, or assign it to an existing link or button. It works on all major browsers (including mobile). You can specify up to three steps for easier completion. Easily integrate it with external form validation plugins.

Add the .js and .css files to your site. Copy the close.png file to the same folder as the .css file.



<link rel="stylesheet" href="css/popupForm.css"/>
<script src="js/jquery.popupForm.min.js"></script>


<button id="btn-movie">Create a Movie</button>
 
<form action="/popup-form-example.html" id="popupform1" class="popup-form" method="get" >
    <div class="steps-popup">
        <div class="step-one-popup active-step-popup">1</div>
        <div class="step-two-popup">2</div>
    </div>
    
    <div class="steps-container-popup">
        <div class="step-one-container-popup">
            <label for="movie-title">Movie Title</label>
            <input id="movie-title" type="text" name="movie-title" autocomplete="off">
            <label for="rating">Rating (optional)</label>
            <input id="rating" type="text" name="rating" autocomplete="off">
            <button class="button-popup-form normal-button-popup-form next-button-popup" type="button">Next</button>
        </div>
 
        <div class="step-two-container-popup">
            <label for="director">Director (optional)</label>
            <input id="director" type="text" name="director" autocomplete="off">
            <button class="button-popup-form highlight-button-popup-form">Create Movie</button>
        </div>
    </div>
</form>


$('#popupform1').PopupForm({
    openPopupButton: $('#btn-movie')[0],
    formTitle: 'Create a Movie',
 
    validateStepOnefunction (container) {
        // Or used validation plugin, we recommend: http://jqueryvalidation.org/ 
        if($('#movie-title').val().length > 0) {
            return true;
        } else {
            alert('Movie title is a required field');
            return false;
        }
    },
    submittedfunction() {
        console.log('Form just submitted.');
    },
    submitSuccessfunction(data) {
        alert('Form submitted successfully.')
    },
    submitFailedfunction(xhr) {
        console.log('Form submit failed.')
    },
    closedfunction() {
        console.log('Form closed.')
    }
});

For more examples and documentation go to elohr.me