1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Answers
    4
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default Answered: Complete working example of a form submission.

    Answered: Complete working example of a form submission.


    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

  2. 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.

    Code:
    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.

    Code:
    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

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Answers
    4
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    Thanks for your response Andrea.

    I did see the following on that doc,

    Code:
    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

  5. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Answers
    4
    Vote Rating
    1
    paulh1971 is on a distinguished road

      1  

    Default


    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.

    Code:
    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.

    Code:
    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

  6. #5
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    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:

    Code:
    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 Code:
    <?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

  7. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Answers
    4
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    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?

  8. #7
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    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 Code:
    <?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.

  9. #8
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


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

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

    Code:
    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 Code:
    <?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

  10. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Answers
    4
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."