PDA

View Full Version : Sending form details...please help



spaceman123
11 Jan 2011, 6:13 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. :)

AndreaCammarata
11 Jan 2011, 7:22 AM
Hey spaceman,
write your 'Confirm' button handler like:



...
items: [{
ui: 'confirm',
text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){

//Call to the new function
sendInfo();

}
},
...
And then put somewhere your new sendInfo function:



var sendInfo = function() {
Ext.Ajax.request({
url: '/yourPage.php',
method: 'post',
params: form.getValues(),
success: function(response, opts) {

//Your data has been correctly send to the server

}
})
};
Hope this helps.

spaceman123
11 Jan 2011, 7:24 AM
Sorry I forgot to say this has to be done using asp because it's got work in conjunction with an asp website to.

AndreaCammarata
11 Jan 2011, 7:27 AM
Doesn't matter the server side language you use, try the example I post you setting your asp page in the AjaxRequest config and you will have no problem.

spaceman123
11 Jan 2011, 7:32 AM
I changed it so that the code was
items: [{
ui: 'confirm',
text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){

//Call to the new function
sendInfo();

}
},
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
}]
}]
});
var sendInfo = function() {
    Ext.Ajax.request({
       url: '/add.asp',
       method: 'post',
       params: form.getValues(),
       success: function(response, opts) {
     
         //Your data has been correctly send to the server
                    
        }
    })
};  but then the page didn't load at all

AndreaCammarata
11 Jan 2011, 7:43 AM
You have to look out at your js sintax:



items: [{
ui: 'confirm',
text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){

//Call to the new function
sendInfo();

}
},
}, {
ui: 'decline', text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
}]
}]
});
The json is not well formatted where you insert the 'decline' button.

This is how it should be written:



...
items: [{
ui: 'confirm',
text: 'Submit',
scope: this,
hasDisabled: false,
handler: function(btn){

//Call to the new function
sendInfo();

}
},{
ui: 'decline',
text: 'Reset',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
...

spaceman123
11 Jan 2011, 7:47 AM
thanks I'll go over that again, I got it from the kitchensink demo, but am not 100% what I'm doing at the moment

AndreaCammarata
11 Jan 2011, 7:49 AM
thanks I'll go over that again, I got it from the kitchensink demo, but am not 100% what I'm doing at the moment

Don't worry I understand you.
If you never use javascript I really suggest you to open the javascript debug console from your safari browser to have an idea of your errors are.

spaceman123
11 Jan 2011, 7:50 AM
thanks I'll do that.

spaceman123
4 Apr 2011, 4:12 AM
I've managed to modify the code to this:


searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: store,
iconCls: 'search',
items: [{
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'area',
label: 'Area',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'category',
label: 'Category',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
form.submit({
url: 'search_results.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
form.reset();
}
}]
}]
}]
});

but I still can't get it to work and would be grateful for any help please.

I've just tried to submit the form in Chrome so I coudl check the debugger and this is the error I got:


Uncaught TypeError: Object #<HTMLDivElement> has no method 'submit'
But that doesn't mean much to me :(