Complete working example of a form submission.

[paulh1971]

Hello,

I have looked at all of the form examples and have not seen how to setup an actual form submission.

Is there a complete working example somewhere, or if anyone has done this, can you please share how you went about it?

Thanks,
Paul

[AndreaCammarata]

Hi,
I'm not sure which examples are you talking about, but did you tried to take a look at the one that follows

http://docs.sencha.com/touch/2-0/#!/guide/forms

Hope this helps.

[paulh1971]

Thanks for your response Andrea.

I did see the following on that doc,

form.submit({
    url:'url/to/submit/to',
    method:'POST',
    success:function(){
        alert('form submitted successfully!');
    }
});

But i'm not sure what to do with it once I put in the url. The url I would like to go to is an Asp.Net page. The same form is setup on the desktop site, and it would be great to have it submit the values to it. Not sure if that is even possible. Now that I think about it, I think I see how you can easily do it in php, but I am on a Windows Server environment. Hope what I am saying make sense.

Paul

[paulh1971]

I have this working successfully. Hope this can help anyone looking for a solution to this.

Here is my actual form. It is kind of long, but I wanted to put it all out there in case it can help someone.

Ext.define("Form.view.Connect", {
    extend: 'Ext.form.Panel',
	xtype: 'ConnectWithUsForm',
	id: 'ConnectForm',
	
  requires: [
	'Ext.TitleBar',
        'Ext.form.*',
        'Ext.field.*',
        'Ext.Button'
	],  		
  
   		config: {
			
		layout: {
			type: 'vbox'
		},
		
        items: [
            	{
				xtype: 'toolbar',
				docked: 'top',
				items: [
					{
						xtype: 'button',
				listeners: {
                            tap: function() {
                                TheFox.container.setActiveItem(13)
                            }
                        }											
				
					}
				]
				
				},
				
				{		
				xtype: 'fieldset',
                title: 'Join Fox Fans',
                instructions: 'Please enter the required fields above.',
                defaults: {
                    labelAlign: 'left',
                    labelWidth: '35%'
                },
				
        items: [
            {
                xtype: 'textfield',
                name : 'val_1',
                label: 'First Name',
				required: true,
            },
            {
                xtype: 'textfield',
                name : 'val_2',
                label: 'Last Name',
				required: true,
            },
            {
                xtype: 'emailfield',
                name : 'email',
                label: 'Email',
				required: true,
            },
			{
                        xtype: 'selectfield',
                        name: 'val_24',
                        label: 'Email Format',
                        valueField: 'EmailFormat',
                        displayField: 'title',
                        store: {
                            data: [
                                { EmailFormat: 'html', title: 'HTML'},
                                { EmailFormat: 'plaintext', title: 'Plain Text'}
                            ]
                        }
                    },
			{
                xtype: 'textfield',
                name : 'val_35831',
                label: 'Address'
            },
			{
                xtype: 'textfield',
                name : 'val_35830',
                label: 'Apt/Suite'
            },
			{
                xtype: 'textfield',
                name : 'val_5',
                label: 'City'
            },
			{
                xtype: 'textfield',
                name : 'val_6',
                label: 'State'
            },
			{
                xtype: 'textfield',
                name : 'val_7',
                label: 'Zip Code',
				required: true,
            },
			{
                xtype: 'textfield',
                name : 'val_9',
                label: 'Phone'
            },
			
        ]				
				},
				
			
			{
                xtype: 'fieldset',
                instructions: 'Periodic emails announcing upcoming shows, on-sale dates and special offers.',
                 defaults: {
                    labelAlign: 'left',
                    labelWidth: '35%'
                },
                items: [
                    { xtype: 'checkboxfield',
                name: 'val_35824',
                label: 'Events',
                //value: true
				}
                ]
            },
			
			{
                xtype: 'fieldset',
                instructions: 'Periodic emails about upcoming shows with info applicable to groups of 15 or more.',
                 defaults: {
                    labelAlign: 'left',
                    labelWidth: '35%'
                },
                items: [
                    { xtype: 'checkboxfield',
                name: 'val_35825',
                label: 'Groups',
                //value: true
				}
                ]
            },
			
			{
                xtype: 'fieldset',
                instructions: 'Periodic emails about upcoming shows with info applicable to students and teachers.',
                 defaults: {
                    labelAlign: 'left',
                    labelWidth: '35%'
                },
                items: [
                    { xtype: 'checkboxfield',
                name: 'val_35826',
                label: 'Students',
                //value: true
				},
                ]
            },
			{
				xtype: 'button',
				html: '<div style="padding: 10px 0 20px 0;"><img src="resources/images/OrangeButtons/Join.png" width="100%" /></a>',
				action: 'submitConnect'	
			},


				]


		}
		
});

Here is what is in my controller for the 'action' above.

init: function() {
		this.control({
			'button[action=submitConnect]': {
				tap:'submitConnectForm'
		}
		});
	},
	
	submitConnectForm: function() {
		var form = this.getConnectForm();
		
		form.submit({
			url: 'Connect.aspx',
			method: 'POST',
			success: function() {
				TheFox.container.setActiveItem(14)
    		},
			failure: function() {
        		alert('Form not submitted successfully!');
    		}
		})
	},

The url it goes to 'Connect.aspx' is an asp.net vb file. If anyone is using .net and would be interested in seeing the codebehind, let me know.

Paul