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
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
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.
Here is what is in my controller for the 'action' above.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' }, ] } });
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.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!'); } }) },
Paul
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
Owner at SIMACS
@AndreaCammarata
www.andreacammarata.com
github: https://github.com/AndreaCammarata
TUX components bundle for Sencha Touch 2.x.x
https://github.com/AndreaCammarata/TUX
Thanks for your response Andrea.
I did see the following on that doc,
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.Code:form.submit({ url:'url/to/submit/to', method:'POST', success:function(){ alert('form submitted successfully!'); } });
Paul
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.
Here is what is in my controller for the 'action' above.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' }, ] } });
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.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!'); } }) },
Paul
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:
and this the .php file: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); } }); } } ] } });
The console.log gives me the exact values, but when I receive the test email I don't see the custom valuesPHP 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);
?>![]()
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?
NoI 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.
How have you built your aspx file? Can I use a php file in the same way? Thanks and sorry for my bother.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.";
?>
Ok I found a solution, thanks to all for suggestions.
This solution it's good for Sencha Touch v. 2.3.1:
Load mail.php in your DB: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); } }); } } ] } });
Obviously you have to enter all the controls for the verification of the required fields and type fieldsPHP 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.";
?>
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