We Keep Coding

How to iterate over a Form in Html, store the data in a variable in Json, send it back to Django Backend as POST data

I need to iterate over an Html Form and get the data as JSON obj and send it to the Django backend to get data as objects.all(). Is this possible?
In this form I am iterating over a student detail list that I have rendered to the template using Django.
my form
<form method="POST " id="studentform">
{% csrf_token %}
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Admission No</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Present Status</th>
</tr>
</thead>
<tbody>
{% for student in student_names %}
<tr>
<th scope="row">
<div class="form-group ">
<select class="form-control st" style="appearance: none;" id="admission_number" name="admission_number">
<option>{{student.admission_number}}</option>
</select>
</div>
</th>
<td>
<div class="form-group">
<select class="form-control st" style="appearance: none;" id="first_name" name="first_name">
<option>{{student.first_name}}</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control st" style="appearance: none;" id="last_name" name="last_name">
<option>{{student.last_name}}</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control st " style="text-align: center;" id="attendance" name="attendance">
<option>Yes</option>
<option>No</option>
</select>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="birthdaytime">Grade :</label>
<select class="form-control" style="appearance: none; font-size: 18px; font-weight: 500;" id="grade" name="grade">
<option>{{user.studying_grade}}</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="birthdaytime">Subject :</label>
<select class="form-control" style="appearance: none; font-size: 18px; font-weight: 500;" id="subject" name="subject">
<option>{{user.assigned_subject}}</option>
</select>
</div>
<div class="form-group col-md-4">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</div>
</form>
any help or suggestions, tutorials much appreciate on how to do this.. Thanks

angularjs ng-form and ng-repeat with input validation and submit action

Angular 1.6.2
Try to iterate over elements of collection inputted by user and then check their validity and enable submit action if validation passes.
I try to use ng-form for this purpose and have two approach but each of them has side-effect.
First approach (ng-form at the table level):
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40%>
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach submit is disabled until all input are in set ranges but validation messages don't appear.
Second approach (ng-form at the table column level):
<table class="datatable table table-stripped table-responsive">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40% ng-form="form">
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach validation messages appear but submit button is always enabled.
Could you tell me what I did wrong?

Give the inputs different names:
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column{{$index}}" width=40%>
̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
<input id="proposed-ld-input{{$index}}" name="input{{$index}}"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" ng-show="form['input'+$index].$error.required">
Message required
</div>
<div class="error" ng-show="form['input'+$index].$error.max">
Message max
</div>
<div class="error" ng-show="form['input'+$index].$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
The ng-repeat creates multiple inputs. They need to be assigned different names for the error messages to be correct.

Use function in HTML form to specifc camps

I want to when I click the button it will add what I wrote in the field with the prefix say and send it through POST, the POST is working fine because if I don't use the script it will send it but without the "prefix"
<script>
function say() {
document.actionsv.command.value = ("say " + "\"" + document.COMMOM.SAY.value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
I've tried everything but can't get it to work..
This is the error in console: http://prntscr.com/oq4084

There more than one error with your code. I've made a fiddle for you.
<script>
function say()
{
console.log("say " + "\"" + document.actionsv.elements['SAY'].value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
You are poiting the result ta element that doesn't exist (document.actionsv.command) and you were using the forms array wrong. I don't know what you were trying to do with document.actionsv.command so i made e console.log with the result.

how to put an input value 1 in an input 2 use jquery

i have 2 input, i want when i click on button validate the value of input 1 puts in the input 2 and also it's input 1 empty give a message fill input 1.
help plz.
knowing that the button validate hide the form 1 and display the form 2:
<div id='form1'>
<div class="form-group col-md-4 col-md-offset-4">
<label>number day 1</label>
<input type="text" class="form-control" placeholder="nombre de jour 1">
</div>
<table class="table table-bordered">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>click</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td>click</td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button id="hide" class="btn btn-success " type="submit">valider</button>
</div>
</div>
<!------table2 ------>
<div id='form2'>
<div class="form-group col-md-4 col-md-offset-4">
<label>Number day 2</label>
<input type="text" class="form-control" placeholder="nombre de jour 2">
</div>
<table class="table table-bordered">
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
</table>
</div>
jquery code to hide form1 and display form2:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#form1").hide();
});
$("#hide").click(function(){
$("#form2").show();
});
});
</script>
the CSS code to hide the form 2 at the start:
<style>
#form2{
display:none;
}
</style>

You can set id for input and use
let value = $('#input1').val();
$('#input2').val(value);
$(document).ready(function(){
$("#hide").click(function(){
let value = $('#input1').val();
if (value == ""){
$('#error').show();
}else{
$("#form1").hide();
$("#form2").show();
$('#input2').val(value);
}
});
});
#form2{
display:none;
}
#error{
color:red;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form1'>
<div class="form-group col-md-4 col-md-offset-4">
<label>number day 1</label>
<input type="text" id='input1' class="form-control" placeholder="nombre de jour 1">
<span id='error'>Input can not blank</span>
</div>
<table class="table table-bordered">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
<td>click</td>
</tr>
<tr>
<td>ee</td>
<td>ff</td>
<td>gg</td>
<td>hh</td>
<td>click</td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button id="hide" class="btn btn-success " type="submit">valider</button>
</div>
</div>
<!------table2 ------>
<div id='form2'>
<div class="form-group col-md-4 col-md-offset-4">
<label>Number day 2</label>
<input type="text" id='input2' class="form-control" placeholder="nombre de jour 2">
</div>
<table class="table table-bordered">
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
<tr>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>rr</td>
<td>click</td>
</tr>
</table>
</div>

Angular :ng-form is getting undefined when view Changed

I did some validation check in my dropdown selection when I delete a row. After saving the value I am redirecting to another view. Again when I am trying to delete a row then form is showing undefined. What am I doing wrong?
my jsp-
<div class="form-group" ng-show="editMode!=''">
<label for="editProductJobFileConfig" class="col-md-2 control-label">Job File Configuration</label>
<div ng-class="{'col-sm-9':editMode!=''}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>Job File Type</th>
<th>Job File Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in editProductJobFileConfig track by $index" novalidate ng-form="jobfileForm">
<td>
<select class="form-control" ng-model="object.key" required ng-change="reValidateJobFileKey(editProductJobFileConfig)" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="some1">some1</option>
<option value="some2">some2</option>
<option value="some3">some1</option>
<option value="some4">some4</option>
<option value="some5">some5</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/>
</td>
<td>
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="deleteFieldMappingDefaults(editProductJobFileConfig,$index)>
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="editProductJobFileConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
my controller-
$scope.deleteFieldMappingDefaults = function(editProductJobFileConfig, index) {
angular.forEach(editProductJobFileConfig, function(fieldMapO) {
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
});
for (var i=editProductJobFileConfig.length-1; i>index; i--) {
editProductJobFileConfig[i].form.jobFileKey = editProductJobFileConfig[i-1].form.jobFileKey;
}
editProductJobFileConfig.splice(index,1);
};
1st time when I delete editProductJobFileConfig holds form and set validity. But once I save my value view is changing, again when I select the same product and try to delete a row it shows form is undefined.