I am developing a webpage where a user can add or delete rows to an HTML table.
The process is:
They will fill up the input widget on the webpage.
After filling up the description, unit, quantity, unit price, and pressing the add button; the data will be shown in the table. They will be able to add as many items as they want, and they will also be able to delete items whenever they want. Everything works fine up until here.
Once the user is done filling up the necessary forms, as well as adding the items they need, they will press the 'Save' button.
After pressing the 'Save button', I will fetch the values in the input field and the rows in the HTML table using POST method.
I will save the data in the database.
The dilemma is I can't fetch the rows in the table.
I researched some ways to fetch data from HTML tables using PHP, and I found out about file_get_contents function. It works perfectly fine with pre-defined tables, but not in dynamic tables.
I noticed that file_get_contents function fetches the HTML contents in the webpage, which is empty because the table will be filled when the user is using it, not when the page is created.
Now I feel like I hit the wall, and I do not have an idea for alternatives to achieve what I want.
I hope you can give me some advice. Thank you.
My webpage code:
<?php
session_start();
if (!isset($_SESSION['loggedIn']) ) {
header('Location: index.php');
}
if (isset($_POST['jo_save'])) {
$pageContents = file_get_contents('job_order_form.php');
$dom = new DOMDocument();
$tableData = $dom->getElementsByTagName('td');
$ctr1 = 0;
$ctr2 = 0;
foreach ($tableData as $node) {
$contents[$j][] = trim($node->textCotent);
$i++;
$j = $j % 5 == 0? $j++ : $j;
}
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<?php require('navbar.php');?>
<div class="container">
<h3 class="display-4">Job Order</h3>
<form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_information">
<div class="form-row">
<div class="form-group col-md-8">
<label for="jo_clientName">Client Name </label>
<input class="form-control" id="jo_clientName" name="jo_clientName" />
</div>
<div class="form-group col-md-4">
<label for="jo_date">Date(mm/dd/yyyy) </label>
<input class="form-control" id="jo_date" name="jo_date" value="<?php echo date('m/d/Y');?>" readonly/>
</div>
<div class="form-group col-md-8">
<label for="jo_representative">Representative</label>
<input class="form-control" id="jo_representative" name="jo_representative" />
</div>
<div class="form-group col-md-4">
<label for="jo_tin">TIN#</label>
<input class="form-control" id="jo_tin" name="jo_tin" />
</div>
<div class="form-group col-md-12">
<label for="jo_address">Address</label>
<input class="form-control" id="jo_address" name="jo_address" />
</div>
<div class="form-group col-md-12">
<label for="jo_location">Project Location</label>
<input class="form-control" id="jo_location" name="jo_location" />
</div>
</div>
<hr />
<div class="form-row">
<div class="form-group col-sm-12 col-md-4">
<label for="jo_creator">Created By:</label>
<input class="form-control" id="jo_creator" name="jo_creator" value="<?php echo $_SESSION['employee_fName']." ".$_SESSION['employee_mName']." ".$_SESSION['employee_lName']?>" readonly />
</div>
<div class="form-group col-sm-12 col-md-4">
<label for="jo_mobilization">Mobilization</label>
<input class="form-control" id="jo_mobilization" name="jo_mobilization" />
</div>
<div class="form-group col-sm-12 col-md-4">
<label for="jo_totalPayment">Total Payment</label>
<input type="number" class="form-control" id="jo_totalPayment" name="jo_totalPayment" readonly/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<button type="submit" class="form-control btn btn-primary" id="jo_save" name="jo_save">Save</button>
</div>
<div class="form-group col-md-3">
Cancel
</div>
</div>
</form>
<form action="<?php echo $path_parts['basename'];?>" method="POST" id="jo_items">
<div class="form-row">
<div class="form-group col-md-5">
<label for="jo_description">Description</label>
<input class="form-control" id="jo_description" name="jo_description" />
</div>
<div class="form-group col-md-2 col-sm-6">
<label for="jo_unit">Unit</label>
<input class="form-control" id="jo_unit" name="jo_unit" />
</div>
<div class="form-group col-md-2 col-sm-6">
<label for="jo_quantity">Qty.</label>
<input type="number" class="form-control" id="jo_quantity" name="jo_quantity"/>
</div>
<div class="form-group col-md-2">
<label for="jo_unitPrice">Unit Price</label>
<input type="number" class="form-control" id="jo_unitPrice" name="jo_unitPrice" />
</div>
<div class="form-group col-md-1">
<label for="jo_add"> </label>
<button type="button" class="form-control btn btn-primary" id="jo_add" name="jo_add">Add</button>
</div>
</div>
<table class="table table-striped table-sm" id="jo_item_table">
<thead class="thead-dark">
<tr>
<th scope="col">Description</th>
<th scope="col">Unit</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Amount</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#jo_add").on('click', function() {
item_amount = parseFloat($('#jo_quantity').val()*$('#jo_unitPrice').val());
new_row = "<tr> \
<td>"+$('#jo_description').val()+"</td> \
<td>"+$('#jo_unit').val()+"</td> \
<td>"+$('#jo_quantity').val()+"</td> \
<td>"+$('#jo_unitPrice').val()+"</td> \
<td>"+item_amount+"</td> \
<td><button type='button' class='btn btn-outline-danger btn-sm' onClick='deleteRow(this)'>Delete</button></td>";
jo_items_tbl = $('table tbody');
jo_items_tbl.append(new_row);
$('#jo_totalPayment').val(computeTotal);
$('#jo_description').val("");
$('#jo_unit').val("");
$('#jo_quantity').val("");
$('#jo_unitPrice').val("");
});
});
function deleteRow(cell){
var row = $(cell).parents('tr');
var rIndex = row[0].rowIndex;
document.getElementById('jo_item_table').deleteRow(rIndex);
}
function computeTotal(){
var totalAmount = 0.0;
var tbl = document.getElementById('jo_item_table');
for(var row=1, n=tbl.rows.length; row<n; row++){
totalAmount += parseFloat(tbl.rows[row].cells[4].innerHTML);
}
return totalAmount;
}
</script>
</body>
</html>
Some screenshots of the webpage:
enter image description here
enter image description here
Consider using a database (sqlite, mysql), or if you really want to use files, use CSV.
$file_name = "file.csv";
if (($handle = fopen($file_name, "r")) !== FALSE) {
while (($data = fgetcsv($handle, 0, ",")) !== FALSE) {
echo $data[0] . $data[1] . $data[2];
}
fclose($handle);
}
$fp = fopen($file_name, 'a');
// data to write
$infos = ["abc", "123"];
foreach ($infos as $info) {
fputcsv($fp, array($info));
}
fclose($fp)
Edit: "5: I will save the data in the database."
In that case, you can fetch the records from the database, no need to read from files.
Related
I would like someone to answer my question about how I can make the data typed in the Agenda fields be added to the table, with jQuery. Currently the table adds rows and also deletes them, but does not add the data entered in the form fields. Finally, I can't make the "save" button be placed below the table, or above it, static.
HTML - atv1-1:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>João Augusto - Agenda jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="estilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="p-5 text-black text-center bg-roxo">
<h1 id="titulo">João Augusto</h1>
</div>
<div class="container mt-5">
<div class="container">
<h5>Agenda</h5>
<form id="formulario">
<div class="row py-2">
<div class="col-1">
<label for="nome">Nome:</label>
</div>
<div class="col-5 ">
<input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="email">Email:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="email" name="email">
</div>
<div class="col-1">
<label for="cel">Celular:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="insta">Instagram:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Instagram" name="insta">
</div>
<div class="col-1">
<label for="face">Facebook:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Facebook" name="face">
</div>
</div>
</form>
</div>
<!-- Tabela que conterá os dados-->
<div class="container mt-3">
<table class="table table-striped" id="myTable">
<tbody>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Instagram</th>
<th>Celular</th>
<th>Facebook</th>
<th>Excluir</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<button class='btn btn-danger excluir' onclick="AddTableRow()" type="button">Salvar</button>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
</div>
<script src="functions.js"></script>
</body>
</html>
jQuery (JS) - functions.js :
(function($) {
AddTableRow = function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td> </td>';
cols += '<td> </td>';
cols += '<td> </td>';
cols += '<td> </td>';
cols += '<td> </td>';
cols += '<td>';
cols += '<button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>';
cols += '</td>';
newRow.append(cols);
$("#myTable").append(newRow);
return false;
};
})(jQuery);
(function($) {
remove = function(item) {
var tr = $(item).closest('tr');
tr.fadeOut(400, function() {
tr.remove();
});
return false;
}
})(jQuery);
This is my working solution:
View this on codepen.io
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="functions.js"></script>
FORM and Table, HTML: (Just replace this instead your form and your table
)
<form id="formulario">
<div class="row align-items-center py-2">
<div class="col-1">
<label for="nome">Nome:</label>
</div>
<div class="col-5 ">
<input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome" value="JOÃO AUGUSTO">
</div>
<div class="col-1">
<label for="email">Select:</label>
</div>
<div class="col-5">
<select class="form-select" name="select">
<option value="">Not choosed</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
</div>
</div>
<div class="row align-items-center py-2">
<div class="col-1">
<label for="email">Email:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="email" name="email">
</div>
<div class="col-1">
<label for="cel">Celular:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="celular">
</div>
</div>
<div class="row align-items-center py-2">
<div class="col-1">
<label for="insta">Instagram:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Instagram" name="instagram">
</div>
<div class="col-1">
<label for="face">Facebook:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Facebook" name="facebook">
</div>
</div>
</form>
<div class="col-auto p-0 mt-3">
<button class="btn btn-success" onclick="Functions.addToTable('formulario','myTable')" type="button">Salvar</button>
</div>
</div>
<div class="container mt-3">
<table class="table table-striped text-center table-bordered my-3" id="myTable">
<tbody>
<!-- IF EMPTY ROWS :
<tr id="emptyTr"><td><i>empty</i></td></tr>
-->
<!-- IF CONST ROWS : -->
<tr id="tr_1">
<td><i>name</i></td>
<td><i>select</i></td>
<td><i>email</i></td>
<td><i>celular</i></td>
<td><i>instagram</i></td>
<td><i>facebook</i></td>
<td>
<button onclick="Functions.removeFromTable('formulario','myTable',1)" type="button" class="btn btn-sm btn-danger btn-xs">
Excluir
</button>
</td>
</tr>
<!---end Const Rows---->
</tbody>
</table>
functions.js: (just replace all this instead your functions.js)
//develope by: https://stackoverflow.com/users/3114914/
class Functions {
static trNumbers(tableId){
var table = $('#'+tableId);
var issetEmptyTr = table.find('tbody tr#emptyTr').length;
if(issetEmptyTr==1)
return 1;
else
return parseInt(table.find('tbody tr:last').attr('id').replace(/\D/g,''))+1;
}
static formData(formId){
var map = new Map();
var formInputLength = parseInt($('#'+formId+' input').length);
var formSelectLength = parseInt($('#'+formId+' select').length);
var formLength = formInputLength + formSelectLength;
for(let i=0; i < formLength; i++)
{
var inpName = $('#'+formId+' input, #'+formId+' select').eq(i).attr('name')
var inpVal = $('#'+formId+' input, #'+formId+' select').eq(i).val()
var inpMap = map.set(''+inpName+'',''+inpVal+'');
}
return inpMap;
}
constructor(formId,tableId){
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var formData = Functions.formData(formId)
var table = $('#'+tableId);
table.prepend('<thead class="bg-light"><tr></tr></thead>')
var th = '';
var formDataKeys = formData.keys();
for(let i=0; i<formData.size; i++){th+='<th>'+capitalizeFirstLetter(formDataKeys.next().value)+'</th>'}
th += '<th>Excluir</th>';
table.find('thead tr').html(th);
table.find('tbody').find('#emptyTr td').attr('colspan',formData.size+1);
}
static addToTable(formId,tableId){
var formData = Functions.formData(formId);
var table = $('#'+tableId);
var formDataKeys = formData.values();
var td = '';
var number = Functions.trNumbers(tableId);
for(let i=0; i<formData.size; i++){td+='<td>'+formDataKeys.next().value+'</td>'}
td += '<td><button onclick=Functions.removeFromTable("'+formId+'","'+tableId+'",'+number+') type="button" class="btn btn-sm btn-danger btn-xs">Excluir</button></td>';
table.find('tbody').find('#emptyTr').remove()
table.find('tbody').append('<tr id="tr_'+number+'">'+td+'</tr>')
number++;
//SEND and RECEIVE DATA here. for add your row data.
//your MAP => formData. your MAP keys => formData.keys() and values => formData.values()
}
static removeFromTable(formId,tableId,rowId){
var formData = Functions.formData(formId)
var table = $('#'+tableId);
var td = '<td colspan='+formData.size+1+'><i>empty</i></td>';
$('#tr_'+rowId).remove()
var trLength = $('tbody tr').length;
if(trLength==0)
{
table.find('tbody').html('<tr id="emptyTr">'+td+'</tr>')
}
//for DELETE your row data, SEND and RECEIVE DATA here.
}
}
new Functions("formulario","myTable"); // "formulario" is your form id and "myTable" is your table id.
Replace the two above and leave the rest of your code unchanged.
It automatically puts the name of the input/select name="" in the table header.
And puts input/select value="" in own column.
It considers the number of your input/select correctly.
Please Look at the comment in the codes.
Your form id is "formulario" , your table id is "myTable".
and i did'nt change it.
For change this ids:
go to last line of function.js and change:
new Functions("your_new_form_id","your_new_table_id");
go to your Salvar button and Excluir button onclick=""
and change ids:
Functions.addToTable('your_new_form_id','your_new_table_id');
Functions.removeFromTable('your_new_form_id','your_new_table_id','your_table_row_number');
Good luck!
my english is not good. sorry :)
I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>
How can I create a table dynamically and then add rows to the table? I have been able to create the table with one row with form fields, but how I can add additional rows? Any example on how it has been implement would helpful. I did in angular 2.
screenshot
$scope.newItem = function($event, valI) {
$scope['questionelemnt'].push({
id: counter,
title: '',
desc: '',
Qty: '',
price: '',
total: ''
});
}
Any help in angular or jquery.
Directive ng-app & ng-controller code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
Controller CompanyCtrl code in controller.js
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.questions = [];
$scope.addRow = function(){
$scope.questions.push({ 'title':$scope.title, 'desc': $scope.desc, 'Qty':$scope.Qty,'price':$scope.price,'total':$scope.total });
$scope.title='';
$scope.desc='';
$scope.Qty='';
$scope.price='';
$scope.total='';
};
)};
</script>
Directive ng-repeat code
<table class="table">
<tr>
<th>title
</th>
<th>desc
</th>
<th> Qty
</th>
<th>price
</th>
<th>total
</th>
</tr>
<tr ng-repeat="question in questions">
<td>{ {question.title}}
</td>
<td>{ {question.desc}}
</td>
<td>{ {question.Qty}}
</td>
<td>{ {question.price}}
</td>
<td>{ {question.total}}
</td>
</tr>
</table>
**Directive ng-submit code**
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">title</label>
<div class="col-md-4">
<input type="text" class="form-control" name="title"
ng-model="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">desc</label>
<div class="col-md-4">
<input type="text" class="form-control" name="desc"
ng-model="desc" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Qty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="Qty"
ng-model="Qty" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">price</label>
<div class="col-md-4">
<input type="text" class="form-control" name="price"
ng-model="price" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">total</label>
<div class="col-md-4">
<input type="text" class="form-control" name="total"
ng-model="total" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
Happy Coding ,Hope it will help you
I have a problem with my project.
I want an autocomplete input that gets the data from a database, so the problem starts when I enter the view where the autocomplete input is. The view only gives me a white screen with an array that contains all the values in my "clientes" table (the values for the autocomplete input are taken from this table).
I think the problem may be on my routes, but I do not know what to do.
Routes:
Route::get('/nuevaVenta', 'ventas#index');
Route::get('/nuevaVenta', 'ventas#autocomplete');
Controller (ventas.php):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Cliente;
use Illuminate\Support\Facades\Input;
class ventas extends Controller
{
public function index(){
return view('/nuevaVenta');
}
public function autocomplete(Request $Request){
$term = Input::get('term');
$results = array();
$queries = Cliente::where('nombre', 'LIKE', '%'.$term.'%')
->orWhere('apellido_paterno', 'LIKE', '%'.$term.'%')
->take(10)->get();
foreach ($queries as $query)
{
$results[] = [ 'id' => $query->id, 'value' => $query->nombre.' '.$query->apellido_paterno.' '.$query->apellido_materno];
}
return response()->json($results);
//\Response::json($results);
}
}
View (nuevaVenta.blade.php):
#extends('master')
#section('contenido')
<script src="{{asset("js/validaciones.js")}}"></script>
<script src="{{asset("js/nuevaVenta.js")}}"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<form class="form-horizontal" action="{{url('/nuevaVenta')}}" method="GET">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<br>
<div class="form-control" style="background-color: lightblue"><label>Registro de Ventas</label></div>
<div class="col-xs-12" style="border:1px solid lightblue">
<div class="form-group">
<label class="control-label col-sm-12" style ="color: #4cae4c">Clave:0001</label>
</div>
<div class="form-group">
<label class="control-label col-sm-1" style ="font-weight: normal">Cliente:</span></label>
<div class="col-sm-10">
<input type="text" name="cliente" class="form-control solo-letras" id="cliente" style="width: 40%;" placeholder="Buscar cliente..." required>
</div>
</div>
<hr>
<div class="form-group">
<label class="control-label col-sm-1" style ="font-weight: normal">Artículo:</label>
<div class="col-sm-10">
<input type="text" name="cliente" class="form-control" style="width: 40%; display: inline;" placeholder="Buscar Artículo..." required>
<span class="glyphicon glyphicon-plus btn btn-primary"></span>
</div>
</div>
<hr>
<div class="col-xs-12">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Descripción Artículo</th>
<th>Modelo</th>
<th>Cantidad</th>
<th>Precio</th>
<th>Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
#stop
js file (ventas.js):
$(document).ready(function(){
$('#cliente').autocomplete({
autoFocus: true,
minLength:3,
dataType: "json",
source:'ventas/autocomplete',
select:function(event, ui){
alert(ui);
}
});
});
I'm using the autocomplete widget from the jquery-ui library
Your route seems duplicating, that is why, so use unique routes,
Route::get('/nuevaVenta', 'ventas#index');
Route::get('/nuevaVentaAutocomplete', 'ventas#autocomplete');
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?