PDA

View Full Version : Submitting Form Without Blank Fields



UGA_Zimma
18 Dec 2009, 12:38 PM
Is there a way to do a Form Submit without submitting blank fields?

i.e.

My test page has 5 text fields and 2 comboboxes and even if they are empty they submit to the server as parameters. Is there a way to only submit fields with values in them?

Thanks,

UGA_Zimma

tot2ivn
20 Dec 2009, 9:21 PM
You can use the property : allowBlank (http://www.extjs.com/deploy/dev/docs/source/TextField.html#cfg-Ext.form.TextField-allowBlank) to force fields to be filled out prior to form submission or check out this vtype (http://www.extjs.com/deploy/dev/docs/source/TextField.html#cfg-Ext.form.TextField-vtype)property to perform other validations.


Cheers,

Totti

UGA_Zimma
21 Dec 2009, 8:23 AM
I Dont want to require a field to be filled out, which is what allowBlank does. I want a field not to submit to the server if it does not have a Value. Not sure how vTypes helps here either, seems that cotrols the format on how fields can be filled out, not if they will submit to the server or not.

Any thoughts further?

Thanks,

UGA_Zimma

tot2ivn
21 Dec 2009, 8:55 AM
Then why don't you interrupt the onsubmit event of HTML form ? :)
Clean up all the fields without values, and then submit the form.

You could do something like this:


Ext.onReady(function() {
var myForm = new Ext.FormPanel({
title: 'Test Form',
id: 'myForm',
bodyStyle: { padding: '10px' },
style: 'margin:10px',
width: 400,
renderTo: Ext.getBody(),
standardSubmit: true, // True to turn on Standard HTML form submission
items: [
{
xtype: 'textfield',
allowBlank: true,
emptyText: 'Allowed to be blank',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
allowBlank: false,
emptyText: 'Not Allowed to be blank',
fieldLabel: 'Last Name'
}
],
buttons: [
{
xtype: 'button',
text: 'Submit',
handler: function() {
myForm.getForm().submit();
}
}, {
xtype: 'button',
text: 'Reset',
handler: function() {
myForm.getForm().reset();
}
}
],
listeners: {
render: function(v) {

if(f = v.getForm().getEl().dom) {
f.action = "test.php";

f.submit = function(){
// Check for the empty fields

// Manually submit form through Ajax util.
alert('submit');
};
delete f;
}

}
}

});

});

UGA_Zimma
21 Dec 2009, 9:31 AM
That is exactly what I would like to do, but Iím not sure how to do that.

Anyone know how to interrupt a submit, then check all the Values in the fields and only submit fields with Values in them?

Any guidance in appreciated,

Thanks,

UGA_Zimma

tot2ivn
21 Dec 2009, 7:23 PM
If that's the case, you could implement this way:


Ext.onReady(function() {
var myForm = new Ext.FormPanel({
title: 'Test Form',
id: 'myForm',
bodyStyle: { padding: '10px' },
style: 'margin:10px',
width: 400,
renderTo: Ext.getBody(),
standardSubmit: true, // True to turn on Standard HTML form submission
items: [
{
xtype: 'textfield',
allowBlank: true,
emptyText: 'Allowed to be blank',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
allowBlank: false,
emptyText: 'Not Allowed to be blank',
fieldLabel: 'Last Name'
}
],
buttons: [
{
xtype: 'button',
text: 'Submit',
handler: function() {
myForm.getForm().submit();
}
}, {
xtype: 'button',
text: 'Reset',
handler: function() {
myForm.getForm().reset();
}
}
],
listeners: {
render: function(v) {

if(f = v.getForm().getEl().dom) {
f.action = "test.php";

f.submit = function(){
// Check for the empty fields

// Manually submit form through Ajax util.
alert('submit');
};
delete f;
}

}
}

});

});