-1

Having one html file called index.html.Here I'm having one page for list view(group).Another one(pg_add-group) is for both new and edit view. If I hit the Add button from list view,the new form opened correctly.If I select any of the product from list view,its correctly uploaded the details to the edit view. Its done by getting date from session.Now if I again try to add product, its containing old session data in the new form.The new form should contain with empty details.Can you help me to do this ?

Here is my coding,

pg_add-group

<div id="pg_add-group" data-role="page">
        <form name="frm_add-group" id="frm_add-group"  action="" method="post">
        <div data-role="header" data-transition="fixed">
            <h1 id="add-group-header"></h1>
            <a href="" data-role="button"  data-icon="back" data-rel="back">Back</a>
            </div>
        <div data-role="main" class="ui-content" >
            <div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>       
            <label for="group_name" class="ui-hidden-accessible"></label>
                <input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
            <label for="group_desc" class="ui-hidden-accessible"></label>
                <textarea  name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>               
            <div class="containing-element">
            <label for="group_published">Published</label>
                <select name="group_published" id="group_published"  data-theme="b">
                <option value="1" >Yes</option>
                <option value="0" >No</option>
                </select>
                <input type="hidden" name="group_id" id="group_id" />
            </div>  
            <div class="containing-element">
            <button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>                 
            <button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
        </div>  
        <div data-role="footer" data-position="fixed">
            <h1 id='add-book-footer'></h1>
        </div>
        </form>
    </div>

test.js

From he below coding 

group_id is comes from the list view's selected group id. 
session data ses_group contains the list of groups.

$('#pg_add-group').on('pageshow', function(event) {

    var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
    var group_id =  sessionStorage.group_id;
    $.each(group_list, function(ctr, obj) {
        if(group_id == obj.groupid){
            $('input[id=group_name]').val(obj.groupname);
            $('textarea[id=group_desc]').val(obj.groupdesc);
            $('input[id=group_id]').val(obj.groupid);
            $("#group_published").val('0').slider('refresh');
        }
    });

    $( ".input[id=group_name]" ).textinput( "refresh" );
    $( ".textarea[id=group_desc]" ).textinput( "refresh" );

});
ram
  • 593
  • 1
  • 8
  • 18
  • You can use some jquery to clear your form. ie -- $('#myform')[0].reset(); --- So you can try an Onclick event for your back button and clear the form -- Taken from here http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery – Tasos Jun 07 '14 at 07:19

1 Answers1

0

Working example: http://jsfiddle.net/Gajotres/2AVWQ/

Usage:

Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one. Basically use provided code to reset any form.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="button" id="clr-form-btn" value="Clear form"/>
                <label for="basic">Text Input:</label>
                <input type="text" name="name" id="basic" value="Some value"/>

                <label for="flip-1">Flip switch:</label>
                <select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>

                <fieldset data-role="controlgroup">
                    <legend>Choose a pet:</legend>
                    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
                    <label for="radio-choice-1">Cat</label>

                    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  checked="checked" data-default-value=""/>
                    <label for="radio-choice-2">Dog</label>

                    <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
                    <label for="radio-choice-3">Hamster</label>

                    <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
                    <label for="radio-choice-4">Lizard</label>
                </fieldset>

                <label for="select-choice-0" class="select">Shipping method:</label>
                <select name="select-choice-0" id="select-choice-0" data-default-value="standard">
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select> 
                <textarea>
                    asd
                    asd
                    asd
                    as
                    das
                    d
                    asdassd
                </textarea>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

Javascript:

$(document).on('pagebeforeshow', '#index', function(){ 
    cleanForm();          
});

function cleanForm() {
    var page = $.mobile.activePage;
    // Reset input elements
    page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
        $(this).val('');
    });    

    // Reset drop down elements
    page.find('.ui-content *').filter(".ui-select").each(function(){
        var select = $(this).find('select');        
        var defaultValue = select.attr('data-default-value');
        select.val(defaultValue);
        select.selectmenu('refresh', true);
    });    

    // Reset flip switch elements
    page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
        var flipSwitch = $(this);
        var defaultValue = flipSwitch.attr('data-default-value');
        flipSwitch.val(defaultValue);
        flipSwitch.slider('refresh');
    });   

    // Reset radio elements
    page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
        var radio = $(this);
        var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
        var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
    }); 
}
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Its working for new form..Do i need to add two pages for new and edit ? can't use same for both new and edit ? – ram Jun 07 '14 at 08:10
  • This current function is built to clean whole page but you can modify it to clean particular form, just change this line: var page = $.mobile.activePage; into something like this var page = $('#formID'); . This way you can choose if you're going to clean whole pages or just particular form. And I don't understand you what do you mean by: "can't use same for both new and edit"? – Gajotres Jun 07 '14 at 08:22
  • I'm using the same page for new and edit concept.If i edit data from list view,the form will be updated with selected product's details.So only i've used session in my my post.when i edit the form,it will be updated with selected product detail.If i use this as a new option,the empty form will be loaded.From this new form is ok now.problem with edit.Do i need to use two pages for new and edit ? – ram Jun 07 '14 at 08:47
  • I this case (and usually) it is best to do it over two separate pages. This way you can lover the chance of errors occurring. – Gajotres Jun 07 '14 at 14:21