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

[Pulp Fiction]

Hi paulh1971, thanks for this example. Unfortunately I can not use an aspx file, only php file. Could you give me some suggestions? I'm not familiar with the management of php file, should I make an Ajax request?

I need a simple form to send a message to an email address, this is what I did:

Ext.define('Bernardi.view.Contatti',{
    extend: 'Ext.form.Panel',
    alias: 'widget.contattiView',
    
    config: {
        id: 'contattiView',
        layout: {
            type: 'vbox'
        },
        styleHtmlContent: true,
        scrollable: {
            direction: 'vertical',
            indicators: false
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Contatti'
            },
            {
                xtype: 'fieldset',
                title: 'Contact Us',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Nome',
                        name: 'nome'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email',
                        name: 'email'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Telefono',
                        name: 'telefono'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'Message',
                        name: 'text',
                        height: 90
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Submit',
                ui: 'confirm',
                handler: function(){
                    var values = Ext.getCmp('contattiView').getValues();    
                    console.log(values.nome+","+values.email+","+values.telefono+","+values.text);                          

                    Ext.Ajax.request({
                        url: 'http://www.bernardicioccolato.com/mail.php',
                        params : values,
                        success: function(response){
                            var text = response.responseText;
                            Ext.Msg.alert('Success', text); 
                        }
                    });
                }
            }
        ]
    }
});

and this the .php file:

<?php

$destinatario = "mymail@example.com";

$oggetto    = "Email do submit";

$messaggio  = "Nome $nome\n";
$messaggio .= "Email $email\n";
$messaggio .= "Telefono $telefono\n";
$messaggio .= $text;

$da = $email;
$intestazioni = "From: $da";

mail($destinatario,$oggetto,$messaggio,$intestazioni);

?>

The console.log gives me the exact values, but when I receive the test email I don't see the custom values

[paulh1971]

Hello Pulp Fiction. I would not do an Ajax call. I would do it just like I did, using a controller. If you look in my controller, the url is Connect.aspx. You would just have a url of something.php. Have you ever done any type of php email submission?

[Pulp Fiction]

No I don't know exactly how to do it. Thanks for the suggestion paulh1971. I upgraded my php file, the first was wrong, but that does not work.

<?php 
$to = "myemail@mail.com";
$from = $_POST['email'];
$first_name = $_POST['name'];
$subject = "Form submission";
$message = $name . " wrote the following:" . "\n\n" . $_POST['text'];

$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
echo "Mail Sent. Thank you " . $nome . ", we will contact you shortly.";
?>

How have you built your aspx file? Can I use a php file in the same way? Thanks and sorry for my bother.

[Pulp Fiction]

Ok I found a solution, thanks to all for suggestions.

This solution it's good for Sencha Touch v. 2.3.1:

Ext.define('App.view.Contact',{
    extend: 'Ext.form.Panel',
    alias: 'widget.contactForm',
    requires: [
        'Ext.TitleBar',
        'Ext.form.*',
        'Ext.field.*',
        'Ext.Button'
    ],
    
    config: {
        id: 'contactForm',
        layout: {
            type: 'vbox'
        },
        styleHtmlContent: true,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Contact'
            },
            {
                xtype: 'fieldset',
                title: 'Contact us',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'name'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email',
                        name: 'email'
                    },
                    {
                        xtype: 'textfield',
                        label: 'Phone',
                        name: 'phone'
                    },
                    {
                        xtype: 'textareafield',
                        label: 'Message',
                        name: 'message',
                        height: 90
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Send',
                ui: 'confirm',
                handler: function(){
                    var values = Ext.getCmp('contactForm').getValues();    
                    console.log(values.name+","+values.email+","+values.phone+","+values.message);

                    Ext.Ajax.request({
                        url: 'mail.php',
                        params : values,
                        success: function(response){
                            var text = response.responseText;
                            Ext.Msg.alert('Success', text); 
                        }
                    });
                }
            }
        ]
    }
});

Load mail.php in your DB:

<?php 
$to = "destinationmail@mail.com";
$from = $_POST['email'];
$first_name = $_POST['name'];
$subject = "Submit Message";
$message = $first_name . " wrote the following:" . "\n\n" . $_POST['message'];

$headers = "From:" . $from;
mail($from,$subject,$message,$headers);
echo "Mail Sent. Thank you " . $first_name . ", we will contact you shortly.";
?>

Obviously you have to enter all the controls for the verification of the required fields and type fields

[paulh1971]

Hi Pulp Fiction,

I just logged in to respond to you and found that you fixed the problem you were having. Glad you were able to figure it out!

Paul