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

Post HTML input tag file data to another input tag file and retrieve in Django views

I'm trying to send one <input type="file"... value to another <input type="file".. using Javascript.
I've created an HTML form and after filling it, I want to review the form. Then submit that form in my FormFill model through views.py.
So far what I have done is creating 2 different Divs for the same work.
In div1, I'm sending my form data using action="javascript:reviewForm()" and in reviewForm(), I'm setting all the form data of div1 to div2 form using
document.getElementById('cfname2').value = document.getElementById('cfname1').value;
It's setting all the values and then posting it to views.py successfully except my <input type="file" name="pic2".. data.
Since python retrieves form POST data using request.FILES['pic2'], in div2 I don't have file data to Post.
So far what I've tried is:
document.getElementById('pic2').value = document.getElementById('pic1').value;
where,
In div1 I have <input type="file" id="pic1"...
and in div2, <input type="file" id="pic2"...
My models.py
class FormFill(models.Model):
pic = models.ImageField(upload_to='candidates/pics/')
...
How can I post the div2 image data to views and then to Django models?
Note: I don't want to Post the div1 data directly to Django models since I want my users to first review the form that they have filled. And that's why using the concept of 2 Divs.
Thanks in advance.
Ps.Please ask me if I'm not able to clear the question.

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.

The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>

There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

Django; How can I connect javascript to db?

I'm doing project using Django and now I am trying to adapt js into the project. I'm not familiar with js and I'm wondering how I can manipulate db using js. For example, I want to use js for creating delete function. Currently, when I push delete button, I jump into the other page and then I have to push delete button again. But what I want to do is push the delete button and then pop up the window to confirm and delete something. How can I adapt js into Django in general?
Here is current way
first I have to push the button and jump into another page
<button style="display: inline;" onclick="window.location='{% url 'blog:delete_entry' entry_id=entry.id %}'" class="btn btn-link">Delete</button>
and then I have to push a button on the other page again.
<button type="submit" class="btn btn-outline-danger" id="delete-button">Delete</button>
Here is views.py
def delete_entry(request, entry_id):
entry = Entry.objects.get(id=entry_id)
if request.method != 'POST':
form = EditEntryForm(instance=entry)
else:
form = EditEntryForm(instance=entry)
entry.delete()
return HttpResponseRedirect(reverse_lazy ('blog:my_entry'))
return render(request, 'blog/delete_entry.html', {'entry': entry, 'form': form})
Anyone who can give me tips?

I could be wrong, but I typically only use javascript for the front-end. You are doing the back-end in Python with the Django frame work... it would be foolish not to use Python to manipulate the DB. Here is a template for mysql although I used Flask...
https://github.com/rootVIII/flask_mysql_template/blob/master/template.py
Even though it's Flask and not Django, the idea is still the same.
Your button should (or any form button) should have a Django endpoint associated with it (basically a path to the Django function). That way when the button is pressed, the Django/Python code on the back-end is ran. There you can perform your logic and database business in the Python code on the back-end.
Sorry for the Flask examples... but here is an endpoint for Flask in the index.html file from the above link... notice how the form action is associated with an endpoint /login_register
/login_register is what is ran when the form input button is pressed. It is a function on the back-end... in your case it might be named delete_entry
<form action = /login_register method="POST" id="userform">
<fieldset>
<!-- some labels and input values here -->
<input type="submit" name="submit" value="login/register" id="submit"/><br>
</fieldset>
</form>
So basically what I'm saying is that your button should not call Javascript. It should call a Python function on the back-end. And no you do not need to make a whole rest API to do this as was mentioned above

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!