PDA

View Full Version : Posting form details



spaceman123
11 Jan 2011, 6:11 AM
I've created a form using the kitchensink demo, but I've not used JavaScript before (I'm more of a backend phper) so didn't know who to send the form. Normally I'd send it to a php or asp page where it would parse all of the info. But with the kitchensink demo I'm not sure how to do this.

The form has a reset and submit button (I've changed the text in the demo) which look like this:



layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
ui: 'confirm', text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){
var form = Ext.getCmp('basicform');

if (btn.hasDisabled) {
form.enable();
btn.hasDisabled = false;
btn.setText('Submit');
} else {
form.disable();
btn.hasDisabled = true;
btn.setText('Submitted');
}
}
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
But I want to send the info to an asp page where it will be then either sent to a database or email - depending on the info.

I'd be extremely grateful for any help please. :)

Condor
11 Jan 2011, 6:26 AM
Shouldn't the 'Submit' button be doing a formPanel.getForm().submit()?

spaceman123
11 Jan 2011, 6:28 AM
It does sound like it should, but I've not really used JavaScript before so am not sure how to do that.

Condor
11 Jan 2011, 6:34 AM
1. Create a formpanel (xtype:'form') if you haven't already done so.
2. Add fields to this formpanel (don't forget to specify 'name's).
3. Add a submit button that calls formPanel.getForm().submit({...}).
4. In those '...' you can specify a 'success' and 'failure' handler that are executed when the server replies.
5. Your server needs to respond with JSON data like:

{"success": true}
or

{"success": false, "errors": ["field1": "Duplicatie value", "field2": "Unknown type"]}

spaceman123
11 Jan 2011, 6:48 AM
Thank you I'll give that go, but one question though - will that actually send the information to the database or do I still need to send it to the asp page after?

Condor
11 Jan 2011, 6:58 AM
Javascript can't access databases (that's not completely true, but I'll ignore the exceptions here).

You always need a server that processes the requests.

spaceman123
11 Jan 2011, 7:01 AM
So how do I get that information to the page that accesses the database? Normally the page I use is add.asp
Thanks for your help

Condor
11 Jan 2011, 7:08 AM
Configure your formpanel with:

url: 'add.asp'

That handler will get the required parameters and should return the data format I described above.

spaceman123
11 Jan 2011, 7:09 AM
brilliant thank you!

spaceman123
11 Jan 2011, 7:35 AM
I've just tried that but when I changed the code to
items: [{
ui: 'confirm', text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){
var form = formPanel.getForm().submit(url: add.asp);

if (btn.hasDisabled) {
form.enable();
btn.hasDisabled = false;
btn.setText('Submit');
} else {
form.disable();
btn.hasDisabled = true;
btn.setText('Submitted');
}
}
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
nothing loaded at all

Condor
11 Jan 2011, 7:41 AM
That's not valid javascript.

You want:

formPanel.getForm().submit({
url: 'add.asp'
});
and you still need to initialize formPanel, which I don't see you do.

spaceman123
11 Jan 2011, 7:43 AM
sorry for being so dumb, but how would I write that within the code I've got:
items: [{
ui: 'confirm', text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){
var form = formPanel.getForm().submit('add.asp');

if (btn.hasDisabled) {
form.enable();
btn.hasDisabled = false;
btn.setText('Submit');
} else {
form.disable();
btn.hasDisabled = true;
btn.setText('Submitted');
}
}
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
} thanks

Condor
11 Jan 2011, 7:46 AM
This is not all your code. I don't see your form definition anywhere.

ps. Have you looked at the form examples provided with the Ext SDK?

spaceman123
11 Jan 2011, 7:53 AM
This is my entire code:
demos.Forms = new Ext.TabPanel({
items: [{
title: 'Basic',
xtype: 'form',
id: 'basicform',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Add you links',
instructions: 'Please enter the information above.',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'selectfield',
name: 'category',
label: 'Category',
options: [{
text: 'Music website',
value: '21'
}, {
text: 'TV website',
value: '39'
}, {
text: 'Games website',
value: '2'
}]
}, {
xtype: 'textfield',
name: 'title',
label: 'Title',
placeHolder: 'Title',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeHolder: 'http://www.example.com',
useClearIcon: true,
required: true
}, {
xtype: 'textareafield',
name: 'description',
label: 'Description',
required: true
}, {
xtype: 'textfield',
name: 'keywords',
label: 'Keywords',
required: true
}, {
xtype: 'textfield',
name: 'name',
label: 'Name',
placeHolder: 'NAME',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'textfield',
name: 'email',
label: 'Email',
placeHolder: 'Email address',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
ui: 'confirm', text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){
var form = formPanel.getForm().submit('listing_save.asp');

if (btn.hasDisabled) {
form.enable();
btn.hasDisabled = false;
btn.setText('Submit');
} else {
form.disable();
btn.hasDisabled = true;
btn.setText('Submitted');
}
}
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
}]
}]
});



// if (Ext.is.Android) {
// demos.Forms.insert(0, {
// xtype: 'component',
// styleHtmlContent: true,
// html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
// });
// } I have had a look at the SDK, but have found that a bit difficult as I've not used JavaScript before

Condor
11 Jan 2011, 8:02 AM
So you want this in your Submit button handler:

var formPanel = Ext.getCmp('basicform');
formPanel.getForm().submit({
url: 'listing_save.asp'
});

spaceman123
11 Jan 2011, 8:14 AM
I've changed the code to that, but although it loads it doesn't send any of the details that where input into the form

Condor
12 Jan 2011, 12:24 AM
Did you check Firebug to see if the field values were correctly send?

spaceman123
12 Jan 2011, 2:20 AM
When I load it in firefox nothing loads at all - I've tried it on a few machines, but firefox won't load it - I can get chrome and safari to load it though (and obviously phones/tablets)

Condor
13 Jan 2011, 12:06 AM
Oh, I didn't realize. This is a Sencha Touch question! You posted in the wrong forum.

spaceman123
13 Jan 2011, 2:00 AM
Sorry I didn't realize that. I'll post in the other one. Sorry