We Keep Coding

Submitting a form with a complex structure dynamically generated in Javascript to a PHP script via POST method

I'm trying to figure out the best way to submit a form with a complex structure that is dynamically generated in Javascript to a PHP script via the POST method.
The form has this kind of hierarchical structure:
<div class="item">
<textarea class="subitem_textarea"></textarea>
<input type="text"/>
<input type="text"/>
</div>
<div class="item">
<textarea></textarea>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
The number of items is variable and can't be known in advance since items are created by the user. Each item has one <textarea> field, but a variable number of <input type="text"/> fields, since those are also created by the user.
I need to save the content of the form into a database, in a way that preserves this structure, so the PHP script must be able to know which field belong to which item.
I guess that one way to do this is, on the client side (Javascript + jQuery), to arrange for the fields to be given names in such a way that, on the server side (PHP), I can figure that out. For instance, using Javascript + jQuery, I could arrange for the HTML of the form that is dynamically generated on the client side to be:
<div class="item">
<textarea name="textareas[0]"></textarea>
<input type="text" name="texts[0][0]"/>
<input type="text" name="texts[0][1]"/>
</div>
<div class="item">
<textarea name="textareas[1]"></textarea>
<input type="text" name="texts[1][0]"/>
<input type="text" name="texts[1][1]"/>
<input type="text" name="texts[1][2]"/>
</div>
Then, on the server side, I can just recover the structure in PHP by inspecting the $_POST array. However, I can't help but think that I shouldn't have to bother with naming fields in a particular way, that it should be possible to recover the content and structure of the form in a simpler way.
For instance, in order to make various Ajax calls, I already need to store the content and structure of that dynamically created form in a Javascript object as it's being filled, which I send to the server using JSON.stringify when I make the Ajax call and recover in PHP with json_decode
For instance, if I store the content and structure of the dynamically created form in a Javascript object as it's being filled (which I already have to do anyway in order to make various Ajax calls that require that information), perhaps I can somehow use JSON.stringify to send that object to the PHP script that processes the form and use json_decode to get the correct data structure on the server side without the hassle. In fact, I guess I could even do that with another Ajax call that is made when the user clicks on the submit button, instead of doing it through a regular form submission. But I don't suppose it's the best practice and, since I don't have much experience in web development, I want to know what's the best practice to a form with a complex structure dynamically generated in Javascript to a PHP script via the POST method.
EDIT: Just to clarify, since Bilel pointed out I didn't say what I'm planning to do with the data in the form, the PHP script on the server side is going to store the data in the database in a way that preserves the structure.

That's a detailed Question but you didn't told us How are you going to use these collected Data ?
If it's meant to be stored and displayed, then yes you already found the easiest solution by encoding $_POST data with json.
If for example, you could later need relational functionalities like querying User Ages (those being posted through input fields), then you should think about pre-structuring your data. With jQuery/Javascript functions first into a well formatted Json and later Parse the json on the server side to Insert each input field in it's appropriate Database field.
Even, it's against design conventions and space consuming, I do sometimes store the whole json in a separate field near other structured database records. New DBMS can handle json types...
Just to show you an example, I made this function to store a pre-structured json containing Room Information in a booking system, where we can dynamically add extra rooms:
function jss(){
var json = {};
json.rooms = $('.camera').map(function() {
return {
max : $(this).find(".max").val()
, arrange : $(this).find(".arrang").val()
,kids: $('[name^=enf]', this).map(function() {
return {
age: $(this).val()
};
}).get()
, adults: $('[name^=pers]', this).map(function() {
return {
name: $(this).val()
};
}).get()
};
}).get();
return JSON.stringify(json, null, "\t");
}

Using custom fields for braintree's hosted fields & drop-in

I wanted to know if it is possible to use a custom form for braintree payment integration. By custom i mean something like this:
<form id="payment-form" method="post" action="/checkout.php">
<div id="customField>{$customField;}</div>
<div id="customField2>{$customField2;}</div>
<input type="submit" value="PAY">
</form>
<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script>
var clientToken = "";
braintree.setup("clientToken", "dropin", {
container: "payment-form"
});
</script>
I want to post my custom fields to checkout.php but it seems the form only returns payment method nonce. I don't want to store any of these custom values in braintree's vault either. Checkout.php just adds all values together (including received payment method nonce) from previous forms in an array and passes these values to .NET server. So is there a way to pass these values to checkout.php?

It looks like this is certainly possible using Braintree's Custom Fields
It looks like, though, you are not properly formatting your form to populate the Drop-In, per your Braintree.setup. The container you are specifying in the braintree.setup will correlate to a div element that will in turn be the drop in, not the ID of the complete payment form.
So, if you have a form that looks like;
<form>
<div id="dropin-container"></div>
</form>
, you'd want your braintree.setup to look like;
braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', {container: 'dropin-container'});
in order to convert the DIV "dropin-container" into the Drop In.
Custom Fields, though, can be included in the form, but you'll want to make them simply HTML Input elements, as opposed to div elements, that will be returned to your server alongside the nonce.
Hope this helps!

angular server side validation, how to find the form element from the object reference

I have a complex form with client and server side validations. lets assume the form is as simple as:
<input type="text" name="name" ng-model="object.name"/>
<div ng-repeat="order in object.Orders">
<input type="text" name="value{{$index}}" ng-model="order.Value"/>
<input type="text" name="descr{{$index}}" ng-model="order.Descr"/>
</div>
The actual form is much more complex than this and all the client side validation is working, my problem is when the user submits the form via an http ajax request then server returns validation errors in json format, like:
{ errors: [ { desc: "Invalid value", path: "object.Orders[0].Value" } ] }
I can easily get the object reference for the path returned by the server but, how can i get the form element so i can mark it invalid within angular?
I particular i wan't to set the form element $invalid. because the form is complex and i have many of thouse forms i wan't to make an automatic way of finding the form element from the object path object.Orders[0].Value.
Can anyone help me with this

Create the new ErrorObjetct and when you get the response assign that error response to that object and use that object like bellow.
<input type="text" name="name" ng-model="object.name"/>
<div ng-repeat="order in object.Orders">
<div>{{ErrorObject.value}}</div>
<input type="text" name="value{{$index}}" ng-model="order.Value"/>
<div>{{ErrorObject.descr}}</div>>
<input type="text" name="descr{{$index}}" ng-model="order.Descr"/>
</div>

if you want to show errors on form level and not field level, then just have some status bar where you can show these errors. It will be quick and a global solution. read here - at very bottom
if you want to show errors on field level and not on form level then you will have to change the format of error message, they should include the name of the property which caused the error + error description
then loop thru the form and each model attached to form and push error to $form.$model.$error array, to have tight integration with server side validation. But this solution would be difficult to make global, given that you might have multiple forms being validated same time. so you might need just one line of code for every form where on error of $http you synchronize errors from server with $form. READ HERE
Its too vast topic to provide a working sample, the links should get you going

Spring submit has double parameter

I am new to spring web applications. When I submit a form, the request mapping is getting a "dual" parameter.
My form is set as:
<form action="" method="post" name="myform">
......
</form>
I use a javascript to submit the form, for example, when I submit the form for going to various pages, my javascript is like this:
function gotoPage(pageNumber)
{
document.forms['myform'].action="trx?page=" + pageNumber;
document.forms['myform'].submit();
}
So when I have a link like this on my jsp page,
Page number: 3
On my controller for the request mapping for /trx, I should be getting parameter page as value "3", but I am getting value as "3,3".
Any ideas why? I noticed only on the page parameter, If I use parameters like action=search or action=sort. It all works out fine.

Dumb question. :)
Had a <select name="page"> in the form.

problem getting value from jsp to servlet

I am trying to get value of count (which is 1) from the parent jsp page into servlet.
But it gives an error: "opener.document.getElementById(...)is null or not an object".
Is this because i'm trying to get value without submitting the form??
Will be glad if someone could help.
jsp:
<td> <input type="hidden" name="count" id="count" value="1"></td>
servlet:
out.print("var oWindow = window.external.menuArguments;");
out.println("var ctr=oWindow.opener.document.getElementById(\"count\").getAttribute(\"value\");");

That all depends on which page window, oWindow, or oWindow.opener is pointing to, do you really have 3 client-side window objects involved in this operation? Perhaps it should just be:
var ctr=oWindow.document.getElementById('count').getAttribute('value');
...or you should give a little more information as to the structure of your application. For example, window.external is for when you have extended MSIE and added your own context menu item, this has very little to do with servlets.