We Keep Coding

POST a JavaScript array of Strings into Spring Boot/Thymeleaf form Object

I am using Spring Boot and Thymeleaf with some vanilla JavaScript. In my JavaScript, I have an array of strings as below:
var tags = ["ramen", "japanese"];
I want to use JavaScript to dynamically add/remove items in this array before it gets submitted to the backend. The user can add 0..* tags.
Data gets submitted to the backend only via HTML <form> submits. There is also a model attribute which captures these details from the HTML form into Spring called VenueForm.
<form id="tag-form" class="form" method="POST" th:object="${venueForm} th:action="/venue/tag">
VenueForm.java
public class VenueForm {
private List<String> tags;
private Object otherStuff;
...
// Getters and Setters
}
VenueController.java
#Controller
#RequestMapping("/venue/tag")
public class VenueController {
#PostMapping
public String createVenue(#ModelAttribute VenueForm venueForm){
List<String> tags = venueForm.getTags();
System.out.printLn(tag);
return "tags"
}
}
How do I assign the JavaScript array tags to the Thymeleaf form List field tags?
Usually the input comes from th:field="*{tags}" in an input field but because its an array I am not sure how to achieve this. Any help would be much appreciated. Please note jQuery is not an option, only vanilla JS.
I have tried to stop the HTML form submit using JS, then assigning the input field using JS but that did not work.
<input type="submit" value="Submit" th:onsubmit="submitForm(event)">
main.js
function submitForm(event){
event.preventDefault();
venueTagInput.value = JSON.stringify(tags);
console.log("sumitting...");
}

This existing post has helped me figure this out (Send Array using HTML)! Thymeleaf is just a templating engine on the server side, it renders into basic HTML. There is no need to do anything Thymeleaf specific to send an array of elements in the form. You have to follow the basic HTML way using the name attribute on an input field. You can use Javascript to create new DOM elements and making sure that for each element the index is incremented. No changes are needed on the controller side. Spring can work out that name="tags[0]" is tags.get(0);
<input type="text" class="form-control tag" id="1" name="tags[0]" value="">

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");
}

BrainTree.js with AngularJS and customVariables

I am using the BrainTree.js for PCI compliance, and the tutorial I am using here:
https://www.braintreepayments.com/docs/javascript
There recommendation is to call the form by the ID like so:
var braintree = Braintree.create("YourClientSideEncryptionKey");
braintree.onSubmitEncryptForm('braintree-payment-form');
I'm using AngularJS with the form being inside a controller. So inputs such as name, card, etc are tied to a scope using ng-model:
<div class="form-group">
<label>Card Number</label>
<input type="text" class="form-control" name="number" ng-model="card.number" />
</div>
My question is how can I submit a form using AngularJS and BrainTree.js in a manner that uses the data collected using ng-model?
Example:
braintree.onSubmitEncryptForm({name: $scope.card.name, card: $scope.card.number});

In Braintree, the braintree.onSubmitEncryptForm function wraps a small amount of functionality. Basically it just grabs the jQuery form representing the input data, transforms the form fields, and then scrubs them from the DOM, before allowing the request to be submitted to the server.
Since angular includes jQuery, you could call the braintree.encryptForm($('#braintree-payment-form')); which would return the encrypted data in the DOM. You should be able to access the 'ccv' and 'number' input elements like normal (the expire doesn't need to be encrypted).
month=55&year=5555&number=%24bt4%7Cjavascript_1_3_10%24ne0ib
vLjzzck52xzNiY2C8grXaZgpwfVpGrsR9TbHLPaW983e3y7R6tClw8YxYe5w
MA9%2BNHLjPBb%2FEsJQBSiCARJK7Wlxu53GO6mHMr0QMglQEiy9%2B9Dla8
DkY0XBpyfomqniwsDEuudiX7l%2FIb%2FsS4BRFu1BS8MpNpYWSghdj%2FTR
28jhRxlBNZVLjlG9cJd%2FNwDIRUv80qX4Di38bjrvywZR3nP%2BsEcUDSZj
DYQb08LDtN6Vhg5%2FTt1ketZqQH83XheDAFeTuGnb6iE1n8cZbePio8%2FC
m071d2zDZiSc57m%2BEnMJERc%2F2NYrWERl32o4L6DlltB9veZH30mKsPkB
Q%3D%3D%24qpTMCwpQQ5aEk3QO60yu8dQ1SBh3ezit564s1gK604tyIHh%2F
XqipKWgPCli2ZtFW%24AUph2EeuSMh2e8CxNRGVfsIRLvegNAulBDdDY3kwl
GA%3D&cvv=%24bt4%7Cjavascript_1_3_10%24e%2FWsFiRYkHsV%2B6RD5
j26KwII3ErBklZjXB2o1SKGtg1GvemW9J5cSQNBu3K%2BAy0uymAu5awICVR
pIB7%2FiIPBkC8vHBhX57oJabKkCyqkm6YWKio5Pce%2BasD1q4RzGFT1y1Q
iqw%2Fmt12ovQz6G%2B6yZbqQ0wUtFPt4vMSnmQIBogNtgiXeHbirSDHrY9N
V7hoBIaQ%2FV4up87AXs%2FL36FKuBF1rtTyhh%2BEEDgvqkKuRfr6Sim2zc
JNEvcsi7mJp4y6F1%2BNUiLao3w8RfTKt%2BUJUU1XHz3sWLeb2A1chamnFY
UjdVyEgrRFpGH9%2BLdrNYghpmibM6xRsO9p%2Bi1a8yYOMsg%3D%3D%24sd
IGDgI6Jo3zru4YEXtvYI37Oesw09HBISdpcCh6dho%3D%24s8SaRheCM6kWV
OQQ3Ae%2FJjVQQpw6Hht0BWrVIGpV1u4%3D
And then POST to your create_transaction method (if you're running from the tutorial).

jQuery Auto-submit form inside of a <div> loads in new page

I'm developing a project of "prettifying" of a part of an existing web application. There is a need of putting the existing code: search criteria form in one div, and search results in another div (forming a kind of tabs, but that's another story).
Using jQuery I was able to manage that, but right now I am struggling with the results page, which by itself is yet another form that auto-submits to another file (using document.form.submit()), which is the final search results view. This auto-submit causes that the final view quits the destination div and loads as a new page (not new window).
So, the flow is like that:
First file, let's call it "criteria.html" loads the search criteria form (inside of a div) + another div (empty) destined to be filled with search results.:
<div id="criteria">... form with search criteria here...</div>
<div id="results"></div>
On submit, using jQuery's "hide()" method, I hide the first div (surrounding the search criteria form), and make Ajax call to the second file, let's call it "results.php":
<script>
$("#criteria").hide();
$.ajax({
...,
url: "results.php",
success: function(data){
$("#results").html(data);
},
...
});
</script>
results.php searches according to given criteria, and displays an "intermediary form" (which returns as a data result of the ajax query above) with a lot of hidden fields, and at the end executes:
<script>document.form.submit();</script>
which submits to another file, let's call it "resultsView.php"
This line causes that a result page shows outside the div "results", as a new page.
As there is a lot of logic in those files (more than 700 lines each), the idea of rewriting this monster just gives me creeps.
And now the question: is this a normal behavior (opening the result outside div)?
I tried removing the document.form.submit() code and everything works fine (well, without showing the results from "resultsView.php"). It's this line that causes the viewport to reset. I also tried with empty pages (to eliminate the possibility of the interaction with contents of the pages) - still the same result.
I hope there is not too much text and the problem is clearly stated. Every suggestion of how to fix this will be greatly appreciated.

If I understand your question correctly, you need to process the final submit using ajax instead of <script>document.form.submit();</script> so that you can handle the results on-page. Traditional form submits will always reload/open the action page. If you want to avoid that you'll have to control the form submit response via ajax and handle the results accordingly... like you are doing with the first submit.
The only alternative I can think of is to make div id="results" an iframe instead, so that it contains the subsequent form submit. Of course, that unleashes further restrictions that may cause other troubles.

I am not sure if I understood your question, but maybe u can do something like this.
This is my JQuery script: [I just wait for the submission search. When it happens, I use the $.Post method to call a function that should return the Html results (You can include somenthing to hide any field you want using JQuery or css)].
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#searchForm").submit(function() {
var theCity = $("select#chooseCity").val();
var theName = $("input#searchInput").val();
$.post("callProvideSearchResults.php", {theCity: theCity, theName: theName}, function(data) {
$("div#searchResults").html(data);
});
return false
});
});
</script>
This is my Body: {it consists of the choice of a city, the a form to provide the name of the person you are lookng for and the place to provide the results.
<body>
<FORM id="searchForm">
<h2>Select the city: </h2>
<select id="chooseCity">
<?php
$theCitiesOptionsHTML = "cityOptions.html";
require($thePathDataFiles.$theCitiesOptionsHTML); / A large list of cities
?>
</select>
<h2> What is the name of the person </h2>
<P> <INPUT id="searchInput" TYPE="TEXT" SIZE=50></P>
<P><INPUT TYPE="submit" VALUE="search"></P>
</FORM>
<div id="searchResults">
<!-- Here: Search results -->
</div>
</body>
// Function callProvideSearchResults.php // Just call the function that makes all the job and echo the $Html page
<?php
include "provideSearchResults.php";
$theName=$_POST['theName'];
$theCity=$_POST['theCity'];
echo provideSearchResults($theName, $theCity);
?>
// provideSearchResults.php // Database connection and search
<?php
function provideSearchResults($theName, $theCity) {
include "databaseConnection.php";
//database Queries
// Generate $theHtml using strings or ob_start, for instance
return $theHtml;
}
?>

Multiple jqueryfileupload widget within a form

I try to replace classic input file with JqueryFileUpload widget.
Here is my context :
I can have one or more file input in the same form.
The form is meant to create server side objects (each input is a field of this object and each file is a "resource" object linked to the main created object). Those object are stored in a database.
When the final user submit the form, I'd like to :
do many validation (for other inputs)
if all is ok, then trigger the ajax upload of file(s). A server-side handler create the
needed ressource object(s).
when all the uploads are completed (I can know that by using the widget callbacks), then I submit the main form (the action form is not the widget handler but a page that do the job and display a message) to create the main object : I don't want to send the file(s) here but only the ressource objects id that the handler send me back to link them to the main object).
My problem is, when I trigger the fileUpload the form is submitted and the action form page is loaded. The handler isn't called.
I made test with a simple page : if the widget is not within a form it works fine :
<body>
<div>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</div>
</body>
but if I put it in a form the form is always submitted and I can't prevent this.
<body>
<form action="myPage.aspx">
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</form>
</body>
My questions are :
Doesn't the url option override the form action ?
Can I not use different target for the widget and the form that contains it ?
Can I put multiple widgets in a single form ?

Okay just for information it was a pretty stupid mistake from my side, I used a which default behavior is 'submit' so my form was always submitted.