DJANGO - access form data in javascript in template - django

Question

How can I access form data in javascript in template?
I have a bootstrap 4 tabbed interface.
Each tab renders a dynamic django form.
Each form has dynamic 'command' buttons.
All form field and button data is coming from a json file.
So something like this...
The command buttons are handled by ajax, which basically calls a url based on the button clicked.
All of the tab forms are rendered by a single template.
How can I access the form data (different for each tab) in the javascript function?
( In the js function, look at 'SAVE FORM DATA HERE' and 'PASS FORM DATA HERE' )
template
{% load static %}
<table class="" id="tabCmdTbl">
<div class="btn-group">
<tr>
{% for btn in btns %}
<td width="125px">
{% if btn.btnText != "" %}
{% if btn.btnText == "End" %}
{% comment %}
<!-- Handle the exit button, its an anchor, all the other tabs are ajax -->
{% endcomment %}
<a type="button" class="btn btn-sm btn-outline-secondary w-100" target="_blank" href="/frontOffice">End</a>
{% else %}
<button type="button" class="btn btn-sm btn-outline-secondary w-100" onclick="tabBtn('{{btn.btnCmd}}')">
{{ btn.btnText }}
</button>
{% endif %}
{% endif %}
</td>
{% endfor %}
</tr>
</div>
</table>
<div id="tabloading" style="height:50px">
<p><img src="{% static 'FhHRx.gif' %}" /> Please Wait</p>
</div>
<hr>
<table id="tabDataTbl" border="1px" style="background-color:rgb(225, 229, 238)" >
{% for field in form.visible_fields %}
{% ifchanged field.field.row %} {% comment %} if the row changed {% endcomment %}
{% if field.field.row != 1 %} </tr> {% endif %} {% comment %} unless its the first row, end the row {% endcomment %}
<tr> {% comment %} rowchanged, not first row, start new row {% endcomment %}
{% endifchanged %}
{% ifchanged field.field.col %}
{% if field.field.col != 1 %} </td> {% endif %}
<td style="padding:5px">
{% else %}
{% ifchanged field.field.row %}
{% if field.field.row != 1 %} <td style="padding:5px"> {% endif %}
{% endifchanged %}
{% endifchanged %}
{{ field.label }}</td><td> {{ field }} </td>
{% endfor %}
</table>
<script>
$('#tabloading').hide();
function tabBtn(datap) {
$('#tabloading').show();
// alert(datap);
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
if (datap.includes("Save")) {
------ SAVE FORM DATA HERE ------
alert('x')
}
$.ajax({url:datap, //url,
data: { provider_code: '{{form.provider_code.value}}',
patient_number: '{{form.patient_number.value}}',
account_number: '{{form.account_number.value}}',
insurance_number: '{{form.insurance_number.value}}',
------ PASS FORM DATA HERE ------
},
type:"POST",
success:function(tabdata){
// alert(tabdata);
$('#tabloading').hide();
$("#tab-content").html(tabdata);
}
});
}
</script>