PDA

View Full Version : Lost! FormPanel Submit and php file



chynawhyte
31 Jan 2011, 2:49 PM
I was able to create a complex form, however, I am lost as to how to get the form information to submit and the code of the php page to get the form data and send to an email. :((

Here is the code for my forms script:



Ext.onReady(function(){
Ext.QuickTips.init();

var onSuccessOrFail = function(form, action) {
var FormPanel = Ext.getCmp('newform');
FormPanel.el.unmask();

var result = action.result;
if (result.success) {
Ext.MessageBox.alert('Success',action.result.msg);
}
else {
Ext.MessageBox.alert('Failure',action.result.msg);
}
}

var submitHandler = function() {
var FormPanel = Ext.getCmp('newform');
FormPanel.el.mask('Please wait', 'x-mask-loading');

FormPanel.getForm().submit({
url : 'processform.php',
success : onSuccessOrFail,
failure : onSuccessOrFail
});
}

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();


/*
* ================ Order Form =======================
*/
bd.createChild({tag: 'h1', html: Order Form});
var newform = new Ext.FormPanel({


labelAlign: 'top',
title: 'Company Profile',
bodyStyle:'padding:5px',
width: 800,

items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Company Name',
name: 'company',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Address',
name: 'address',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'City',
name: 'city',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'State',
name: 'state',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Zip',
name: 'zip',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Phone',
name: 'phone',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Fax/Other',
name: 'fax',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Website',
name: 'weburl',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Authorized Representative',
name: 'authrep1',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Authorized Representative',
name: 'authrep2',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height: 750,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Authorized Representative 1',
layout:'form',
defaults: {width: 330},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'rep1first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'rep1last'
},{
fieldLabel: 'Title',
name: 'rep1title'
}, {
fieldLabel: 'Email',
name: 'rep1email',
vtype:'email'
},{
fieldLabel: 'Alternate Email',
name: 'rep1email2',
vtype: 'email'
},{
fieldLabel: 'Office',
name: 'rep1office'
},{
fieldLabel: 'Mobile',
name: 'rep1mobile'
}]
},{
title:'Authorized Representative 2',
layout:'form',
defaults: {width: 330},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'rep2first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'rep2last'
},{
fieldLabel: 'Title',
name: 'rep2title'
}, {
fieldLabel: 'Email',
name: 'rep2email',
vtype:'email'
},{
fieldLabel: 'Alternate Email',
name: 'rep2email2',
vtype: 'email'
},{
fieldLabel: 'Office',
name: 'rep2office'
},{
fieldLabel: 'Mobile',
name: 'rep2mobile'
}]
},{
title:'Web Services',
bodyStyle:'padding:5px 5px 0',

defaultType: 'textfield',
items: [{
xtype:'fieldset',
title: 'Domain Registration',
collapsible: true,
autoHeight:true,
items: [{

xtype: 'fieldset',
checkboxToggle:true,
title: 'Register New Domain(s)',
autoHeight:true,
defaults: {width: 700},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'Domain Name',
name: 'newdomain1',
allowBlank:false
},{
fieldLabel: 'Domain Name',
name: 'newdomain2'
},{
fieldLabel: 'Domain Name',
name: 'newdomain3'
}, {
fieldLabel: 'Domain Name',
name: 'newdomain4'
}]
}, {
xtype:'fieldset',
checkboxToggle:true,
title: 'Register Existing Domain',
autoHeight:true,
defaults: {width: 700},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'Domain Name',
name: 'domain',
allowBlank:false
},{
fieldLabel: 'Current Domain Registrar',
name: 'registrar'
},{
fieldLabel: 'Registrar Website',
name: 'regurl'
}, {
fieldLabel: 'Account Username',
name: 'reguname'
}, {
fieldLabel: 'Account Password',
name: 'regpwd'
}]
}]
}, {
xtype:'fieldset',
title: 'Web Hosting',
collapsible: true,
autoHeight:true,
defaultType: 'radio',
bodyStyle: 'padding-right:5px;',
items: [{
checked: true,
fieldLabel: 'Hosting Plan',
boxLabel: 'Intro Plan - $XXX/year',
name: 'hosting',
inputValue: 'introyear'
}, {

fieldLabel: '',
labelSeparator: '',
boxLabel: 'Intro Plan - $XXX/month',
name: 'hosting',
inputValue: 'intromonth'
}, {

fieldLabel: '',
labelSeparator: '',
boxLabel: 'Professional Plan - $XXX/year',
name: 'hosting',
inputValue: 'proyear'
}, {

fieldLabel: '',
labelSeparator: '',
boxLabel: 'Professional Plan - $XXX/month',
name: 'hosting',
inputValue: 'promonth'
}, {
xtype: 'checkbox',
fieldLabel:'Terms and Conditions',
name: 'terms',
boxLabel: 'I agree to the Web Hosting Terms and Conditions',
allowblank: false
}
]
}, {
xtype: 'fieldset',
title: 'Web Design',
collapsible: true,
layout: 'fit',
items: {
xtype:'htmleditor',
id:'webdesign',
fieldLabel:'Provide details of your web design needs here:',
height: 200
}

}
]
},{
xtype:'fieldset',
title: 'Payment Information',
defaults: {width: 700},
autoHeight:true,

defaultType: 'textfield',
items :[{
fieldLabel: 'PayPal Email Address',
name: 'paypal'
},{
fieldLabel: 'Billing Address',
name: 'bill_add'
},{
fieldLabel: 'Billing City',
name: 'bill_city'
},{
fieldLabel: 'Billing State',
name: 'bill_state'
},{
fieldLabel: 'Billing Zipcode',
name: 'bill_zip'
},{
fieldLabel: 'Credit Card Type',
name: 'cctype'
},{
fieldLabel: 'Name on Credit Card',
name: 'ccname'
},{
fieldLabel: 'Card Number',
name: 'ccnumber'
},{
fieldLabel: 'Expiration Date',
name: 'ccexp'
},{
fieldLabel: 'CCV',
name: 'ccv'
}
]
},{
cls:'x-plain',
title:'Comments',
layout:'fit',
items: {
xtype:'htmleditor',
id:'comments',
fieldLabel:'Comments'
}
}]
}],
buttons: [{
text : 'Submit',
handler : submitHandler
},{
text: 'Cancel'
}]
});
newform.render(document.body);




Can someone assist with the code needed for the 'processform.php' page as well as getting the information to submit to that form?

Thanks in advance!
CW

31 Jan 2011, 4:52 PM
in your PHP file, you can read the data from $_REQUEST, $_GET or $_POST.

Condor
1 Feb 2011, 4:49 AM
You can specify a 'waitMsg' in the submit() options, so you don't have to show and hide a mask yourself.

Don't forget that your server needs to return JSON with a 'success' property and optionally field 'errors'.

chynawhyte
1 Feb 2011, 3:44 PM
Is there a sample php page that someone could direct me too that I can modify or use?

1 Feb 2011, 4:50 PM
Try this: http://tinyurl.com/64huk3o

sosy
2 Feb 2011, 7:50 AM
@jgarcia whahahahahahahahahahaha ROTFL i cant stop laughing... Awesome... hahahahaha....

Thats the best link ever...