PDA

View Full Version : Dynamic Form submit



Darklight
17 Apr 2007, 11:09 AM
i get a "CN has no properties" error when i try to submit this form. here's the script:

Ext.onReady( function () {
var FormLogin = new Ext.form.Form( {
labelWidth: 50,
url: 'index.cfm'
});
FormLogin.add(
new Ext.form.TextField( {
fieldLabel: 'Passwort',
name: 'Passwort',
inputType: 'password',
width:195,
allowBlank:false
})
);
FormLogin.addButton( 'Einloggen', function () {
FormLogin.submit();
});
FormLogin.render( "LoginBoxForm" );
});

Darklight
18 Apr 2007, 12:37 AM
i'm actually trying to just do a standard, "old school" form submit that posts the form to the next page without any background processing from Ext. any help on this? thanks in advance!

Darklight
18 Apr 2007, 1:55 AM
Semi-solved with some help from here (http://www.extjs.com/forum/showthread.php?t=4830), by setting the button to:
FormLogin.addButton( 'Login', function () {
document.getElementById( 'ext-gen2' ).submit();
});

I still don't get how to get the ID of the dynamically generated Form though. i tried adding baseParams: { id: 'FormLogin' } to creation parameters, but that doesn't seem to affect anything. anyone know how to get/set the ID of a dynamic form?

vbert
18 Apr 2007, 5:43 AM
This code:


[...]
FL = new Ext.form.Form({
id: 'formLogin',
labelWidth: 115,
url: '{form_url}',
});
[...]

generate:


[...]
<form id="formLogin" class="x-form" method="post">
<div id="formLogin" class="x-form-ct">
--------^^^^^^ this is BUG ???
<fieldset id="ext-comp-1003">
[...]

Darklight
18 Apr 2007, 6:00 AM
sounds like a bug to me, this makes the form not selectable by its ID after all.
i'll file it in the Bugs forum, thanks!

q_no
18 Apr 2007, 6:04 AM
I experienced the same behavior some minutes ago :(

I need an UNIQUE id/name for my form to call an xajax function that makes my ajax requests. Are there any workarounds/solutions out yet?

18 Apr 2007, 6:07 AM
Had to fudge some things but got it to work. In fact, i now have a working extjs oldschool + enctype multi-part for. :)


http://extjs.com/forum/showpost.php?p=23736&postcount=3

vbert
18 Apr 2007, 6:13 AM
At I not work :(

18 Apr 2007, 6:34 AM
are you doing a form.submit from extjs?

Darklight
18 Apr 2007, 6:40 AM
i added the form to the body <form name="FormLogin" id="FormLogin" action="index.cfm" method="post"></form> and then added the Ext.form like this: var FormLogin = new Ext.form.Form( "FormLogin", { });
then you can do a submit via document.FormLogin.submit();

q_no
18 Apr 2007, 6:56 AM
Darklight, that works fine!

Thanks alot, you made my day! :D

18 Apr 2007, 7:04 AM
Does that create a form within a form?:-?

q_no
18 Apr 2007, 7:09 AM
yes it does, but it works ... it's quite not a final solution for this issue, but for me it's ok until the bug (hopefully) gets fixed...

Darklight
18 Apr 2007, 7:12 AM
it does? oh well, as long as it works ;D

murphy
23 Apr 2007, 7:30 AM
Hi,

i'm new here, but i also need to submit the form old scool like with a post. Does this work with small efforts in JS?

Cheers, murphy

murphy
23 Apr 2007, 7:39 AM
The id bug driving me nuts... I hope i can solve this in 5 minutes... ;)

This one is my dialog...

<div id="frm-login"></div>

I'm trying this

var thisform = document.getElementById('frm-login').firstChild;
thisform.method='POST';
thisform.action='index.php?action=login';
thisform.submit();


Call me nuts, but i don't know it this really works... firstChild does return nothing for me... and in the DOM there is the firstchild a <form> after the render...

My solution for now:

Submitbutton JS:

if (frmLogin.isValid()) {
var thisform = document.getElementById('formLogin');
thisform.method='POST';
thisform.action='index.php?action=login';
thisform.submit();
}
and definition:

var frmLogin = new Ext.form.Form({
labelWidth: 150, // label settings here cascade unless overridden
id: 'formLogin'
});

The double id functions here under firefox nice... I hope this bug gets fixed sometimes..

I wonder why the firstChild function does not really run...? Has someone a clue?

Cheers, murphy

murphy
23 Apr 2007, 8:07 AM
Has Jack an idea?

Thanks, murphy

wajatimur
23 Apr 2007, 9:40 AM
This is totally bug, in DOM.. id must be unique. Ext team should do something.

code_berzerker
24 Apr 2007, 12:09 AM
How about doing it like that.

HTML:


<div id="container-center"></div>

JS:


Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var loginForm = new Ext.form.Form(
{
labelWidth: 75
}
);
loginForm.add(
new Ext.form.TextField({
fieldLabel: 'Login',
name: 'login',
width:175,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Password',
name: 'pass',
inputType: 'password',
width:175,
allowBlank:false
})
);

loginForm.addButton('Login',
function()
{
xajax_processFormData(xajax.getFormValues(loginForm.id));
}
);
loginForm.render('container-center');
});


This way you got valid code and working at the sime time.

murphy
24 Apr 2007, 12:59 AM
This one is not possible since the login is not ajax based. Its oldscool. I stick with the id bug and run it with hope to get the new version as fast as possible. I wish i can buy the svn access, but i have not enough money...

Cheers, murphy

q_no
24 Apr 2007, 1:06 AM
How about doing it like that.

This way you got valid code and working at the sime time.

Thanks alot! I'm doing exactly the same with xajax and it works fine! :)

code_berzerker
24 Apr 2007, 2:03 AM
This one is not possible since the login is not ajax based. Its oldscool.

You can ommit the ajax call and just refer to form by id retrieved from form object returned by Ext (in my case its loginForm.id). Just don't add id field in config while creating new Form object and retrieve the auto-generated one.

murphy
24 Apr 2007, 2:27 AM
You can ommit the ajax call and just refer to form by id retrieved from form object returned by Ext (in my case its loginForm.id). Just don't add id field in config while creating new Form object and retrieve the auto-generated one.

Yes, very cool. I did not saw the formlogin.id ;) Great idea to refernce the autogenerated id, since this does not mess with the id-tree. Since i'm a littel new to this subject i need to learn all stuff around JS and ext-js :)

This is the solution ;) Never assign an id to the form.

submit : function(){
if (frmLogin.isValid()) {
var thisform = document.getElementById(frmLogin.id);
thisform.method='POST';
thisform.action='index.php?action=login';
thisform.submit();
}
},


Thanks for this code_berzerker... You are great.

Cheers, murphy

code_berzerker
24 Apr 2007, 3:13 AM
submit : function(){
if (frmLogin.isValid()) {
var thisform = document.getElementById(frmLogin.id);
thisform.method='POST';
thisform.action='index.php?action=login';
thisform.submit();
}
},


How about this:



var loginForm = new Ext.form.Form(
{
labelWidth: 75,
method: 'post',
action: 'index.php?action=login'
}
);


[...]


submit : function(){
if (frmLogin.isValid()) {
frmLogin.submit({});
}
},


Havent checked but might probably work. Use ctrl-shift-home (Ext debug console) and in it the dom inspector tab to see if attribs have been correctly set.

murphy
24 Apr 2007, 3:56 AM
This was one of the first tests i used... For some reasons it didn't work. I will try it again. Thanks.

Darklight
30 Apr 2007, 10:58 AM
ok, version 1.0.1 broke my fix (or actually, fixed the ID but), so back to step 1. how to do an old school submit in 1.0.1?

dragontree
1 May 2007, 10:17 AM
ok, version 1.0.1 broke my fix (or actually, fixed the ID but), so back to step 1. how to do an old school submit in 1.0.1?

I've found a solution that works for me:

var searchForm = new Ext.form.Form({
id: 'searchForm',
labelWidth: 150,
url:'results.php',
method: 'GET',
baseParams: {search: '1'}
});

searchForm.addButton('Search', function(){
var form = document.getElementById("searchForm");
form.action = "results.php?" + searchForm.getValues(true);
form.submit();
});

tpattison
2 May 2007, 11:34 AM
I have tried every example here and still cannot get an "old school" form submit. When I think of "old school" I think that when the form is submitted the page listed in the action variable of the form object will be called and opened. Not just called and data passed to it in the background via JSON.

I love the fact that the framework lets you control layout and validation of the form. What I don't like is that it seems that you are relegated to using JSON or XML for forms processing.

There are times when you need to submit to a confirmation page or send the person to a 3rd party page for completion of a process, like PayPal.

Here is my complete code

JS

Ext.onReady(function(){

Ext.QuickTips.init();

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var regForm = new Ext.form.Form({
labelWidth: 100,
method:'POST'
});

regForm.container({width:730});
regForm.column({width:345});
regForm.fieldset(
{legend: 'Handler Information'},
new Ext.form.TextField({
fieldLabel: 'Name',
name: 'handler_name',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Address',
name: 'handler_address',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'City',
name: 'handler_city',
width:200,
allowBlank:false
}),

new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'handler_state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
}),
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
allowBlank:false,
width:200
}),

new Ext.form.TextField({
fieldLabel: 'Zip Code',
name: 'handler_zip',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Phone Number',
name: 'handler_phone',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Email',
name: 'handler_email',
vtype:'email',
width:200,
allowBlank:false
})
);

regForm.end(); // close the column

regForm.column({width:345, style:'margin-left:15px', clear:true});
regForm.fieldset(
{legend: 'Dog Information'},
new Ext.form.TextField({
fieldLabel: 'Club Name',
name: 'club_name',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Name of Dog',
name: 'dog_name',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Call Name',
name: 'call_name',
width:200,
allowBlank:false
}),

new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dog_dob',
width:200,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Dog Breed',
name: 'dog_breed',
width:200,
allowBlank:false
}),
new Ext.form.Radio({
fieldLabel: 'Sex of Dog',
boxLabel: 'Male',
name: 'dog_sex',
inputValue: 'Male',
allowBlank:false
}),
new Ext.form.Radio({
labelSeparator: '&nbsp;',
boxLabel: 'Female',
name: 'dog_sex',
inputValue: 'Female',
allowBlank:false
})
);

regForm.end(); // close the column
regForm.end(); // close the container

regForm.container({width:730});
regForm.column({width:345});
regForm.fieldset(
{legend: 'Core Events - Included in Registration Costs', labelWidth: 10},
new Ext.form.Radio({
labelSeparator: '&nbsp;',
boxLabel: 'Novice Class Obedience and Protection',
name: 'core_event',
inputValue: 'Novice',
allowBlank:false
}),
new Ext.form.Radio({
labelSeparator: '&nbsp;',
boxLabel: 'Open Class Obedience and Protection',
name: 'core_event',
inputValue: 'Open',
allowBlank:false
}),
new Ext.form.Radio({
labelSeparator: '&nbsp;',
boxLabel: 'Advanced Class Obedience and Protection',
name: 'core_event',
inputValue: 'Advanced',
allowBlank:false
})
);

regForm.end(); // close the column

regForm.column({width:345, style:'margin-left:15px', clear:true});
regForm.fieldset(
{legend: 'Showcase Events - $10.00 Per Event', labelWidth: 10},
new Ext.form.Checkbox({
labelSeparator: '&nbsp;',
boxLabel: 'Long Send/Hardest Hitting Contest',
name: 'long_send'
}),
new Ext.form.Checkbox({
labelSeparator: '&nbsp;',
boxLabel: 'Fastest Recall Contest',
name: 'fastest_recall'
}),
new Ext.form.Checkbox({
labelSeparator: '&nbsp;',
boxLabel: 'Fastest Retrieve Contest',
name: 'fastest_retrieve'
})
);

regForm.end(); // close the column
regForm.end(); // close the container

regForm.container({width:705, el: Ext.get('form-liability')});
regForm.end(); // close the container

regForm.addButton('Submit Registration', function(){
if (regForm.isValid()) {
var eventForm = document.getElementById(regForm.id);
eventForm.action = "event_confirm.asp";
regForm.submit();
}
});
regForm.render('form-registration');
});HTML

<%@LANGUAGE="VBSCRIPT"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Service Dogs of Georgia - We Train Assests, Not Liabilities</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/ytheme-gray.css" />
<link href="css/sdaofga_regform.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loading-mask" style="width:100%;height:100%;background:#999999;position:absolute;z-index:20000;left:0;top:0;"> </div>
<div id="loading">
<div class="loading-indicator"><img src="images/default/grid/loading.gif" style="width:16px;height:16px;" align="absmiddle"> Loading Event Registration...</div>
</div>
<script type="text/javascript" src="includes/yui-utilities.js"></script>
<script type="text/javascript" src="includes/ext-yui-adapter.js"></script>
<script type="text/javascript" src="includes/ext-all.js"></script>
<script type="text/javascript" src="includes/states.js"></script>
<script type="text/javascript" src="includes/registrationForm.js"></script>
<div id="container">
<div id="header">
<table width="100%" border="0" id="header_table">
<tr>
<td><img src="images/SDAofGA_Logo2_gray.jpg" alt="Service Dogs of Georgia" width="374" height="118" border="0" /></td>
</tr>
</table>
</div>
<div id="content">
<p>&nbsp;</p>
<div style="width:740px; margin-left:auto; margin-right:auto;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<p align="center"><h3 style="margin-bottom:5px;">
First Annual Sirius Spring Invitational Pre-Registration Form
</h3></p>
<p>&nbsp;</p>
<table align="center" width="100%">
<tr>
<td>
<div id="form-registration">
</div>
<div id="form-liability">
<div>
<p>&nbsp;</p>
<table width="705px" border="0" align="center" cellpadding="4" cellspacing="3" id="liability_table">
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-align:justify">
By clicking the submit button above you are agreeing to the terms of the General Release of Liability and verifying that all information submitted herein is true and correct.
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px;" align="center">
<b>GENERAL RELEASE OF LIABILITY</b>
</td>
</tr>
<tr>
<td style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px;">
<p style="text-align:justify">For and in consideration of the granting of permission to participate in the event sanctioned by the Service Dogs of GA (“SDGA”), the undersigned on behalf of himself/herself, his/her heirs, executors, administrators and/or assigns, hereby agrees to defend, indemnify, release, discharge and hold harmless the SDGA, it’s officers, members, agents (including judges), employees, servants, successors and/or assigns, and the SDGA (collectively, the “Related Parties”), from and against any and all rights, claims, actions and causes of action, liabilities for damages which may hereafter occur or be caused by and/or to any person or thing (including dogs brought to this event), while upon or near the Show premises or in any ways or manner connected to or associated with this Show, that he/she may have or will have against the aforementioned SDGA and the Related Parties, and their successors and/or assigns, for any and all loss, liability, injury of any kind, and expenses arising out of participation in the Show, whether or not such loss, liability, injury, and expense may be caused by negligence, including active negligence, of the SDGA and related parties. The undersigned has read this general release of liability and fully understands and acknowledges the significance of said release and hereby assumes full responsibility for any injury, damage, or loss that may occur as a result of the above-referenced participation in any activity of the SDGA Dog Show. The undersigned agrees to be fully responsible for the actions and safety of any minor children who attend this event with the undersigned, and agrees to waive, release, indemnify, and hold harmless the SDGA and the Related parties against any claims, actions or causes of action, resulting from personal injury or death sustained by any minor child attending this event with the undersigned, and to pay all costs, including attorney’s fees, incurred by the SDGA and/or the related parties, to enforce or defend this Agreement.</p>
<p style="text-align:justify">This general release of liability is freely and voluntarily executed by the undersigned and, in so doing, the undersigned does not rely on any inducements, promises, or representations made by the SDGA or the related parties. This release and its execution apply to any and all entries completed on this or any other page.</p>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
<div id="footer">
<p>&nbsp;</p>
<div align="center"> &copy; 2007 Service Dogs of Georgia </div>
</div>
</div>
</body>
</html>

Darklight
2 May 2007, 11:40 AM
dragontree: yeah, i got it to work after posting my message by assigning an id to the dynamic form and then selecting it via the DOM as well. the bug with a non-unique Form id was fixed in 1.0.1

tpattison: init your Form like this:

var regForm = new Ext.form.Form({
id: 'regForm',
url: 'event_confirm.asp',
labelWidth: 100,
method: 'POST'
});

and then submit it via Ext.get('regForm').dom.submit();

tpattison
2 May 2007, 11:53 AM
tpattison: init your Form like this:

var regForm = new Ext.form.Form({
id: 'regForm',
url: 'event_confirm.asp',
labelWidth: 100,
method: 'POST'
});and then submit it via Ext.get('regForm').dom.submit();

Darklight: Here are my edits

JS


var regForm = new Ext.form.Form({
id: 'regForm',
url: 'event_confirm.asp',
labelWidth: 100,
method:'POST'
});

regForm.addButton('Submit Registration', function(){
if (regForm.isValid()) {
Ext.get('regForm').dom.submit();
}
});


Now when the page submits it looks to just reload itself. It is not going to the confirm page. WTF? Maybe my feeble old mind just isn't grasping something correctly.

Tim

Darklight
2 May 2007, 12:27 PM
oops, my bad, change "url" to "action" in the form init!

tpattison
2 May 2007, 12:30 PM
oops, my bad, change "url" to "action" in the form init!

I saw that and already made that change with the same results. :((

I was reading back in the posts to your solution on page 1. Do I still need to have a form tag in the HTML as well as the Ext generated one?

Edit: NVM, I tried adding the form tag in the html code and the ext form disappeared.

tpattison
2 May 2007, 1:06 PM
Here's my code. It looks a lot like one of the previous posts. I could have sworn I tried this earlier.

JS


var regForm = new Ext.form.Form({
labelWidth: 100,
});

regForm.addButton('Submit Registration', function(){
if (regForm.isValid()) {
var frmRegister = document.getElementById(regForm.id);
frmRegister.method = 'POST';
frmRegister.action = 'event_confirm.asp';
frmRegister.submit();
}
});

Darklight
2 May 2007, 10:53 PM
here is the code to a form of mine that works (no form tag in html, just a <div> that the form renders into)

Ext.onReady( function () {
FormLogin = new Ext.form.Form( { id: 'FormLogin', action: 'index.cfm' });
FormLogin.addButton( 'Login', function () {
Ext.get( 'FormLogin' ).dom.submit();
});
FormLogin.render( "DivLoginForm" );
});

murphy
3 May 2007, 5:17 AM
Here's my code. It looks a lot like one of the previous posts. I could have sworn I tried this earlier.

JS


var regForm = new Ext.form.Form({
labelWidth: 100,
});

regForm.addButton('Submit Registration', function(){
if (regForm.isValid()) {
var frmRegister = document.getElementById(regForm.id);
frmRegister.method = 'POST';
frmRegister.action = 'event_confirm.asp';
frmRegister.submit();
}
});



This look like mine here http://extjs.com/forum/showpost.php?p=25612&postcount=23 ;)

tpattison
3 May 2007, 5:34 AM
This look like mine here http://extjs.com/forum/showpost.php?p=25612&postcount=23 ;)

Yep, I just couldn't remember who posted it at the time. Thanks Murphy & Darklight!

MaxT
24 May 2007, 6:45 AM
Here's another way to get the DOM form element. You don't need to add an "id" to the form, although you do need to know the "id" of the element you are rendering the form into. Useful if you are using "old school" submit. You can also add hidden form fields etc to the form.




var container = document.getElementById("DivLoginForm");
var formElement = container.getElementsByTagName("form")[0];
formElement.action = "go-do-it.php";

...

formElement.submit();


Max

KRavEN
6 Jun 2007, 11:20 AM
or much easier and no setting id:


Ext.onReady( function () {
function oldSubmit(){
Ext.get( FormLogin.id ).dom.submit();
};
FormLogin = new Ext.form.Form( { url: 'index.php', method: 'POST' });
FormLogin.addButton( 'Login', oldSubmit );
FormLogin.render( "DivLoginForm" );
});

KRavEN
6 Jun 2007, 11:54 AM
I got to a situation where I needed to set params for a POST on the form.submit which you can't do when doing a standard dom submit. The value was also depending on what rendered button I pressed and the buttons were not form buttons.

I did it like this, but I'm sure if you wanted to add it hidden before you rendered the form and then set the TextField value in the submit function you could do it that way too. I think my way is easier


function oldSubmit(){
FormLogin.add( hidden = new Ext.form.Field({name: 'chtype', value: 'valueHoweverYouGetIt', inputType : 'hidden'}));
hidden.render(FormLogin.id);
Ext.get( FormLogin.id ).dom.submit();
};