What's New?

[CLOSED] Form reset not working

  1. #1
    Jan 21, 2010, 1:54 PM

    [CLOSED] Form reset not working

    Hi

    I am trying to do a client-side Form Panel reset on button click with no success.
    Some of my forms works, some not.

    Sorry, for not posting a code. it's been days I am struggling to reproduce this error and now debugging I have at least some clue.

    My scenario is similar to https://examples1.ext.net/#/GridPane.../Form_Details/
    When the page first loads I am manually set all my form fields (!IsPostBack && !Coolite.Ext.Web.Ext.IsAjaxRequest).

     reset : function(){
        this.setValue(this.originalValue);
        this.clearInvalid();
    }
    I now debugging noticed that when the reset is performed on the form, it is actually not been cleared because it restores the fields originalValues.

    I have no idea where these original Values came from?!

    That said, would you be able to help me?

    Thanks
    Leo.

    PS: I am using Form Validation.
  2. #2
    Jan 21, 2010, 5:11 PM

    RE: [CLOSED] Form reset not working

    Hi,

    reset() : void
    Resets the current field value to the originally loaded value and clears any validation messages

    'reset' restores original value which was passed with config object to the constructor. If you need to clear field then try the following sample

    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:FormPanel 
            ID="FormPanel1" 
            runat="server" 
            Title="FormPanel"
            Width="600" 
            BodyStyle="padding:5px;" 
            ButtonAlign="Right">
            <Body>
                <ext:ColumnLayout runat="server">
                    <ext:LayoutColumn ColumnWidth=".5">
                        <ext:Panel ID="Panel1" runat="server" Border="false" Header="false">
                            <Defaults>
                                <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                <ext:Parameter Name="MsgTarget" Value="side" />
                            </Defaults>
                            <Body>
                                <ext:FormLayout runat="server" LabelAlign="Top">
                                    <ext:Anchor Horizontal="92%">
                                        <ext:TextField runat="server" FieldLabel="First Name" Text="sdfs" />
                                    </ext:Anchor>
                                    <ext:Anchor Horizontal="92%">
                                        <ext:TextField runat="server" FieldLabel="Company" />
                                    </ext:Anchor>
                                </ext:FormLayout>
                            </Body>
                        </ext:Panel>
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth=".5">
                        <ext:Panel ID="Panel2" runat="server" Border="false">
                            <Defaults>
                                <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                <ext:Parameter Name="MsgTarget" Value="side" />
                            </Defaults>
                            <Body>
                                <ext:FormLayout runat="server" LabelAlign="Top">
                                    <ext:Anchor Horizontal="92%">
                                        <ext:TextField runat="server" FieldLabel="Last Name" />
                                    </ext:Anchor>
                                    <ext:Anchor Horizontal="92%">
                                        <ext:TextField runat="server" FieldLabel="Email" Vtype="email" />
                                    </ext:Anchor>
                                </ext:FormLayout>
                            </Body>
                        </ext:Panel>
                    </ext:LayoutColumn>
                </ext:ColumnLayout>
            </Body>
            <Buttons>
                <ext:Button ID="Button2" runat="server" Text="Reset">
                    <Listeners>
                        <Click Handler="#{FormPanel1}.getForm().items.each(function(f){f.setValue('');f.clearInvalid();});" />
                    </Listeners>
                </ext:Button>
            </Buttons>           
        </ext:FormPanel>
    </form>
</body>
</html>
  3. #3
    Jan 22, 2010, 6:41 AM

    RE: [CLOSED] Form reset not working

    Hi Vlad,

    Ohh gosh, of course, it's even better and prevent me of doing silly things.
    Restore its original value makes much more sense, specially when dealing and checking if the form is dirty, etc.

    But there are cases where I need to clear the fields, like when deleting a record.

    Your code only fails because my FormPanel has a Fielset within and FielSet doesn't have setValue().
    So it thows "Object doesn't support this property or method".
    What is the best way to check in jsvascript if the object has a method or property before try to execute it?

    thanks
    Leo
  4. #4
    Jan 22, 2010, 7:01 AM

    RE: [CLOSED] Form reset not working

    Sorry my silly question and my pour Javascript.

    I figure it out.

    #{FormPanelDetails}.items.each(function(f){if(f.setValue){f.setValue('');f.clearInvalid();}});
    This thread can now be marked as solved.

    Thanks
    Leo


    ljcorreia (1/22/2010)Hi Vlad,

    Ohh gosh, of course, it's even better and prevent me of doing silly things.
    Restore its original value makes much more sense, specially when dealing and checking if the form is dirty, etc.

    But there are cases where I need to clear the fields, like when deleting a record.

    Your code only fails because my FormPanel has a Fielset within and FielSet doesn't have setValue().
    So it thows "Object doesn't support this property or method".
    What is the best way to check in jsvascript if the object has a method or property before try to execute it?

    thanks
    Leo

Similar Threads

  1. [CLOSED] Form validation is not working correctly
    By Fahd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 13, 2012, 8:53 PM
  2. form.reset() && daterange Error
    By threewonders in forum 1.x Help
    Replies: 1
    Last Post: Mar 28, 2012, 11:28 AM
  3. [CLOSED] How to reset ascx form from it's container?
    By dev in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 21, 2010, 9:15 PM
  4. [CLOSED] TextField Reset Text from ServerSide Not Working
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: May 11, 2010, 1:25 PM
  5. Form inside window reset issue
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Feb 03, 2009, 12:50 PM

Posting Permissions