I want the table to be visible only after the submit button clicks. But it's not staying on the screen as it is supposed to be. Once I click the submit button, the table comes up for a second and then again becomes invisible. Please let me know what I am doing wrong in my code. Also please let me know if there is any other way to do it.
index.html
<form action="#" id="form" method="post">
<div style="margin-left: 2rem;">
<!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
<input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
</div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
<table style="display: none;" id="table">
<tbody>
<tr>
<th scope="row">Profile No. : </th>
<td>{{ProfileNo}}</td>
</tr>
<tr>
<th scope="row">Name : </th>
<td>{{Name}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function hide() {
document.getElementById("form").submit();
let table = document.getElementById("table");
if (table.style.display === 'none') {
table.style.display = 'table';
}
}
</script>
You need to use AJAX for this to work. If you do it like this, the submit button performs a POST request to the server, and therefore you refresh the page again.
Here's a good solution for you to work with: https://www.pluralsight.com/guides/work-with-ajax-django
You can do this in Django in a following way:
views.py:
`
def contact(request):
if request.method == "POST":
message_name = request.POST['message-name']
# message-name has to be in your form
# do something with the data in your view
return render(request, 'template.html', {'message_name': message_name})
#return a variable message_name to the context
template.html:
{% if message_name %}
<center><h2><table id="your table"><tr><td></td></tr></h2></center>
{% else %}
<form action="#" method="post">{% csrf_token %}
<div class="row">
<div>
<input type="text" name="message-name">
</div>
<button type="submit">Display table</button>
</form>
{% endif %}
`
You can use input type hidden if you do not want to display any field in the form. The idea is capture the variable from the POST (message-name) and rely on it in the view (message_name)
You may also use localstorage and toggle your display value . Javascript on client side cannot receive post datas , you may store a value on localstorage while submiting the form, once the page is relaoded, check that value stored, modify your display, then reset the value (like you did not submit anything yet again)
example (not sure it works on SO snippet, copy and try it in real)
window.onload = function () {
let mydisplay = localStorage.getItem("myTable");
console.log(mydisplay);
if (mydisplay == "table-cell") {
document.querySelector("#table").style.display = mydisplay;
localStorage.setItem("myTable", "none");
} else {
document.querySelector("#table").style.display = "none";
}
};
function hide() {
document.getElementById("form").submit();
console.log("submit");
localStorage.setItem("myTable", "table-cell");
}
<form action="#" id="form" method="post">
<div style="margin-left: 2rem;">
<!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
<input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
</div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
<table id="table">
<tbody>
<tr>
<th scope="row">Profile No. : </th>
<td>{{ProfileNo}}</td>
</tr>
<tr>
<th scope="row">Name : </th>
<td>{{Name}}</td>
</tr>
</tbody>
</table>
</div>
here is a jsfidlle where you can copy/paste the code for a standalone HTML page for testing. https://jsfiddle.net/zb901rLm/
Related
I am using handlebars as my templating engine and I use buttons to call app.post() on my javascript file.
<form method="POST" action="/smo_assessment">
<div class="container" id="div1">
<h3 id="header" align="center">Request Inventory</h3>
<h4 style="color: white">Select the ID of the request you want to make an assesssment</h4>
<table>
<td>
<select class="form-control" style="width: 80px" name="requestID">
{{#each requests}}
<option>{{this.id}}</option>
{{/each}}
</select>
</td>
<td>
<button buttontype="submit" class="btn btn-default" id=btn1>Make Assessment</button>
</td>
</table>
</form>
However, since I am using bootstrap navbar, I need to use a <a> tag instead of a button in order to navigate to a different page.
app.post('/smo_assessment', urlencodedParser, function(req, res){
connection.query('SELECT * FROM requests WHERE id=?', req.body.requestID, function(err, rows, fields){
if(err)
throw err;
else
selectedRequest = rows
res.render('smo_assessment', {assessmentType, data: selectedRequest[0]});
});
});
Try the form.submit() Javascript method:
<form id="theForm" method="POST" action="/smo_assessment">
<div class="container" id="div1">
<h3 id="header" align="center">Request Inventory</h3>
<h4 style="color: white">Select the ID of the request you want to make an assesssment</h4>
<table>
<td>
<select class="form-control" style="width: 80px" name="requestID">
{{#each requests}}
<option>{{this.id}}</option>
{{/each}}
</select>
</td>
<td>
Make Assessment
</td>
</table>
</form>
Add an id to your form and use it into a on-click event:
<form id="myForm">
...
<a class="btn btn-default" onclick="myForm.submit();">Make Assessment</a>
</form>
I use angularJS and I have one table on my page, I made one button to add row with input fields. My solution work good for adding rows and value of input fields in form, but doesn't work well where I need to delete particular row. I use one function for form, and another for adding and deleting rows.
It's like this:
<div ng-init="tmplCtr.newPeople()">
<div class="col-lg-12">
<input name="postsubmit" class="btn btn-default btn-sm" type="submit" value="Save table" ng-click="tmplCtr.newTable(tmplCtr.table)" />
<button class="btn btn-default btn-sm" ng-click="tmplCtr.editRow()">Add row</button>
</div>
<form name="peopleForm" novalidate>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="place-name">Name</th>
<th class="place-value">Lastname</th>
<th class="place-options">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="people in tmplCtr.peoples">
<td class="place-name"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].name"></td>
<td class="place-last"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].lastname"></td>
<td class="place-options"><button class="btn btn-danger btn-md btn-delete" ng-click="tmplCtr.editRow($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</form>
When I press button add row I get row, but when I press delete row I delete row from screen but last row in array, not by index. Beside that also value of that row is not deleted from form scope. Function is:
function editRow(item) {
if(item == undefined) {
vm.peoples.push({});
} else {
vm.peoples.splice(item,1);
}
}
Can anyone help me?
I think its better to make two functions, the first one is for adding items, and the second one is for deleting like below:
function addEmptyItem(){
vm.peoples.push({});
}
function deleteItem(index){
vm.peoples.splice(index, 1);
}
Then in your view you can change tmplCtr.editRow($index) --> tmplCtr.deleteItem($index)
Furthermore it is strongly advised to use this syntax person.name etc in your repeat directive.
EDIT:
This is not tested by the way...
I am facing an issue with my Angular code, while populating the dropdown inside a HTML table (Code given below).
Could you please help me with what should be done inside modify() to populate the dropdown ?
HTML Code:
<table class="table" ng-app="empApp" ng-controller="employeeController">
<thead>
<tr class="info">
<th>Emp Name</th>
<th>Status</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>
<div ng-hide="editingData[emp.id]">{{ emp.name }}</div>
<div ng-show="editingData[emp.id]"><input type="text" ng-model="emp.name" /></div>
</div>
</td>
<td>
<div ng-hide="editingData[emp.id]">{{ emp.status.name }}</div>
<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status"
ng-options="status.id as status.name for status in statuses"></select>
</td>
<td colspan="2">
<div class="btn-group">
<button type="submit" class="btn btn-primary" ng-hide="editingData[employee.id]" ng-click="modify(emp)">Modify</button>
<button type="submit" class="btn btn-primary" ng-show="editingData[employee.id]" ng-click="update(emp)">Update</button>
</div>
</td>
</tr>
</tbody>
</table>
Javascript Code:
var empApp = angular.module("empApp", []);
empApp.controller('employeeController', function($scope, $http) {
$scope.statuses = [{"id":1,"name":"Active"}, {"id":1,"name":"Inactive"}];
$scope.employees = [{"id":1,"name":"Mark","status":{"id":1,"name":"Active"}},{"id":2,"name":"Sara","status":{"id":2,"name":"Inactive"}}];
$scope.editingData = {};
for (var i = 0, length = $scope.employees.length; i < length; i++) {
$scope.editingData[$scope.employees[i].id] = false;
}
$scope.modify = function(employee){
$scope.editingData[employee.id] = true;
//Set Employee Status correctly here to populate the dropdown
};
});
My problem is I am NOT able to populate the dropdown with the existing value, as show in the diagram below:
I made this plunker, check if it's what you need.
1: Both status are with id 1. Change them
From:
$scope.statuses = [{"id":1,"name":"Active"}, {"id":1,"name":"Inactive"}];
To:
$scope.statuses = [{"id":1,"name":"Active"}, {"id":2,"name":"Inactive"}];
2:Change your select ng-model to emp.status.id.
From:
<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status"
ng-options="status.id as status.name for status in statuses"></select>
To:
<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status.id"
ng-options="status.id as status.name for status in statuses"></select>
3: Change your buttons ng-hide/ng-show
From:
<div class="btn-group">
<button type="submit" class="btn btn-primary" ng-hide="editingData[employee.id]" ng-click="modify(emp)">Modify</button>
<button type="submit" class="btn btn-primary" ng-show="editingData[employee.id]" ng-click="update(emp)">Update</button>
</div>
To:
<div class="btn-group">
<button type="submit" class="btn btn-primary" ng-hide="editingData[emp.id]" ng-click="modify(emp)">Modify</button>
<button type="submit" class="btn btn-primary" ng-show="editingData[emp.id]" ng-click="update(emp)">Update</button>
</div>
Update:
As #Rajesh said below you can store the status_id instead of entire status object. Check his fiddle.
Just replace your select tag part with this code
<select ng-show="editingData[emp.id]" class="form-control" ng-model="emp.status"
ng-options="status as status.name for status in statuses track by status.id"></select>
This is because in ng-model you are passing the full object and you need the full object to be tracked by ID in order to fill the dropdown and relevant dropdown value to be selected
Also in your buttons:
<div class="btn-group">
<button type="submit" class="btn btn-primary" ng-hide="editingData[emp.id]" ng-click="modify(emp)">Modify</button>
<button type="submit" class="btn btn-primary" ng-show="editingData[emp.id]" ng-click="update(emp)">Update</button>
</div>
Because you are referencing it by 'emp' and not 'employee' inside ng-repeat as it will be dynamic
You are looping through
<tr ng-repeat="emp in employees">
But in the select list, you are toggling based on:
editingData[employee.id]
Try changing that to
editingData[emp.id]
use emp.id in your button and also in your modify function and loop
use $scope.employees[i].isVisible = false and ng-hide = $scope.employees.isVisible ng-show = $scope.employees.isVisible
I am a newbie to jquery. I have a page where I have two buttons. One of them is edit button, and the other one is delete button. When I click edit button it removes these two button and at the same place( the place where delete and edit button were before) I add three elements one of them is "save" button. This save button has a class - "save-btn". I select this button by jquery class selector. And onclick it should do something. But when I click nothing happens. Can anyone suggest whats wrong and give a solution. Thanks in advance.
<div class="container-fluid">
<div class="row">
<div class="col-md-2 "></div>
<div class="col-md-4 ">
<div class="form-tile">
<form action="" method="post">{% csrf_token %}
{% crispy form %}
</form>
</div>
</div>
<div class="col-md-4 tile">
<div class="row">
<div class="col-md-12">
<h2 style="margin-top: 0px;padding-top: 0px;text-align: center">Today's Purchase</h2>
</div>
</div>
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><button class="btn btn-primary edit-btn"><i class="fa fa-pencil-square-o"></i></button>
<button class="btn btn-danger delete-btn"><i class="fa fa-trash"></i></button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="col-md-2 "></div>
</div>
And here is my javascript
<script>
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
});
$(".save-btn").click(function(){
alert("asnlas");
});
});
</script>
when you create an element you must assign the event at the same time
Try this....
$(function(){
$(".edit-btn").click(function(){
var custom_form = '<td><input type="text" size="10"></td><td><input type="text" size="10"></td> <td><button class="btn btn-primary save-btn">Save</i></button> </td>'
var parent = $(this).parent().parent().html(custom_form);
$(".save-btn").click(function(){
alert("asnlas");
});
});
});
I have a form
<form name="formName">
<table>
<tr>
<td><input type="text" ng-model="validate" required/></td>
</tr>
</table>
</form>
<button type="button" class="btn btn-default" ng-click="validate()">save</button>
as you can see, the button is outside the form.. I want to validate the form when I click the button into $scope.validate();
the question is, how can I achieve that using angularjs ?
It does not matter if button is in or outside the form, the validation is performed always when any of the proprties of the model changes. So the only problem that remains is when to display error message.
btw required is from HTML5 ng-required is the attribute you should use.
The code below displays error message when any of the properties changes
<div ng-app="mod">
<div ng-controller='MCtrl'>
<form name="formName" novalidate>
<table>
<tr>
<td>
<input type="text" name="prop" ng-model="model.property" ng-required="true" />
<span ng-show="formName.prop.$error.required">Required</span>
</td>
</tr>
</table>
</form>
<button type="button" class="btn btn-default" ng-click="validate(formName)">save</button>
</div>
mod.controller('MCtrl', function ($scope) {
$scope.model = { property : ''};
$scope.validate = function(form){
alert(form.$valid);
}
});
If youd like to display the errors only when the form is submitted you add one variable to track it like it the code below (note additional variable in ng-show="formName.prop.$error.required && submitted"
<div ng-app="mod">
<div ng-controller='MCtrl'>
<form name="formName" novalidate>
<table>
<tr>
<td>
<input type="text" name="prop" ng-model="model.property" ng-required="true" />
<span ng-show="formName.prop.$error.required && submitted">Required</span>
</td>
</tr>
</table>
</form>
<button type="button" class="btn btn-default" ng-click="validate(formName)">save</button>
</div>
mod.controller('MCtrl', function ($scope) {
$scope.model = { property : ''};
$scope.submitted = false;
$scope.validate = function(form){
$scope.submitted = true;
alert(form.$valid);
}
});