Develop Reference

Use a button in a forms to append variables to an url which has variables from another forms

I have a site with a search bar and some checkboxes, these add variables to the url:
term = "test"
variable1=1
url/search?term=test&variable1=1
Then, after that search is complete I have another forms to the left of the page with some other checkboxes and another search button. I want that button, when clicked, to run another search with the old search term and variables but with the new ones added
othervariable=1
url/search?term=test&variable1=1&othervariable=1
I have tried some suggestions from other threads but the second search button appears to only add the variable to the url
url/othervariable=1
which does not work for this
first forms:
<form id="search_form" method="get" name="search">
<div class="input-group row" style="width: 40vw ">
{% if termo %}
<input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" maxlength="1800" id="input_text" name="termo_busca" class="form-control" value="{{ termo }}"/>
{% else %}
<input style="border-radius: 0; background-color: rgba(255,255,255,0.8);" type="text" name="termo_busca" class="form-control" placeholder="Digite o termo que deseja pesquisar"/>
{% endif %}
<div class="input-group-btn">
<button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="input-group row" style="width: 44vw">
<!-- <label style="font-size: 12px;">Cortes :</label> -->
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="recursal" value="1" {% if "recursal" in courts %} checked {% else %} {% endif %}> Recursal
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="constitucional" value="1" {% if "constitucional" in courts %} checked {% else %} {% endif %} > Constitucional
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="reclamacao" value="1" {% if "reclamacao" in courts %} checked {% else %} {% endif %} > Reclamacao
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="habeas_corpus" value="1" {% if "habeas_corpus" in courts %} checked {% else %} {% endif %} > Habeas Corpus
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="mandado_seguranca" value="1" {% if "mandado_seguranca" in courts %} checked {% else %} {% endif %} > Mandado Seguranca
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="penal_original" value="1" {% if "penal_original" in courts %} checked {% else %} {% endif %} > Penal Original
</label>
<label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="outros" value="1" {% if "outros" in courts %} checked {% else %} {% endif %} > Outros
</label>
<!-- <label class="checkbox-inline" style="font-size: 11px; background-color: rgba(255,255,255,0.0);">
<input type="checkbox" name="todos" value="1" {% if todos == None %} {% else %} checked {% endif %} checked> Todos
</label> -->
</div>
{% if total %}
<strong style="font-size: 13px;"></strong>
{% elif termo %}
<strong style="font-size: 13px;">Não foram encontradas decisões relacionadas ao termo {{ termo }}.</strong> <br/><br/>
{% endif %}
</form>
second forms:
<form id="diogo_form" method="get" name="search" ; background-color: rgba(255,255,255,0.0);">
<div class="dropdown" data-control="checkbox-dropdown">
<label class="dropdown-option">
<input type="checkbox" name="selecone" value="1" {% if "selecone" in decision_results %} checked {% else %} {% endif %}/>
selecone
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Two" value="1" {% if "Selection Two" in decision_results %} checked {% else %} {% endif %}/>
Selection Two
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Three" value="1" {% if "Selection Three" in decision_results %} checked {% else %} {% endif %}/>
Selection Three
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Four" value="1" {% if "Selection Four" in decision_results %} checked {% else %} {% endif %}/>
Selection Four
</label>
<label class="dropdown-option">
<input type="checkbox" name="Selection Five" value="1" {% if "Selection Five" in decision_results %} checked {% else %} {% endif %}/>
Selection Five
</label>
</div>
<div class="input-group-btn">
<button style="background-color: #4A9FFF; border-color: #4A9FFF; cursor: pointer; border-radius: 0; padding: 0.85rem 1.05rem; font-size: 1.5rem; line-height: 1.25;" onclick="changeFlag()" type="submit" class="btn btn-primary btn-md" value="Buscar">
<i class="fa fa-search"></i>
</button>
</div>
</form>

The form will only submit the fields that belong to it (i.e. inside the <form>). If you want to repeat the search with the new form inputs added, you can add an <input type="hidden"> with the value that you get from the GET request to the side form (second one).
So let's say you get the termo_busca from the URL, then you can add:
<input type="hidden" value="{{termo}}" name="termo_busca" />
to your second form. And so on, for the other search parameters you want to repeat.
You should only add an <input type="hidden"> for each parameter you want to repeat in the second search as-is (i.e. the user won't modify it).
If you want the user to be able to modify it in the diogo_form, then you should add the corresponding input with the correct type (e.g. checkbox).
So if you want to repeat the recursal checkbox in the second form, you would add this line from the first form:
<input type="checkbox" name="recursal" value="1" {% if "recursal" in params %} checked {% endif %}> Recursal
Note that you would check for recursal in the GET parameters.
Also, note that I removed the {% else %} since it wasn't doing anything there.
UPDATE:
Like I said, the form will only submit the values that it contains. If you don't want to repeat the checkboxes then you need a javascript solution that will "add" these values to your second form on submit or will mirror them.
Here is a solution using jQuery and adding them before you submit:
$('#diogo_form').on('submit', function(e) {
e.preventDefault();
let recursal_val = $('#search_form input[name="recursal"]').is(':checked') ? 1 : 0;
$('#diogo_form').append(`<input type="hidden" name="recursal" value="${recursal_val}" />`);
// ... do the same for all other values you want to copy
// you could potentially also copy them all if you want them all
// $('#search_form input[type="checkbox"]').each(function(i, e) {
// let name = $(e).attr('name');
// let checked = $(e).is(':checked');
// if(checked) {
// // add to diogo_form (see above)
// }
// });
$('#diogo_form').submit();
});

Submit button are not submitting form as i have 2 buttons with ajax requests

I have a form with it is own submit button and there is a button inside that form that has the attributes type=button, onclick=somefunction().. the button with the onclick runs great but the other button is not submitting at all.
I've made sure that the button with the function on click have type=button and other button have type=submit
Here is my code:
{% extends 'base/base.html' %}
{% block content %}
<!-- Page Content -->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<!-- page content -->
<br><br>
<h3>إنشاء فاتورة بيع جديدة </h3>
<br><br>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method='post' autocomplete="off" action=".">
{% csrf_token %}
<div class="autocomplete" style="width:100%">
<b>هاتف العميل </b><br>
{{ create_sell_invoice.client }}
<br>
<p style="display: none;" id="shown_name">
client name
</p>
<div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
<form method='POST'>
{% csrf_token %}
<small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
<br><br>
<b>إسم الطالب</b>
{{ add_client_from_invoice_form.student_name }}
<br><br>
<b>ولى الامر</b>
{{ add_client_from_invoice_form.parent_name }}
<br><br>
<b>العنوان</b>
{{ add_client_from_invoice_form.address }}
<br><br>
<b>الهاتف</b>
{{ add_client_from_invoice_form.phone1 }}
<br><br>
<b>المستوى</b>
{{ add_client_from_invoice_form.level }}
<br><Br>
<button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
إضافة
</button>
</form>
</div>
</div>
<b id="id_delivery_title">التوصيل </b><br>
{{ create_sell_invoice.delivery }}
<br><br>
<b id="id_delivery_price_title">تكلفة التوصيل </b><br>
{{ create_sell_invoice.delivery_price }}
<br><br>
<b id="id_delivery_notes_title">ملاحظات على التوصيل </b><br>
{{ create_sell_invoice.delivery_notes }}
<br><br>
<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
<br><Br><Br>
</form>
<script>
function sendingRequest() {
const studentName = document.getElementById('studentName');
const parentName = document.getElementById('parentName');
const clientAddress = document.getElementById('clientAddress');
const clientPhone = document.getElementById('clientPhone');
const clientLevel = document.getElementById('clientLevel');
$.ajax({
url: '/add/new/client/from/invoice/normal/invoice_sell_add/' + studentName.value + '/' + parentName.value + '/' + clientAddress.value + '/' + clientPhone.value + '/' + clientLevel.value + '/',
type: "POST",
data: {name: 'name', age: 'age'},
success: function (response) {
const add_new_client = document.getElementById('add_new_client');
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;')
window.location.reload();
},
complete: function () {
},
error: function (xhr, textStatus, thrownError) {
}
});
}
</script>
<!-- /.col-lg-12 -->
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<datalist id="mylist">
{% for item in clients %}
<option>{{ item }}</option>
{% endfor %}
</datalist>
{% for item in clients %}
{{ item }}
{% endfor %}
<!-- ajax -->
<script>
$("#id_client").change(function () {
var number = $(this).val();
$.ajax({
url: '/ajax/getting_client_name/',
data: {
'number': number
},
dataType: 'json',
success: function (data) {
const shown_name = document.getElementById('shown_name'),
ok_button = document.getElementById('ok_button'),
add_new_client = document.getElementById('add_new_client');
if (data.client_name) {
shown_name.setAttribute('style', 'display:block;color: blue;');
shown_name.innerHTML = data.client_name;
ok_button.disabled = false;
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: none;background-color: #d3e4ec;');
$('#id_delivery').fadeIn();
$('#id_delivery_title').fadeIn();
$('#id_delivery_price').fadeIn();
$('#id_delivery_price_title').fadeIn();
$('#id_delivery_notes').fadeIn();
$('#id_delivery_notes_title').fadeIn();
if (data.client_name === 'رقم الهاتف غير صحيح') {
shown_name.setAttribute('style', 'display:block;color: red;');
ok_button.disabled = true;
add_new_client.setAttribute('style', 'margin:25px;padding: 25px;display: block;background-color: #d3e4ec;');
$('#id_delivery').fadeOut();
$('#id_delivery_title').fadeOut();
$('#id_delivery_price').fadeOut();
$('#id_delivery_price_title').fadeOut();
$('#id_delivery_notes').fadeOut();
$('#id_delivery_notes_title').fadeOut();
}
}
}
});
});
</script><!-- end of ajax -->
{% endblock %}
The problem is in this line of code
<button type="submit" id='ok_button' class="btn btn-primary form-control" disabled>موافق</button>
where the button do nothing at all when clicked

Based on #hindmose comment the problem was having nested forms, I solved it by deleting the inner form tags and moved this part before the opening form tag .. now it is like :
<div id="add_new_client" style="margin:25px;padding: 25px;display: none;">
<small style="color:rebeccapurple;">يمكنك إضافة عميل جديد برقم هاتف جديد</small>
<br><br>
<b>إسم الطالب</b>
{{ add_client_from_invoice_form.student_name }}
<br><br>
<b>ولى الامر</b>
{{ add_client_from_invoice_form.parent_name }}
<br><br>
<b>العنوان</b>
{{ add_client_from_invoice_form.address }}
<br><br>
<b>الهاتف</b>
{{ add_client_from_invoice_form.phone1 }}
<br><br>
<b>المستوى</b>
{{ add_client_from_invoice_form.level }}
<br><Br>
<button type="button" class="btn btn-success form-control" onclick="sendingRequest()">
إضافة
</button>
</div>
<form method='post' autocomplete="off" action=".">
....

Rating star PHP/JS

I need to implement a rating star in my project but my js don't work. Can anyone help me?
Javascript code:
let $star_rating = $('.list-group-item .fa');
let SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is my view:
<div class="d-inline-flex">
<input type="checkbox" id="checkAll" onclick="toggle(this);">
<p class="mt-3 mb-0 ml-1">Tous vus</p>
</div>
{% for episode in episodes %}
<li class="list-group-item bgt">
{% if episode.hasSeen == 0 %}
<input type="checkbox" id="{{ episode.id }}" name="hasSeen" onclick="processForm(this)">
{% else %}
<input type="checkbox" id="{{ episode.id }}" name="hasSeen" checked="checked" onclick="processForm(this)">
{% endif %}
{{ "E%02d" | format (episode.number) }} - {{ episode.title }}
{% for i in 1..5 %}
<span id ="starRating" class="fa fa-star-o" data-rating="{{ i }}" ></span>
<input type="hidden" name="whatever1" class="rating-value" value="{{ episode.note }}">
{% endfor %}
</li>
{% endfor %}

Unable to implement jspdf using javascript?

I am trying to use jspdf to download a pdf and save it using javascript. Now, the problem is that when I try to execute jspdf function, I get this annoying error. I am using django with python. My goal is to be able to download the page using jspdf and then automatically trigger the print preview event for the user. What could I be doing wrong ??
jspdf.min.js:70 Uncaught TypeError: Cannot read property 'name' of undefined
at k (jspdf.min.js:70)
at r (jspdf.min.js:70)
at r (jspdf.min.js:70)
at r (jspdf.min.js:70)
at r (jspdf.min.js:70)
at jspdf.min.js:70
at i (jspdf.min.js:70)
at v (jspdf.min.js:70)
at x (jspdf.min.js:70)
at Object.e.fromHTML (jspdf.min.js:70)
This is what I tried so far. What could I be doing wrong?
<div id="content">
<div class="mdl-grid">
<div>
{% if messages %}
<div >
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
<div class="mdl-grid">
<!-- profile card -->
<!-- Square card -->
<style>
.demo-card-square.mdl-card {
{#width: 320px;#}
min-height: 200px;
max-height: 600px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
min-height: 250px;
max-height: 250px;
background:
url('/media/profile.png') bottom right 15% no-repeat #3C5D73;
}
{#.mdl-card__supporting-text {#}
{# height: 320px;#}
{#}#}
</style>
<div class="demo-card-square mdl-card mdl-cell mdl-cell--3-col mdl-shadow--3dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">{{ member.get_full_name }}</h2>
</div>
<div class="mdl-card__supporting-text">
<input type="hidden" value={% if member.isUserActive%}Active {% else %}Inactive{% endif %} id="status"/>
Member status - {% if member.isUserActive %}Active {% else %}Inactive{% endif %}<br>
{{ member.get_aniversary_start }} - {{ member.get_aniversary_end }}
</div>
<div class="mdl-card__actions center-items mdl-card--border" >
<table class="mdl-data-table mdl-js-data-table mdl-cell--3-col">
<tr>
<td colspan="3"
style="background-color: #3C5D73;color: #FFFFFF; text-align: center">
Cover
</td>
</tr>
<tr style="background-color: #3C5D73; color: #FFFFFF; text-align:left">
<td>
Benefit
</td>
<td>
Limit
</td>
<td>
Balance
</td>
</tr>
{% for benefit in member.get_benefits %}
<tr>
<td style="padding-left: 0px">
{{ benefit.name }}
</td>
<td style="padding-left: 0px">
{{ benefit.limit|intcomma }}
</td>
<td style="padding-left: 0px">
{{ benefit.balance|intcomma }}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<!-- end profile card -->
<div class="mdl-shadow--3dp mdl-cell mdl-cell--8-col mdl-typography--text-right">
<form method="post" id ="preauth" action="{% url 'payments_pre_authorization_new' member.member_no %}">
{% csrf_token %}
{{ form.non_field_errors }}
<input type="hidden" name="action" value="login"/>
<div class="mdl-grid ">
<input type="text" name="name" value="{{ member.get_full_name }}">
<input type="text" id="member_no" name="member_no" value="{{ member.member_no }}">
</select>
</div>
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select mdl-cell mdl-cell---col">
{# <input type="text" value="" class="mdl-textfield__input"#}
{# id="provider" readonly>#}
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_ward">Provider</label>
{{ form.provider }}
{# <input type="hidden" value="" name="provider">#}
{# <label for="provider" class="mdl-textfield__label">provider</label>#}
{# <span class="mdl-textfield__error">{{ form.provider.errors }}</span>#}
{# <ul for="provider"#}
{# class="mdl-menu mdl-menu--bottom-left mdl-js-menu">#}
{# <li class="mdl-menu__item" data-val="1">21st Century Insurance</li>#}
{# <li class="mdl-menu__item" data-val="2">AARP</li>#}
{# <li class="mdl-menu__item" data-val="3">ACE Limited</li>#}
{# <li class="mdl-menu__item" data-val="4">Elephant.com</li>#}
{##}
{# </ul>#}
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--5-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_ward">Ward</label>
{# <span class="mdl-textfield__error">{{ form.ward.errors }}</span>#}
{{ form.ward }}
{# <input type="number" class="mdl-textfield__input"#}
{# id="id_{{ form.ward.name }}"#}
{# name="{{ form.ward.name }}" value="{% if form.ward.value != None %}{{ form.ward.value }}{% endif %}"#}
{# required>#}
</div>
{##}
{# <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col">#}
{# <label class="mdl-textfield__label mdl-color-text--grey"#}
{# for="textfield_anniv">Anniv</label>#}
{# <span class="mdl-textfield__error">{{ form.anniv.errors }}</span>#}
{# <input type="number" class="mdl-textfield__input"#}
{# id="id_{{ form.anniv.name }}"#}
{# name="{{ form.anniv.name }}"#}
{# value="{% if form.anniv.value != None %}{{ form.anniv.value }}{% endif %}"#}
{# required>#}
{# </div>#}
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--12-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_pre_diagnosis">Diagnosis</label>
<span class="mdl-textfield__error">{{ form.pre_diagnosis.errors }}</span>
<textarea class="mdl-textfield__input" id="id_{{ form.pre_diagnosis.name }}"
name="{{ form.pre_diagnosis.name }}"
rows="3"
required>{% if form.pre_diagnosis.value != None %}
{{ form.pre_diagnosis.value }}{% else %} {% endif %}</textarea>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col admitted">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_available_limit">Days to Admit</label>
<span class="mdl-textfield__error">{{ form.admit_days.errors }}</span>
<input type="number" class="mdl-textfield__input"
id="id_{{ form.admit_days.name }}"
name="{{ form.admit_days.name }}"
value="{% if form.admit_days.value != None %}{{ form.admit_days.value }}{% endif %}"
>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col admitted">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_date_admitted">Date Admitted </label>
<span class="mdl-textfield__error">{{ form.date_admitted.errors }}</span>
<input class="mdl-textfield__input" type="date" id="id_{{ form.date_admitted.name }}"
name="{{ form.date_admitted.name }}"
value="{% if form.date_admitted.value != None %}{{ form.date_admitted.value }} {% else %} {% endif %}"
>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_available_limit">Authority Limit</label>
<span class="mdl-textfield__error">{{ form.available_limit.errors }}</span>
<input type="number" class="mdl-textfield__input"
id="id_{{ form.available_limit.name }}"
name="{{ form.available_limit.name }}"
value="{% if form.available_limit.value != None %}{{ form.available_limit.value }}{% endif %}"
required>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col admitted">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_day_bed_charge">Daily Bed Limit</label>
<span class="mdl-textfield__error">{{ form.day_bed_charge.errors }}</span>
<input type="number" class="mdl-textfield__input"
id="id_{{ form.day_bed_charge.name }}"
name="{{ form.day_bed_charge.name }}" value="{% if form.day_bed_charge.value != None %}{{ form.day_bed_charge.value }}{% endif %}"
>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_reserve">Reserve Amount</label>
<span class="mdl-textfield__error">{{ form.reserve.errors }}</span>
<input type="number" class="mdl-textfield__input"
id="id_{{ form.reserve.name }}"
name="{{ form.reserve.name }}"
value="{% if form.reserve.value != None %}{{ form.reserve.value }}{% endif %}"
required>
</div>
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_date_reported">Date Reported</label>
<span class="mdl-textfield__error">{{ form.date_reported.errors}}</span>
<input class="mdl-textfield__input" type="date"
id="id_{{ form.date_reported.name }}"
name="{{ form.date_reported.name }}"
value="{% if form.date_reported.value != None %}{{ form.date_reported.value }} {% else %} {% endif %}"
required>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--8-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_reported_by">Reported By</label>
<span class="mdl-textfield__error">{{ form.reported_by.errors }}</span>
<input class="mdl-textfield__input" type="text"
id="id_{{ form.reported_by.name }}"
name="{{ form.reported_by.name }}"
value="{% if form.reported_by.value != None %}{{ form.reported_by.value }} {% else %} {% endif %}"
required>
</div>
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--12-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_notes">Notes</label>
<span class="mdl-textfield__error">{{ form.notes.errors }}</span>
<textarea class="mdl-textfield__input" id="id_{{ form.notes.name }}"
name="{{ form.notes.name }}"
rows="3" cols="100"
required>{% if form.notes.value != None %}
{{ form.notes.value }}{% else %} {% endif %}</textarea>
</div>
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_notes">Extension/Notes</label>
<span class="mdl-textfield__error">{{ form.internal_notes.errors }}</span>
{{ form.internal_notes }}
</div>
</div>
<div class="mdl-grid ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_dob">Date Authorised </label>
<span class="mdl-textfield__error">{{ form.dob.errors }}</span>
<input class="mdl-textfield__input" type="date" id="id_{{ form.dob.name }}"
name="{{ form.dob.name }}"
value="{% if form.dob.value != None %}{{ form.dob.value }} {% else %} {% endif %}"
required>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--9-col">
<label class="mdl-textfield__label mdl-color-text--grey"
for="textfield_authorised_by">Authorised By</label>
<span class="mdl-textfield__error">{{ form.authorized_by.errors }}</span>
<input class="mdl-textfield__input" type="text" id="id_{{ form.authorized_by.name }}"
name="{{ form.authorized_by.name }}"
value="{% if form.authorized_by.value != None %}{{ form.authorized_by.value }}{% else %}{% endif %}"
required>
</div>
</div>
{# {{ form|crispy }}#}
<div class="mdl-cell mdl-cell--12-col send-button" align="center">
<button id="submit" type="submit"
class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--raised mdl-button--colored mdl-color--primary disabled">
Submit
</button>
<button id="btn_print" type="submit"
class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--raised mdl-button--colored mdl-color--primary disabled">
PrintS Button
</button>
</div>
</form>
</div>
</div>
</div>
<div id="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript">
window.onload = onfuncload;
function onfuncload() {
var bla = $('#status').val();
if(bla==='Inactive'){
console.log('hhjfjfEntered');
$("#preauth :input").prop("disabled", true);
}
console.log("blahhh",bla);
}
$('#btn_print').click(function (e) {
console.log('gbdhdhd')
e.preventDefault();
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#content')[0];
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width// max width of content on PDF
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins
);
});
$('#id_authority_type').change(function() {
var selection = $('#id_authority_type').val();
$('.admitted').show();
console.log(selection);
if(selection == '1'){
$('.admitted').hide();
}
})
</script>

This issue suggests that jsPDF doesn't work with colspan or rowspan.

How to save values to database using AngularJS (Django Frame Work)

Hi my project works on Django framework with some use of AngularJS. What I need to achieve is when I click on submit on my page(html), it should save all the values I entered into the Database. I heard that I just need a simple submit button and main changes are in views.py. I am very new to Django as well as AngularJS. The following is my codes. Thanks in advance.
Html and AngularJS:
{% extends "base.html" %}
{% load static %}
{% block stylesheets %}
<link href="{% static 'css/xxg.css' %}" rel="stylesheet">
{% endblock %}
{% block mainbody %}
<br><br>
<div class="well">
<div class="well" ng-controller="LayerCtrl">
<table>
<tr>
<td>
<div class="input-group">
<span class="input-group-addon">jj</span>
<select class="form-control" name="jj">
{% for f in fab %}
<option value="{{f}}">{{f}}</option>
{% endfor %}
</select>
</div>
</td>
<td>
<div class="input-group">
{% for f in jj%}
{% if f == '1' %}
<span class="input-group-addon">yy</span>
<select class="form-control" ng-model="rr" ng-options="l.value as l.label for l in yyy"></select>
{% endif %}
{% if f == '8' %}
<span class="input-group-addon">tt</span>
<select class="form-control" ng-model="selected_technode" ng-options="l.value as l.label for l in rrr"></select>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">DD</span>
<!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
{%verbatim%}
<select class="form-control" ng-model="selected_dd" ng-options="l as l for l in tt"></select>
{%endverbatim%}
</div>
</td>
</tr>
</table>
</div>
<div><h3>history:</h3></div>
<br/><br/>
<div ng-controller="AlertDemoCtrl">
<table class="table">
{% verbatim %}
<tr>
<td class="input-group" ng-repeat="(k,v) in alerts">
<span class="input-group-addon" ng-hide="v.hide">Check {{ k }}</span>
<span ng-hide="v.hide">
<input type="text" class="form-control" placeholder="Add gg here" ng-model="v.input">
<b>QQQ</b><input type="radio" name="{{ k }}" value="fc" ng-model="v.props">
<b>issue</b><input type="radio" name="{{ k }}" value="rr" ng-model="v.props">
<b>risk</b><input type="radio" name="{{ k }}" value="dr" ng-model="v.props">
<a type="reset" ng-click="reset()">
<span class="glyphicon glyphicon-repeat"></span>
</a>
<a href="" ng-click="remove(v)">
<span class="glyphicon glyphicon-trash"></span></a>
</span>
{% endverbatim %}
<tr>
<td>
<button type="button" class='btn btn-info' ng-click="addAlert()">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button type="reset" ng-click="reset()" class="btn btn-danger">
<span class="glyphicon glyphicon-repeat"></span>
Reset All</button>
</td>
</tr>
</table>
</div>
<table class="table">
<!--IMPORT FILE-->
<tr>
<td>
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;' disabled>
</td>
</tr>
<!--ADD COMMENTS-->
<tr>
<td>
Add Comments*<div class="span5"><textarea name="bugnote_text" placeholder="Add comments here (max=600 characters)" rows="3" class="span10 ng-pristine
ng-valid ng-valid-maxlength" ng-maxlength="600"></textarea></div>
</td>
<td>
Add ftt*<input type="text" class="form-control" placeholder="Add ftthere">
</td>
</tr>
<form ng-submit="submit()" ng-controller="ExampleController">
<tr>
<td>
<button type="submit" id="submit" ngClick="Submit" class="btn btn-small btn-success"><span class="glyphicon glyphicon-pencil"></span> Submit</button>
<button class="btn btn-small btn-grey"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</tr>
</form>
</table>
</div>
{% endblock %}
{% block extrascript %}
{{ ngapp }}.controller("LayerCtrl", function ($scope, $http, $resource){
var layerresource_url = $resource("{% url 'api_list' 'v1' 'layer' %}");
console.log('initializing....')
$scope.$watch('yy', function () {
<!--alert($scope.yy);-->
$scope.update_layer();
});
$scope.update_layer = function(){;
console.log('Stage1: Initializing Primary Data... ');
layerresource_url.get({techtype__contains: $scope.selected, limit:1500},
function(data){
$scope.list = data['objects'][0]['layer'];
console.log($scope.layerlist);
},function(data, status){
console.log('Stage1: Internal error while loading initial data:'+status );
<!--alert('internal error');-->
}
);
};
});
{{ ngapp }}.controller("AlertDemoCtrl", function ($scope, $http, $resource){
$scope.alerts = [];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!', props : 0, input : ""});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
$scope.reset = function() {
angular.forEach($scope.alerts, function(v){
v.input = "";
v.props = 0;
});
};
$scope.remove = function(v){
v.hide = 1;
}
$scope.reset();
});
{% endblock %}

You can use AJAX if you don't want to use forms. In AngularJS, it would look like this. Note your controller should have the needed arguments:
$scope.addsomething = function() {
token = $window.localStorage.token;
//data to be submitted
$scope.data = {"name": $scope.name,"project": project_id,"some_url": someURL,"status": "1","type": 1};
$http.defaults.headers.common.Authorization = 'token '+$window.localStorage.token;
req = $http({
method: "POST",
url:"your_url/",
data:$scope.data,
headers: {
'Content-Type': 'application/json'
},
});
req.success(function(data,status) {
//do something on success
});
req.error(function(data, status, headers, config) {
//do something on error
});
}
On your backend you just have to point this URL to a view which will save it in the database. Hope this helps.