How to submit zimlet form data using POST request method....??

[jiggy]

Hello,

I have made a zimlet form.

In this form i have provided some Dwt Widgets like Buttons,Drop downs,textfields.

Now when i fill up the form on the click event of a button i want to submit the details filled into the widgets to the server using a POST method since i will be having so much data that it will not get handled through GET method.

So how can i achieve this POST thing....??


Thanks.

[pshah]

There is a class called AjxPost in the toolkit that might be of use for you. Basically create a new instance of this class passing in an IFRAME which will handle the posting to the server without forcing the browser to navigate away.

You then call execute passing in a callback function and the FORM element. Pretty simple.

Here's some example code:

  var iframe = document.createElement("IFRAME");
  var post = new AjxPost(iframe);
  var callback = new AjxCallback(this, this._myCallback);
  var form = document.getElementById("myFormId");
  post.execute(callback, form);

When the client successfully posts the form data to the server, "_myCallback" will get called so you can finish processing whatever. If the server returns an error, the callback method will contain the error code.

HTH.

[jiggy]

Hello PShah,

The below mentioned code snippets show how i have made my form using Dwt elements.

............


FormDisplay.prototype._createHTML = 
function() {
	//alert("Inside _createHTML");
	var html = new Array();
	var i = 0;
	
	this._formNameId = Dwt.getNextId();
	this._skillsElementId = Dwt.getNextId();


	
	html[i++] = "<table width=\"100%\" cellpadding=\"3\" cellspacing=\"3\">";

	html[i++] = "<tr>";
	html[i++] = "<td>Name</td>";
	html[i++] = "<td id='";
	html[i++] = this._formNameId;	
	html[i++] = "'>";	
	html[i++] = "</td>";
	
	html[i++] = "<td></td> ";
	html[i++] = "<td id='";
	html[i++] = this._skillsElementId;	
	html[i++] = "'>";	
	html[i++] = "</td>";

	html[i++] = "</tr>";

	//The Buttons at the end of the form are getting added over here
	html[i++] = "<tr>";
	
	html[i++] = "<td align='center' id='";
	html[i++] = this._userBtnId;	
	html[i++] = "'></td>";	


	html[i++] = "</tr>";	
	
	html[i++] = "</table>";
	
	this.getHtmlElement().innerHTML = html.join("");
};


FormDisplay.prototype._createDwtObjects = 
function () {
	//alert("Inside _createDwtObjects");

	this._formNameField = new DwtInputField({parent:this, type:DwtInputField.STRING,
										 initialValue:"My Form", size:20, maxLen:50,
										 errorIconStyle:DwtInputField.ERROR_ICON_NONE,
										 validationStyle:DwtInputField.ONEXIT_VALIDATION});

	Dwt.setSize(this._formNameField.getInputElement(), "100%", "20px");	
	this._formNameField.reparentHtmlElement(this._formNameId);
	delete this._formNameField;	

	
	//Skills dropdown
	var skillsOptions = [new DwtSelectOption("selectSkills",true,"--Select Skills--"),
						 new DwtSelectOption("primary",false,"Primary"),
						 new DwtSelectOption("secondary",false,"Secondary")];

	this._skillsSelectElement = new DwtSelect(this,skillsOptions);
	this._skillsSelectElement.addChangeListener(new AjxListener(this, this._skillsChangeListener));
	var skillsCell = document.getElementById(this._skillsElementId);
	if(skillsCell)
		skillsCell.appendChild(this._skillsSelectElement.getHtmlElement());

	//Save Button
	var userBtn1= new DwtButton(this);
	userBtn1.setText("Save");
	userBtn1.setSize("15");
	/*Added Listener below*/
	userBtn1.addSelectionListener(new AjxListener(this, this._saveBtnListener));				
	var userBtn1Cell = document.getElementById(this._userBtnId);
	if(userBtn1Cell)
			userBtn1Cell.appendChild(userBtn1.getHtmlElement());

		
};

//Save button listener
FormDisplay.prototype._saveBtnListener = 
function (ev) {


}

...............

Now i have two queries:

1) I want to submit the value of the InputField,Dropdown to a jsp page.
So if i need to use AjaxPost what i need to add in my code below.

2)
Also as in normal requests from html forms we can obtain the request parameters using the syntax request.getParameter("name of html element").

I searched for the methods setting the name of my form elements but i didn't found one.So in the jsp form if i want to obtain the values of my dropdown and input field on the click of my save button, how to achieve that since i am not getting what name is to be used my jsp form when accessing paramaters using syntax request.getParameter("name of html element").


Please help in resolving the above mentioned queries.
Thanks

[pshah]

jiggy,

You have asked very good questions. I'll try to help as much as I can:

First, I noticed in your code, you are deleting "this._formNameField" when in fact, you probably meant to delete "this._formNameId".

Now, because you're using Dwt widgets, you'll have to get access to the HTML elements they are wrapping. This is done differently based on the widget we're trying to inspect.

For DwtInputFields, you'll want to call the getInputElement method like this:

this._formNameField.getInputElement().name = "foo"

For DwtSelect, its a bit more work since its made up of DIV's (no FORM elements). So you'll want to add a hidden input element and set the name to whatever and the value to be the value of the selected DwtSelect. Here's some code to explain what I mean:

Add this part somewhere in the "createHTML" method:

this._hiddenInputId = Dwt.getNextId();
html[i++] = "<input type='hidden' id='" + this._hiddenInputId + "' name='foobar'>";

// Save the hidden element of course:
this._hiddenInput = document.getElementById(this._hiddenInputId);

Then, in your save listener, set the value of the DwtSelect into your hidden input element:

this._hiddenInput.value = this._skillsSelectElement.getValue();

I'm assuming you added the actual FORM element somewhere to wrap the HTML code containing your form elements. If not, you can just add it in the "_createHtml" method and save the form object just like you did the other objects. Remember, you'll also need a hidden IFRAME somewhere to submit the post.

Finally, in the save listener, add in the code from my first post and hopefully, it just works

[jiggy]

Thanks pShah,

I will definitely give a try to it and come back if any problems occur.
Thanks for ur cooperation.

[jiggy]

Hello Pshah,

I tried out the thing you said to me.

In my _createHTML method i wrapped my form elements with the following:

html[i++] = "<form id='myFormID' target='http://localhost:7070/myWebApp/confirm.jsp'>";

Then in my save btn listener i added the following:

this.hiddenSkillsValue.value = this._skillsSelectElement.getValue();
	
 var iframe = document.createElement("IFRAME");
 var post = new AjxPost(iframe);
 var callback = new AjxCallback(this, this._myCallback);
 var form = document.getElementById("myFormID");
 post.execute(callback, form);

But when i click on my Save btn a new browser window opens up with the address http://localhost:7070/zimbra/mail?ev...ds&requestId=0

Nothing gets printed on my server console also .

This is my confirm.jsp code:

<%
	System.out.println("Hello this is a sample jsp form");
            //This is the name of my input field i have set in my _createHTML()
	String formName = request.getParameter("evalFormName");
	out.println("formName = " + formName);
	System.out.println("formName = " + formName);
	String skillsValue = request.getParameter("hidSkillsVal");
	out.println("skillsValue = " + skillsValue);
	System.out.println("skillsValue = " + skillsValue);
	
%>

Please let me know what am i missing??

Thanks..

[pshah]

First thing I noticed, you need to set the "action" attribute on the FORM element. Not "target" - which is probably whats causing the new window to get spawned.

You also may need to add the newly created IFRAME to your DOM somewhere. For now, just try adding it the BODY via something like "document.body.appendChild(iframe)".

And eventually, you'll want to make it hidden.

Jiggy, there's some basic HTML concepts here that I think you need to learn before tackling such a problem like this. Unfortunately, this is beyond the scope of how much I can help you.

I hope this was enough to help push you forward.

[jiggy]

Thanks pshah,

It is working now.
Thanks a lot for your cooperation.

[jiggy]

Hello Pshah,

As mentioned in my subject despite of making iframe hidden and appending it to a div element in my document a new window is opening with the address of the URL and the request parameters appeneded to it when submitting the form.
Also the control is not being transferred to my call back function...
Can you please let me know where it is going wrong.

This is the snippet of code i am using:

       var iframe = document.createElement("IFRAME");
		 iframe.width="0px";
		 iframe.height="0px"; 	
		 iframe.border="0px"; 	
                 var hiddenCell = document.getElementById(this._hidDivId);
		 if(hiddenCell){
				hiddenCell.appendChild(iframe);
		  }
		 var post = new AjxPost(iframe);
		 var callback = new AjxCallback(this, this._myCallback);
		 var form = document.getElementById("formId");
		 post.execute(callback, form);

MyForm.prototype._myCallback = 
function () {
	alert("_myCallback");

}

Thanks

The form definition i am specifying is like this:

<form id='formId' action='http://localhost:7070/myApp/confirm.jsp'>
...
...
</form>

[ordex]

i got the same problem...can someone help me?
thank's a lot