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');
Related
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.
I want to do a SPA with laravel livewire, i want to use wire:click to fire a funtion in the component but it not working , excuse me if the code mess its my first time posting here and i am not sure of what to post here of my code to make these problem solve thank you
main.blade.php
#section('content')
<div>
<div class="row justify-content-center">
<div class="col-12">
<div class="card my-3">
<!-- header -->
<div class="card-header d-inline-flex">
<h3 class='mr-2'>Categories</h3>
<div>
Add NewCategory
</div>
</div><!-- header -->
<div class="card-body">
<!-- alerts -->
#include('admin.includes.alerts.errors')
#include('admin.includes.alerts.success')
<!-- alerts -->
<!-- if True , create form will show , if not will stay disabled -->
#if ($showCreateForm)
#livewire('admin.category.create' )
#endif
<!-- if True , create form will show , if not will stay disabled -->
<!-- Table -->
<div class="table-responsive">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach ($categories as $category)
<tr>
<td>{{$category->id}}</td>
{{-- <td>{{storage_path(app\livewire-tmp\$category->image)}}" /></td> --}}
<td>{{$category->name}}</td>
<td>{{$category->slug}}</td>
<td class=" {{$category->isActive()==='Active'? 'text-success':'text-danger'}}">
{{$category->isActive()}}</td>
<td>{{ !empty($category->parent) ? $category->parent->name:'' }}</td>
<td>
Edit
Delete
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</tfoot>
</table>
<div>
{!!$categories->links()!!}
</div>
</div>
<!-- Table -->
</div><!-- body -->
</div>
</div>
</div>
</div>
#endsection
and The Component Main.php ,
<?php
namespace App\Http\Livewire\Admin\Category;
use App\Models\Admin\Category;
use Livewire\Component;
use Livewire\WithPagination;
class Main extends Component
{
use WithPagination;
protected $categories;
public $showCreateForm = false;
public $showEditForm = false;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.main',[
'categories' => $categories,
]) ->layout('layouts.admin');
}
public function createCategory()
{
$this->showCreateForm = !$this->showCreateForm;
}
public function update_Category($id)
{
$categories = Category::whereId($id);
if ($categories) {
$this->emit('getCategoryid' , $categories);
$this->showEditForm = !$this->showEditForm;
$this->showCreateForm = false;
}
}
public function delete_Category($id)
{
$this->showCreateForm = !$this->showCreateForm;
}
}
//// Update ////
i tried iRestWeb Answer, I think it the right answer but i dont even understand what happening its 100% javascript related and its not my field of expertise , so here's my full code i hope some one understand , and again sorry if my code messy and give you hard time , thank youu.
create.blade.php
<div>
<form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data">
#csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option selected value> -- select an option -- </option>
{{-- #if (is_array($categories) || is_object($categories) || !empty($categories)) --}} #foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach {{-- #endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"> #error('name') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"> #error('slug') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"> #error('image') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> #error('is_active') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Create.php
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
use Livewire\WithFileUploads;
use Illuminate\Support\Str;
use Livewire\WithPagination;
use Intervention\Image\Facades\Image;
class Create extends Component
{
use WithFileUploads;
use WithPagination;
public $slug , $name , $image , $parent_id , $is_active;
protected $rules = [
'slug' => 'required|unique:categories,slug',
'name' => 'required',
'image'=> 'nullable|image|max:1024'
];
protected $categories;
public function render()
{
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.create' , [
'categories' => $categories,
]);
}
public function create()
{
$this->validate();
$data = [
'name' => $this->name,
'slug' => $this->slug,
'is_active'=> $this->is_active,
'image'=> $this->image,
'parent_id'=> $this->parent_id,
];
//image upload
try {
if ($image = $this->image) {
$filename = Str::slug($this->name).'.'.$image->getClientOriginalExtension();
$path = public_path('assets/image/'.$filename);
Image::make($image->getRealPath())->save($path,100);
}
Category::create($data);
$this->reset();
return $this->addError('success' , 'Created Successfuly');
} catch (\Throwable $th) {
return $this->addError('error', 'Something Wrong Happens');
}
}
}
edit.blade.php
<div>
<form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update">
#csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option></option>
{{-- #if (is_array($categories) || is_object($categories) || !empty($categories)) --}} #foreach ($categories as $category)
<option value="{{$category->id}}">{{$category->name}}</option>
#endforeach {{-- #endif --}}
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='{{$category->name}}' name="name"> #error('name') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='{{$category->slug}}'> #error('slug') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
<img value='{{$category->image}}' alt="" srcset=""> #error('image') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> #error('is_active') <span class="error text-danger">{{ $message }}</span> #enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Edit.php (uncompleted Task)
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
class Edit extends Component
{
protected $categories , $cat_id;
public $slug , $name , $image , $old_image , $parent_id , $is_active;
protected $listeners = ['getCategoryid'=>'getID'];
public function mount()
{
$this->categories = Category::whereId($this->cat_id)->first();
}//mout
public function render()
{
$categories = Category::all();
return view('livewire.admin.category.edit' , [
'categories' => $categories,
]);
}//render
public function update($id)
{
}//update
public function getID($categories)
{
$this->categories = $categories;
// Data
$this->slug = $this->$categories['slug'];
$this->name = $this->$categories['name'];
$this->image = $this->$categories['image'];
$this->old_image = $this->$categories['old_image'];
$this->parent_id = $this->$categories['parent_id'];
$this->is_active = $this->$categories['is_active'];
}//getID
}
All HTML code should be covered with single <div>. Then it will work.
add liveWire's css and js in the base.blade.php file and it works:
<head>
...
#livewireStyles
</head>
<body>
...
#livewireScripts
</body>
</html>
You don't need the :click event to do this, you can simply use:
wire:$toggle('property')
And you don't need to use the a tag; you can simply use the button tag. So your button code will look like this:
<button type="button" wire:$toggle='showCreateForm' class="btn btn-success">Add New Category</button>
I think this will help you
Add New Category
use <livewire:styles /> and <livewire:scripts />
(instead #livewireStyles and #livewireScripts)
First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.
Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">
Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.
Add step="0.01"(for example 0.01) property to your price input.
If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules
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
My angularJS push option is not working. Could someone please tell me where I'm going wrong and a fix for it, please? I started learning this language only for a week now. Please excuse me if the error/mistake is silly.
Thank you
<body ng-app="app" ng-controller ="Ctrl" >
<style>
.alert{
color: crimson;
font-size: 19px;
}
.form{
width: 72%;
margin-left: 12%;
border: 2px solid gold;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("Ctrl", function ($scope) {
$scope.main = [{"ngmail": "a.vanhala#evil.com", "pass": "thor", "cpass": "thor"}];
$scope.add = function ($scope) {
$scope.main.push($scope.sf);
};
});
</script>
<div>
<div>
<form name="regform" class="form-horizontal" role="form" style=" margin: auto;" >
<div class="form-group">
<label class="control-label col-sm-2" for="email3">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" placeholder="Enter email" id="email3" name="email" ng-model="sf.ngmail" required/>
<span class ="alert" ng-show=" regform.email.$touched && regform.email.$error.required"> Required</span>
<span class ="alert" ng-show=" !regform.email.$error.required && (regform.email.$touched && regform.email.$invalid)"> Invalid Email</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd3">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.pass" name="password" required/>
<span class ="alert" ng-show=" regform.password.$touched && regform.password.$error.required"> Required</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd4">Confirm password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.cpass" name="cpassword" required/>
<span class ="alert" ng-show=" regform.cpassword.$touched && regform.cpassword.$error.required"> Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" ng-click="add()" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<br>
<div>
<table border="1">
<thead>
<tr>
<th>Email</th>
<th>password</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="m in main">
<td>{{m.ngmail}}</td>
<td>{{m.pass}}</td>
</tr>
</tbody>
</table>
</div>
</body>
As you are using $scope in function parameter, which is killing the existence of $scope dependency of controller & created a new variable with name $scope. You shouldn't need to add $scope inside your function, it would be already available inside your function.
Code
$scope.add = function () {
$scope.main.push($scope.sf);
};
You don't need to pass $scope in function .
Try like this
$scope.add = function () {
$scope.main.push($scope.sf);
};
have you tried push method without passing the scope to the function
$scope.add= function(){ // no scope here
$scope.main.push($scope.sf);
};