How to extract value from an html table with asp.net? - html

I have a table like this:
<tbody>
#foreach (Class cs in Model.MyClass)
{
statut = (cs.statut == "yes") ? "enable": "disable";
<tr class="#(cs.statut == "yes" ? "success" : "danger") ">
<td rowspan="2" >#cs.title</td>
<td>#cs.att[0]</td>
<td>#cs.att2[0]</td>
<td rowspan="2">#cs.att3</td>
<td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">#(cs.statut == "yes" ? "Désactiver" : "Activer") </button></td>
<td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#modify">Modifier </button></td>
</tr>
<tr class="#(cs.statut == "yes" ? "success" : "danger") ">
<td>#cs.att[1]</td>
<td>#cs.att2[1]</td>
</tr>
<div class="modal fade bs-example-modal-md" id="modifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modify #cd.title</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="">
<label for="groupe" class="col-sm-3 control-label">Groupe</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="groupe" value="#cs.title">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
}
</tbody>
I want to do some modification, but I don't know how can I get the actual value of the row?
When I tested modify button, I get the same value for all those bottons and it's for the first row.
Thanks in advance,

Related

Using POST values submitted via different elements under the same page

Title could be misleading. I do have a button with onclick event that calls a function to dump some values into POST variable. It also toggles a modal which have a form that POSTs to current document. A brewer example looks like this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$_POST = [];
function send_id(var1, var2) {
$_POST['mainpart'] = var1;
$_POST['subpart'] = var2;
console.log($_POST);
};
function evaluate_form() {
alert($_POST['numsales']);
};
function post_test() {
console.log($_POST);
};
})
</script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Performance Calculation Form</h2>
<div class="tables">
<div id="1">
<form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="col-md-10" colspan="2">1. Sales</th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">a) Sales to a </td>
<td class="col-md-2">
<p class="text-center">20</p>
</td>
<!-- <td class="col-md-2"><input name = "SCI_adedi" type="number" class="form-control" id="usr"></td> -->
<td style="text-align: center">
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1" style="position: center;" onclick="send_id('1','a')">Add</button>
</div>
</td>
</tr>
<tr>
<td class="col-md-10" colspan="2">Subtotal </td>
<td class="col-md-2"><input type="text" class="form-control" id="usr"></td>
</tr>
</tbody>
</table>
<button type="submit" id="submit" name="submit" value="KAYDET"> Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
modal part:
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]); ?>" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
There is an 'Add' button that onclick event fires up send_id(val1,val2) function. I'm trying to dump table name and row with this send_id() function via POST method onto same page (Don't know if I implemented it correctly). This Add button also pops-up the modal. Modal have a form in it and its save button submits form with post into same page (Again not sure if I did it right way). And now I need to take all these variables and manipulate them to execute a SQL query. So I also defined an onclick event to modal save button to read all variables inside POST and write down a query via evaluate_form. Too see if I can access POST array I've used alert($_POST); but it bring nothing.
This may be a bad implementation but what I want to accomplish is;
Save info about which add buttton is clicked. A variable is needed so I can use it when executing SQL statements(Writing into correct table).
A model should pop after clicking add button.
Modal should include a form and it should be submitted via POST into same page.
After modal submission, all of these variables (variable of save info and modal form variables) could be acceessed via a function so SQL statements could be arranged.
Thanks.

Issue with creating new html/css elements inside jinja loops (Django)

I am trying to create new html/css elements inside a jinja loop while within a form , where i am filling data that I brought from a django view. All the normal browser side stuff like pop-up on button clicks is good. But only the last button successfully makes a GET request whereas every button must do. This is my form here :
<form method="GET" action="{% url 'search_results' %}">
{% csrf_token %}
{% for name,quali,field,address,pro,c in data %}
<div class="ser_tile">
<img src={{pro}} id="user_dr" >
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#{{c}}">Visit Page</button>
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#b{{c}}">Book Appointment</button><br/><br/>
<span >
Name: {{name}}
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span><br/>
Degree: {{quali}}<br/>
Specialist: {{field}}<br/>
Hospital: Pradyumna Bal Memorial Hospital<br/>
Address: {{address}}
</span>
</div><br>
<div class="modal fade" id="{{c}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Specialist:</b></td>
<td>
{{field}}
</td>
</tr>
<tr>
<td><b> Ratting:</b></td>
<td>
3
</td>
</tr>
<tr>
<td><b>Available On:</b></td>
<td>
Monday(10:30AM : 5:00PM), Thursday(10:30AM : 1:00PM) , Saturday(10:30AM : 1:00PM)
</td>
</tr>
<tr>
<td><b>Minimum Chagre:</b></td>
<td>
Rs:500/-
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer qq{{c}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn_tile" data-toggle="modal" data-target="#b{{c}}" data-dismiss="modal">Book Appointment</button>
</div>
</div>
</div>
</div>
<script>
$(".btn_tile").click(function(event){
event.preventDefault();
});
</script>
<div class="modal fade" id="b{{c}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Date:</b></td>
<td>
<input name="date" class="td_in" type="date">
</td>
</tr>
<tr>
<td ><b> Time:</b></td>
<td>
<input name="time" class="td_in" type="time">
</td>
<td>
<b>Avilable times: </b>
</td>
<td>
1:00PM, 3:00PM
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</div>
</div>
</div>
</div>
<hr/>
{% endfor %}
</form>
This particular button (Confirm Booking) has to generate a GET request but it fails to. The array request.GET() returns None.
here is a screenshot of the popup
You could try inserting the button into a form as below....
<form method="get" action="<YOUR DESIRED ACTION>">
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>
hope it helps...

How to get the index value in ngfor while using modal popup?

While clicking remove button, I opened the small popup for confirmation to delete the file.In popup I have a delete button, while user clicks the delete button, I passing the document id and index value.
Problem is, while clicking 3rd or any index, it takes the index 0 and 0th index document id.
Html:
<ng-template #tmplt>
<tr *ngFor="let kbase of Colum; let i =index">
<td *ngIf="kbase.DocumentDetails!=null">{{kbase.DocumentDetails.DocName}}</td>
<td *ngIf="kbase.DocumentDetails==null"></td>
<td>{{kbase.ModifiedBy}}</td>
<td>{{kbase.ModifiedDate}}</td>
<td>
<div class="form-group col-md-8">
<select name="select" class="form-control" (change)="status()" [(ngModel)]="kbase.IsStatus">
<option value="true">Active</option>
<option value="false">In Active</option>
</select>
</div>
</td>
<td>
<app-file-upload [documentModel]="kbase.DocumentDetails" [isDeleteRequired]="true" [isMultipleFile]="true" [model]="kbase" (emitterFile)="fileSelect($event,i)"></app-file-upload>
</td>
<td>
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#exampleModalCenter">Remove</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are You Sure,You Want To Delete This Row?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="Delete(i,kbase.DocumentDetails.Id)">Delete</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</ng-template>
TS File:
My Method:
Delete(index: number, id: number) {
this.savestatus = false;
if (index != -1) {
this.Colum.splice(index, 1);
if (id != 0) {
this._knowledgebaseService.Delete(id).subscribe(x => {
if (x.Success)
this.deletemessage = true;
this.result = x;
});
}
}
}

Passing parameter to bootstrap modal button

I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>

How to make two bootstrap modal forms submit independently?

I have two bootstrap modal forms on the same html document.
I want to get these forms to work independently, however, form 1 does not
submit and form2 submits the data entered in both forms.
How do I get these forms to work independently without interfering with the actions
of one another?
Here is the HTML:
<!------------------------form1----------------------------------->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="orderLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="registerLabel"><span class="glyphicon glyphicon-info-sign"></span> Register</h4>
</div>
<form id="form1" action="register.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" name="name" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------form2----------------------------------->
<div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="buyLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="buyLabel"><span class="glyphicon glyphicon-info-sign"></span> Buy</h4>
</div>
<form id="form2" action="buy.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" item="item" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I can't see the forms ending somewhere.
Please close form before starting another so that it will be independent.