In express, when I do a post from a form:
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="remarks"></td>
</tr>
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="remarks"></td>
</tr>
var body = req.body;, body give me this:
{ name: [ 'Tel', 'Tel2' ], remarks ['test1','test2'] }
How can I get this in json array:
{debtor: [{name:'Tel', remarks:'test1'}, {name:'Tel2', remarks:'test2'} ]
If the remarks test1 is empty, I wont be able to know test2 is belong to row 1 or row2.
Just transform the req.body object as you wish.
var body = [];
for(var n=0; n<req.body.name.length; n++){
body.push({name : req.body.name[n], remarks : req.body.remarks[n]});
}
Related
I am trying to learn how to create webpage with a "dynamic" table inside. I have zero experience in creating webpages but still I was able to construct the shape of the table by means of the use of html (the image below is a very basic in a very basic version):
For summarizing, let's say I want that the web page allows you to introduce A, B, ... J manually using the keyboard as input and it should show you automatically the sum of all of the rows in the column K. I have no idea what technology/code should I use... javascript? PHP? I have good skills in python, could it help somehow? I would like to do it as fast as possible.
Thanks in advance
You can do this by manually creating the table and adding Event Listeners that listen to changes in the table inputs. You can then use the values of the table inputs to calculate the output and display it in the K column:
const inputs = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
// Get the output column
const output = document.getElementById('output');
// Calculate the total from all inputs
function calculate() {
// Start with zero
let total = 0;
// For each element, get the value and add it to total.
inputElements.forEach(inputElement => {
// If the element does not have a value, we just add 0 (this is what the "|| 0" is for)
total += Number(inputElement.value) || 0;
});
// Display the total in the output column
output.innerHTML = total;
}
// Get all the input columns
const inputElements = inputs.map(input => document.getElementById(`input-${input}`));
// Add Event Listeners to all the input columns
inputElements.forEach(inputElement => inputElement.addEventListener('change', calculate));
table input {
width: 45px;
}
<table id="container">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="input-A" type="number" /></td>
<td><input id="input-B" type="number" /></td>
<td><input id="input-C" type="number" /></td>
<td><input id="input-D" type="number" /></td>
<td><input id="input-E" type="number" /></td>
<td><input id="input-F" type="number" /></td>
<td><input id="input-G" type="number" /></td>
<td><input id="input-H" type="number" /></td>
<td><input id="input-I" type="number" /></td>
<td><input id="input-J" type="number" /></td>
<td id="output"></td>
</tr>
</tbody>
</table>
I have a HTML Table with multible Table Rows and Columns.
There is a data request to an SQL Database.
The data is then displayed in the table body.
The table headers stay the same.
But now the problem. i don't know why all the data is written in the first column of my html table.
The table headers do not match the data be
let table = < HTMLTableElement > document.getElementById("result1");
let row = table.insertRow(-1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
let cell4 = row.insertCell(3);
let cell5 = row.insertCell(4);
let cell6 = row.insertCell(5);
let cell7 = row.insertCell(6);
cell1.innerHTML = data[i].projekt_nr;
cell2.innerHTML = data[i].projekt_name;
cell3.innerHTML = data[i].inhalt;
cell4.innerHTML = data[i].bauort;
cell5.innerHTML = data[i].standort;
cell6.innerHTML = datum[i];
cell7.innerHTML = nutzer[i];
<table id="bestand">
<thead>
<tr>
<th>Projekt Nummer</th>
<th>Projekt Name</th>
<th>Inhalt</th>
<th>Bauort</th>
<th>Standort</th>
<th>Ausleihdatum</th>
<th>Nutzer</th>
</tr>
<tr>
<td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
<td><input type="text" [(ngModel)]="query_2" (ngModelChange)="onSearch_2()"></td>
<td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
<td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
<td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
<td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
<td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
</tr>
</thead>
<tbody id="result1">
</tbody>
</table>
See the following picture.
all the data is displayed in the first column. usually the data should match the table headers and the input fields
<table id="bestand">
<tr class="header">
<th>Projekt Nummer</th>
<th>Projekt Name</th>
<th>Inhalt</th>
<th>Bauort</th>
<th>Standort</th>
<th>Ausleihdatum</th>
<th>Nutzer</th>
</tr>
<tr class="header">
<td><input type="text" [(ngModel)]="query_1" (ngModelChange)="search_1()"></td>
<td><input type="text" [(ngModel)]="query_2" (ngModelChange)="search_2()"></td>
<td><input type="text" [(ngModel)]="query_3" (ngModelChange)="onSearch_3()"></td>
<td><input type="text" [(ngModel)]="query_4" (ngModelChange)="onSearch_4()"></td>
<td><input type="text" [(ngModel)]="query_5" (ngModelChange)="onSearch_5()"></td>
<td><input type="text" [(ngModel)]="query_6" (ngModelChange)="onSearch_6()"></td>
<td><input type="text" [(ngModel)]="query_7" (ngModelChange)="onSearch_7()"></td>
</tr>
</table>
I'm new to laravel and I want to submit a form which have three attachments plus some arrays
but when I click submit button laravel says
"The POST method is not supported for this route. Supported methods: GET, HEAD."
I've searched a lot but couldn't find any errors
My View
<div>
<form action="insertquotation" method="post" enctype="multipart/form-data">
#csrf
<table border="1" id="formTable">
<thead>
<tr>
<td>procurment_request_number</td>
<td>quotationer</td>
<td>shop_name</td>
<td>shop_account_number</td>
<td>shop_permit</td>
<td>shop_quatation</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="procurment_request_number" id="procurment_request_number" value="{{$result->first()->request_number}}">
{{--<select name="procurment_request_number[]" id="procurment_request_number">--}}
{{--#foreach($result as $results)--}}
{{--<option value="{{$results->request_number}}">{{$results->request_number}}</option>--}}
{{--#endforeach--}}
{{--</select>--}}
</td>
<td><input type="text" id="quotationer1" name="quotationer1"></td>
<td><input type="text" name="shop_name1" id="shop1_name"></td>
<td><input type="text" name="shop_account_number1" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit1" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation1" id="shop_quatation"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="quotationer" name="quotationer2"></td>
<td><input type="text" name="shop_name2" id="shop1_name"></td>
<td><input type="text" name="shop_account_number2" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit2" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation2" id="shop_quatation"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="quotationer" name="quotationer3"></td>
<td><input type="text" name="shop_name3" id="shop1_name"></td>
<td><input type="text" name="shop_account_number3" id="shop1_account_number"></td>
<td><input type="text" name="shop_permit3" id="shop1_permit"></td>
<td><input type="file" accept="application/pdf" name="shop_quatation3" id="shop_quatation"></td>
</tr>
<tr>
<td>Item_ID</td>
<td>Quantity</td>
<td>Unit_ID</td>
<td>description</td>
<td>Shop1_price</td>
<td>Shop2_price</td>
<td>Shop3_price</td>
</tr>
#foreach($result as $results)
<tr>
<td><input type="text" name="itemid[]" id="itemid" value="{{$results->id}}"></td>
<td><input type="text" name="quantity[]" id="quantity" value="{{$results->quantity}}"></td>
<td><input type="text" name="units_id[]" id="units_id" value="{{$results->units_id}}"></td>
<td><input type="text" name="description[]" id="description" value="{{$results->description}}"></td>
<td><input type="text" name="shop1_price[]" id="shop1_price"></td>
<td><input type="text" name="shop2_price[]" id="shop2_price"></td>
<td><input type="text" name="shop3_price[]" id="shop3_price"></td>
</tr>
</tbody>
#endforeach
</table>
{{--<input value="addrow" type="button" id="addrow" onclick="javascript: addRow();">--}}
<input type="submit" value="submit">
</form>
</div>
My Controller
public function insertquotation(request $request)
{
if ($file = $request->file('shop1_quatation')) {
$name = $file->getClientOriginalName();
$file->move('procurement_files', $name);
$file2 = $request->file('shop2_quatation');
$name2 = $file2->getClientOriginalName();
$file2->move('procurement_files', $name2);
$file3 = $request->file('shop2_quatation');
$name3 = $file2->getClientOriginalName();
$file3->move('procurement_files', $name3);
$procurment_request_number = $request->input('procurment_request_number');
$quotationer1 = $request->input('quotationer1');
$quotationer2 = $request->input('quotationer2');
$quotationer3 = $request->input('quotationer3');
$shop_name1 = $request->input('shop_name1');
$shop_account_number1 = $request->input('shop_account_number1');
$shop_permit1 = $request->input('shop_permit1');
$shop_name2 = $request->input('shop_name2');
$shop_account_number2 = $request->input('shop_account_number2');
$shop_permit2 = $request->input('shop_permit2');
$shop_name3 = $request->input('shop_name3');
$shop_account_number3 = $request->input('shop_account_number3');
$shop_permit3 = $request->input('shop_permit3');
$numbers = $request->input('itemid');
for ($i = 0; $i < count($numbers); $i++) {
$itemid = $request->input('itemid');
$shop1_price = $request->input('shop1_price');
$shop2_price = $request->input('shop2_price');
$shop3_price = $request->input('shop3_price');
DB::insert("INSERT INTO procurment_quotations (`procurment_request_number`, `itemid`, `quotationer1`, `quotationer2`, `quotationer3`, `shop1_name`, `shop1_account_number`, `shop1_permit`, `shop1_quatation`, `shop1_price`, `shop2_name`, `shop2_account_number`, `shop2_permit`, `shop2_quatation`, `shop2_price`, `shop3_name`, `shop3_account_number`, `shop3_permit`, `shop3_quatation`, `shop3_price`, `created_at`, `updated_at`) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,)", [$procurment_request_number, $itemid[$i],$quotationer1,$quotationer2,$quotationer3,$shop_name1,$shop_account_number1,$shop_permit1,$name,$shop1_price,$shop_name2,$shop_account_number2,$shop_permit2,$name2,$shop2_price,$shop_name3,$shop_account_number3,$shop_permit3,$name3,$shop3_price]);
}
}
}
and my route
Route::Post('insertquotation','Home#insertquotation');
The error is
"The POST method is not supported for this route. Supported methods: GET, HEAD."
Give the route a name in your routes/web.php file:
Route::post('insertquotation','Controllername#methodname')
->name('insertquotation');
And then change the form action in your blade file to point to that route:
<form action="{{ route('insertquotation') }}" method="post" enctype="multipart/form-data">
Couple of things which I need to point out on your code
It is always better to use route names while creating routes so that when you need to change the route URL to something else, you only need to change it inside routes file (not view files)
Route::post('insertquotation','Home#insertquotation')->name('insertquotation');
Now inside your view, you need to do this
<form method="POST" enctype="multipart/form-data" action="{{ route('insertquotation') }}"> ... </form>
In the future when you want (maybe not) to change the URL to /quotation/insert, all you have to do is to change it inside the routes file.
Now, inside your controller,
There is a function to check whether the file exists $request->hasFile('shop1_quatation') which more correct to use inside an if condition rather passes in the file.
Also, it is much better to use Laravel eloquent for inserting data into the database. Learn more here
I think from action="insertquotation", you should make it into action="{{url('insertquotation')}}"
And may I see the codes in your routes/web.php file? you should declare the route insertquotation there
For example:
Route::post('insertquotation', 'YourController#yourMethod');
This is the view route
public function showOrder(Order $order)
{
return view('return.sales-return-show', compact('order'));
}
This is output for dd($order);
#original: array:18 [▼
"id" => 7
"company_id" => 1
"order_type" => 1
"order_no" => "12"
"date" => "2019-01-16"
"status" => "1"
"transaction_raw" => "[{"amount":"82264","transaction_type":3,"payment_type":1,"owner_type":"App\\Model\\Customer","owner_id":"1"},{"amount":"0","transaction_type":4,"payment_type":1 ▶"
"line_items" => "[{"customer_id":"1","product_id":"10","unit_id":"2","quantity":"5","price":"2700","total_price":"13500"},{"customer_id":"1","product_id":"43","unit_id":"1","quantity":"52","price":"7","total_price":"364"},{"customer_id":"1","product_id":"9","unit_id":"2","quantity":"18","price":"3800","total_price":"68400"}] ◀"
"total" => 82264.0
"discount" => 0.0
"sub_total" => 82264.0
"paid" => 0.0
"due" => 82264.0
"supplier_id" => 0
"customer_id" => 1
"others_fin" => "{"transport":"0","type":"income"}"
"created_at" => "2019-01-16 19:13:27"
"updated_at" => "2019-01-16 19:13:27"
]
This is the loop where I can show the product name
#foreach($order->items as $item)
{{$item->product->name}}
#endforeach
This is my json route
public function json(Order $order)
{
return response()->json(['orders' => $order]);
}
JSON Data:
{
"orders":{
"id":7,
"company_id":1,
"order_type":1,
"order_no":"12",
"date":"2019-01-16",
"status":"1",
"transaction_raw":[
{
"amount":"82264",
"transaction_type":3,
"payment_type":1,
"owner_type":"App\Model\Customer",
"owner_id":"1"
},
{
"amount":"0",
"transaction_type":4,
"payment_type":1,
"owner_type":"App\Model\Customer",
"owner_id":"1",
"account_head_id":1
}
],
"line_items":[
{
"customer_id":"1",
"product_id":"10",
"unit_id":"2",
"quantity":"5",
"price":"2700",
"total_price":"13500"
},
{
"customer_id":"1",
"product_id":"43",
"unit_id":"1",
"quantity":"52",
"price":"7",
"total_price":"364"
},
{
"customer_id":"1",
"product_id":"9",
"unit_id":"2",
"quantity":"18",
"price":"3800",
"total_price":"68400"
}
],
"total":82264,
"discount":0,
"sub_total":82264,
"paid":0,
"due":82264,
"supplier_id":0,
"customer_id":1,
"others_fin":"{\"transport\":\"0\",\"type\":\"income\"}",
"created_at":"2019-01-16 19:13:27",
"updated_at":"2019-01-16 19:13:27"
}
}
Now I need to show PRODUCT NAME here
<tr v-for="order in orders.line_items">
<td></td>
<td><input name="" v-model="PRODUCT NAME" class="form-control"></td>
<td>{{order.product_id}}</td>
<td></td>
<td><input name="" v-model="order.quantity" class="form-control"></td>
<td><input name="" v-model="order.price" class="form-control" disabled></td>
<td><input name="" v-model="order.quantity * order.price" class="form-control" disabled></td>
<td></td>
</tr>
How to do it...?
It seems your product name is missing in JSON you provided. As far as I see, your product is related with entity "line_item". You need to "eager load" your product with your "line_item"
Change your json action to this:
public function json($id)
{
$order = Order::with(['items', 'items.product'])
->where('id', $id)
->first();
return response()->json(['order' => $order]);
}
And then in your vue template:
<tr v-for="order_item in order.items">
<td></td>
<td><input name="" v-model="order_item.product.name" class="form-control" type="text"></td>
<td>{{order_item.product_id}}</td>
<td></td>
<td><input name="" v-model="order_item.quantity" class="form-control" type="text"></td>
<td><input name="" v-model="order_item.price" class="form-control" disabled type="text"></td>
<td><input name="" v-model="order_item.quantity * order_item.price" class="form-control" disabled type="text"></td>
<td></td>
</tr>
I am not sure that code will work as it is, but the main idea is to "eager load" order lines ("line_items") and products with your object of order, which you get by id in your json action. After that, you iterate through order lines in your vue template.
Yea, the problem is solved now.
This is my json data below
public function json(Order $order)
{
$products = $order->line_items;
$productIds = array_column($products, 'product_id');
$orderedProducts = Product::whereIn('id', $productIds)->get()->groupBy('id');
return response()->json(['orders' => $order, 'orderedProducts' =>$orderedProducts->toArray() ]);
}
And this is AdReturn.vue
<tr v-for="order in orders.line_items">
<td><input name="" v-model="orderedProducts[order.product_id][0].name" class="form-control" disabled></td>
<td><input name="" v-model="order.quantity" class="form-control"></td>
<td><input name="" v-model="order.price" class="form-control" disabled></td>
<td><input name="" v-model="order.quantity * order.price" class="form-control" disabled></td>
</tr>
i have a table of data with array input values , as like below
<table>
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value="1"></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value="2"></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value=""></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
<tr>
<td><input type="text" name="user_id[]" value=""></td>
<td><input type="text" name="name[]"></td>
<td><input type="text" name="email[]"></td>
<td><input type="text" name="phone[]"></td>
</tr>
</table>
And i m trying to update the first two rows with user_id value and trying to insert last two rows as new rows.
I m using the below insert query in laravel controller :
if(!empty(Input::get('user_id')))
{
for($i = 0; $i < count(Input::get('name')); $i++)
{
$id = Input::get('user_id')[$i];
$data = User::find($id);
$data->name = Input::get('name')[$i];
$data->email = Input::get('email')[$i];
$data->phone = Input::get('phone')[$i];
$data->save();
}
}
if(empty(Input::get('user_id')))
{
for($i = 0; $i < count(Input::get('name')); $i++)
{
$new = new User();
$new->name = Input::get('name')[$i];
$new->email = Input::get('email')[$i];
$new->phone = Input::get('phone')[$i];
$new->save();
}
}
But its not working properly . can somebody suggest me any solution for this ?
You should be using a foreach loop to, well, loop through the fields and do something if it is empty or not.
Maybe, something like this would help you.
$fields = Input::get('user_id');
foreach($fields as $field)
{
if(! empty($field))
{
// field is not empty
// update here
}
else
{
// field is empty
// do something here
}
}