I'm creating a simple form to add a new object to an array; however, when I hot submit I want my form to reset and close automatically. If I close the form and reopen it, the values are still there. Can someone please tell me what I'm doing wrong? Thanks.
HTML CODE
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8">
<h1 class="page-header">Inventario</h1>
</div>
</div>
<div class="row">
<div ng-controller="InventoryCtrl">
<div class="container">
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newItemModal">Add New Product</button>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-9"><br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-8">
<div class="dataTables_length" id="dataTables-example_length">
<label>Show
<select ng-model="rowLimit" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select> entries
</label>
</div>
</div>
<div class="col-sm-4">
<div id="dataTables-example_filter" class="dataTables_filter">
<label>Search:
<input ng-model="search" type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
<thead>
<tr role="row">
<th style="width: 50px;" ng-click="sortData('index')">Item Number</th>
<th style="width: 50px;" ng-click="sortData('code')">Code</th>
<th style="width: 250px;" ng-click="sortData('description')">Description</th>
<th style="width: 50px;" ng-click="sortData('in')">In</th>
<th style="width: 50px;" ng-click="sortData('out')">Out</th>
<th style="width: 50px;" ng-click="sortData('total')">Total</th>
</tr>
</thead>
<tbody>
<tr class="gradeA odd" role="row" ng-repeat="product in items | limitTo: rowLimit | filter: search">
<td class="text-center">
<i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="edit(product)"
data-toggle="modal" data-target="#editItemModal"></i>
<i class="fa fa-trash-o" aria-hidden="true" ng-click="delete(product)"></i>{{1+$index}}</td>
<td class="text-center">{{product.code}}</td>
<td class="text-left">{{product.description}}</td>
<td class="text-center">{{product.in}}</td>
<td class="text-center">{{product.out}}</td>
<td class="text-center">{{product.total}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{1+$index}}</h4>
</div>
<div class="modal-body">
<form name="myForm" novalidate>
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="inventoryCtrl.item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="inventoryCtrl.item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>
<div class="form-group">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="type" value="out">Out</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Product</h4>
</div>
<div class="modal-body">
<form name="myForm" ng-submit="addProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<!-- <div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>-->
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- jQuery -->
<script src="../vendor/angular/angular.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../vendor/raphael/raphael.min.js"></script>
<script src="../vendor/morrisjs/morris.min.js"></script>
<script src="../data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- My AngularJS App -->
<script src="../js/app.js"></script>
</body>
</html>
ANGULAR CODE
(function(){
var app = angular.module("inventory", []);
app.controller("InventoryCtrl", function($scope){
$scope.product = {};
$scope.addProduct = function(product){
$scope.product.createdOn = Date.now();
$scope.product.code = product.code;
$scope.product.description = product.description;
$scope.product.total = product.amount;
$scope.items.push($scope.product);
$scope.product = {};
};
$scope.items = [
{
code:"FD1",
description: "Happy valentines",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
},
{
code:"FD2",
description: "Happy Mothers Day",
in: 70,
out: 20,
total: 50,
createdOn: 1397490980837
},
{
code:"FD3",
description: "I Love You",
in: 100,
out: 30,
total: 70,
createdOn: 1397490980837
},
{
code:"FD4",
description: "Get Well",
in: 20,
out: 5,
total: 15,
createdOn: 1397490980837
},
{
code:"FD5",
description: "Happy Birthday",
in: 200,
out: 35,
total: 165,
createdOn: 1397490980837
},
{
code:"FD6",
description: "It's a Boy",
in: 50,
out: 10,
total: 40,
createdOn: 1397490980837
},
{
code:"FD7",
description: "It's a Girl",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
}
];
});
})();
You are basically just clearing your $scope.product not the item model which is in your form
$scope.addProduct = function(product){
$scope.product.createdOn = Date.now();
$scope.product.code = product.code;
$scope.product.description = product.description;
$scope.product.total = product.amount;
$scope.items.push($scope.product);
$scope.product = {};
$scope.item = {
code: '',
description: '',
amount:''
};
};
Or you can assign an id to your form like (e.g addFormId) then add it at the bottom of your addProduct function
document.getElementById("addFormId").reset();
this is because you are binding the data to a variable ,you can explicitly clear form element when the page is reloaded like this
document.getElementById('elementid').value = "";
I'm having a modal on the receipt of every tenant on a table. The modal has a keyup function to calculate for its bill. and the equation is doing just fine and the fetching of the values to be calculated is also fine, the problem is every time i calculate for the previous electricity consumption it only fetches one value on the database. I have added the code on how i fetch from the database.
here is the Modal:
<div class="modal fade" id="receipt<?php echo $value['tenant_id'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
</div>
<div class="modal-body">
<form action="save_receipt.php" method="POST">
<input type = "hidden" class="form-control" name= "id" value = "<?php echo $value['tenant_id'];?>">
<div class="form-group">
<strong>
<div class= "modal-body2"><h3 class="modal-title text-center" id="myModalLabel">
<strong>Republic of the Philippines<br>Province of Negros Occidental
</strong></h3>
<h4 class ="text-center"><em>City of Victorias</em></h4>
<h4 class="text-center">
<strong>OFFICE OF THE MARKET SUPERVISOR
</strong>
</h4>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Name </label>: <?php echo $value['tenant_fname']." ".$value['tenant_mname']." ".$value['tenant_lname'];?>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Location </label>: Stall No. <?php echo $value['stall_number']." (".$value['stall_floor'];?>)
</div>
<div class="form-group">
<label class="col-sm-2 control-label">SUBJECT </label> :
FOR PAYMENT OF ELECTRICAL CONSUMPTION FOR THE PERIOD FROM
<input class = "datepick custom-input1"></input>
,TO
<input class = "datepick custom-input1"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">METER NO. </label>: <input type="text" name="" class = "custom-input"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">ELECTRIC RATE </label>:<input class = "custom-input3" value="<?php echo $value['elec_rate']?> per kWh" id= "rate" readonly ></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">PRESENT </label>: <input class = "custom-input" name="charges"></input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">PREVIOUS </label>: <input class = "custom-input" value ="<?php echo $value['charges']?> kWh" id = "previous" readonly> </input>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">TOTAL CONSUMPTION</label>:
<input type="text" class = "custom-input" type="" id="result1" readonly>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">AMOUNT </label>:
<input type="text" class = "custom-input3" type="" id="result" value="" readonly>
</div><br>
<div class="form-group">
<p class="text-right">APPROVED BY:
<br>
<br>
LUDAISY B. FERNANDEZ <br>
MARKET SUPERVISOR III
</p>
</div>
</div>
</strong>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close-modal" data-dismiss="modal">Close
</button>
<!-- <button type="submit" name="add" class="btn btn-primary">Save</button> -->
<button onclick="myFunction()" class="btn btn-primary">Print Receipt</button>
</div>
</form>
</div>
</div>
here is the script:
<script>
$('input[name="charges"]').on('change paste keyup', function(){
var a = $(this).val();
console.log(a);
var b = $('input#rate').val().replace('per kWh', '');
var c = $('input#previous').val().replace('kWh', '');
var subtotal = parseFloat(a - c);
var total = parseFloat(subtotal * b);
console.log(total);
$('input#result1').val(subtotal);
$('input#result').val(total);
});
$('.close-modal, .modal-fade').click(function(){
$('input#result1').val('');
$('input#result').val('');
$('input#charges').val('');
});
i have attached a example image of the receipt.
every time i input the current electricity consumption
it will automatically subrtract to the previous electricity consumption for the total consumption
and the total consumption will be multiplied to the rate for the amount to be paid.
as you can see the total consumption is giving a wrong answer because it is only fetching 1 value on the database.
here is how i fetch from the database:
<div class="panel-body">
<div class="dataTable_wrapper">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Tenant</th>
<th>Stall Code</th>
<th>Previous Readings</th>
<th>Receipt</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM tenant
LEFT JOIN stall ON stall.stall_id = tenant.stall_id
LEFT JOIN rent ON rent.tenant_id = tenant.tenant_id
LEFT JOIN receipt ON receipt.tenant_id = tenant.tenant_id
LEFT JOIN rate ON rate.rate_id = tenant.rate_id
WHERE rent.rent_status = ? AND rate.rate_id = ?
";
$query = $conn->prepare($sql);
$query->execute(array(1,1));
$fetch = $query->fetchAll();
foreach ($fetch as $key => $value) { ?>
<tr>
<td><?=$value['tenant_fname']." ".$value['tenant_mname']." ".$value['tenant_lname'];?></td>
<td><?=$value['stall_number'];?></td>
<td><?=$value['charges'];?></td>
<td class = "center" style = "text-align:center;">
<a href = "#receipt<?php echo $value['tenant_id'];?>" data-toggle="modal" class="btn btn-outline btn-xs btn-primary"> Make Receipt
</a>
</td>
</tr>
<?php include 'receipt_modal.php';?>
<?php }?>
</tbody>
</table>
</div>
Looking for a way to make a dynamic list using checkbox "another item" with ability to remove if requested, like on this image:
It should support both adding and removing the items.
Edit:
My code is like:
<div id="contactdetails">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
</div>
<p class="note">Example: Mike</p>
</div><!--row and col-->
<div class="col-lg-6 col-md-12">
<div class="form-group">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
<input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
</div>
<p class="note">Example: Johnson</p>
</div>
</div>
</div> <!--row and col-->
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="checkbox" style="padding-left:10px; margin-top: 0px;">
<span>
<label>
<input name="addmore" id="addmore" type="checkbox" class="checkbox style-2">
<span> More contacts</span>
</label>
</span>
</div>
</div>
</div> <!--row and col-->
</div><!--contact details-->
You can append items to a container and remove each item if the checkbox is checked.
$("body").on("click","input[type='checkbox']",function()
{
if(!$(this).is(":checked"))
{
$(this).parent().remove();
}
else
{
$("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>
</div>
Try this. As i mentioned before, you can make use of $.clone() to achieve this.
<div>
<table>
<tr>
<td>
Item1
</td>
<td>
Item2
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
</table>
</div>
<script>
$(document).on("click",":checkbox",function()
{
if($(this).is(":checked"))
{
var clonedItem = $(this).closest('table').clone();
$(clonedItem).find(":checkbox").removeAttr("checked");
$(clonedItem).appendTo("div");
}
else
{
if($(document).find(":checkbox").length > 0)
$(this).closest('table').remove();
}
});
</script>
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/1/
I have a table with countries data. For each row there is an edit button, when clicked, the row disappears and a form wrapped in a div is to appear with a slide down effect. I am trying to apply slideDown() in this div. However, it is not working.
Here's an adapted fiddle.
My script:
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div').slideDown('400');
});
});
data['html'] contains the rendered form, .glyphicon-pencil is the edit button in each row.
HTML sample before pressing the edit button:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>asdfasdfsdfsf</td>
<td></td>
<td></td>
<td></td>
<td>0</td>
<td></td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-pencil btn btn-xs btn-success"></span>
<input name="edit-id" value="1" type="hidden">
</form>
</td>
<td>
<form method="POST" action="http://localhost:8000/country/all" accept-charset="UTF-8" class="pull-right"><input name="_token" value="uc1Sozi7LBtDGAxjCVQz1lDjv0bh963U1erlqMAv" type="hidden">
<span class="glyphicon glyphicon-remove btn btn-xs btn-danger"></span>
<input name="id" value="1" type="hidden">
</form>
</td>
</tr>
</tbody>
</table>
HTML sample after the edit button is pressed:
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td colspan="0">
<div style="" class="row">
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="name" class="control-label">Nombre</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="asdfasdfsdfsf" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="continent" class="control-label">Continente</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="capital" class="control-label">Capital</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="language" class="control-label">Lengua</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="population" class="control-label">Habitantes</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="currency" class="control-label">Moneda</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<span class="glyphicon glyphicon-floppy-disk btn btn-success"></span>
<span class="glyphicon glyphicon-ban-circle btn btn-primary"></span>
<input name="update-id" value="1" type="hidden">
</div>
</div>
</td></tr>
</tbody>
</table>
slideDown() is used to display a selected element and will not apply effect on elements that are already displayed. You need to hide those desired elements before using slideDown():
$(document).on('click', '.glyphicon-pencil', function(event) {
var row = $(this).closest('tr');
var id = row.find("input[name='edit-id']").val();
$.get('/country/' + id + '/edit', function(data) {
row.html(data['html']).find('div.row').hide().slideDown('400');
});
});
http://jsfiddle.net/WD8X3/1/
I need to collect the data from the display div on click of edit button and pass it to the form div and populate corresponding inputs using jquery.
HTML Form Div
<form class="form-horizontal" name="editform" id="editform" action="include/abc.php" method="post">
<fieldset>
<div class="form-group">
<label for="username" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="username" placeholder="User Name" type="text" id="username" value="" >
</div>
<label for="email" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="email" placeholder="Email" type="text" id="uemail" value="" >
</div>
</div>
<div class="form-group">
<button type="submit" id="editdata" class="btn btn-success">Edit and Update </button>
</div>
</fieldset>
</form>
Display Div
<div class="well">
<div id="formdisplay">
<table>
<tr>
<td> User Name:</td><td id="u_name"> Paul </td>
</tr>
<tr>
<td> Email :</td><td id="u_email"> paul#abc.com</td>
</tr>
</table>
</div>
<button type="button" id="edit" class="btn btn-info">Edit</button>
<button type="button" id="delete" class="btn btn-danger">Edit</button>
</div>
Jquery
<script type="text/javascript">
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_email").text());
});
});
</script>
You are missing # in the id selector.
Try,
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_name").text());
});
});