How To Solve This Update Error In Laravel - database

I'm creating a web site. And I have created a registration page. I want to update my details.
But, It gives me this error and I have also uploaded a picture of errors below. -
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message
** Error Picture
How can I Fix this ??
Here is my AdminPanel.blade.php
<table class="table table-bordered">
<tr>
<td> Name </td>
<td> Email </td>
<td> Images </td>
</tr>
#foreach($data as $value )
<tr>
<td> {{ $value->username }} </td>
<td> {{ $value->email }} </td>
<td> <img src='{{ $value->filemove }}' style='width:100px;height:100px;'> </td>
<td> <input type="submit" name="update" value="Update" class="btn-primary"> </td>
<td> <input type="submit" name="delete" value="Delete" class="btn-danger"> </td>
</tr>
#endforeach
</table>
Here is my AdminUpdate.blade.php
<form action="edit{{ $users[0]->id }}" method="post" enctype="multipart/form-data">
{{ method_field('PUT') }}
{{ csrf_field() }}
<div class="form-group">
<label>Username : *</label>
<input type="text" class="form-control" name="username" value="{{$users[0]->username}}" placeholder="Enter Your Username" required>
</div>
<div class="form-group">
<label>Email : *</label>
<input type="email" class="form-control" name="email" value="{{$users[0]->email}}" placeholder="Enter Your Username" required>
</div>
<div class="form-group">
<label>Password : *</label>
<input type="password" class="form-control" name="password" value="{{$users[0]->password}}" placeholder="Enter Your Password" required>
</div>
<div class="form-group">
<label>Upload Profile Picture :</label>
<input type="file" class="form-control-file" name="file_img" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">If U Want , U Can Skip Upload A Profile Picture</small>
</div>
#section('btnName',"Update")
<input type="submit" class="btn btn-primary" onclick="myFunction()" name="submit" value="#yield('btnName')">
</form>
Here is my AdminPanelController.php
<?php
namespace App\Http\Controllers;
use Auth;
use Illuminate\Http\Request;
use App\User;
use Validator;
use Illuminate\Support\Facades\Input;
class AdminPanelController extends Controller
{
public function index()
{
$data = User::all();
//$data = login::orderBy('created_at', 'desc')->get();
return view('AdminPanel', ['data' => $data]);
}
public function adminedit(Request $request, $id)
{
$this->validate($request, [
'email' => 'required'
]);
$users = User::find($request['id']);
$users->username = $request['username'];
$users->email = $request['email'];
$users->update();
return redirect('AdminPanel');
}
}
Here is my Route
Route::put('edit/{id}','AdminPanelController#adminedit');

you should replace your action url
//make sure you have $users[0]->id data here
<form action="{{ action('AdminPanelController#adminedit',['id'=> $users[0]->id]) }}" ....>

Related

Getting the id of the form from table as reference to the next form in Laravel

I am very new to Laravel. I am currently doing a Laravel project where a person can submit a proposal. The Laravel version I'm using is Laravel Framework 8. I divided the proposal form into 7 pages. I also have 7 tables in the database. So the data of each page will be saved into each of the tables. 1 page = 1 table. This means I also have 7 models. In conclusion, I have 7 views, 7 controllers, 7 models, and 7 tables (if this is not a good practice please tell me)
Here is an example of my code
Route
web.php
Route::get('/form/details', [App\Http\Controllers\Lect\Form\Step1Controller::class, 'createStepOne'])->name('form.create.step.one');
Route::post('/form/details', [App\Http\Controllers\Lect\Form\Step1Controller::class, 'postCreateStepOne'])->name('form.create.step.one.post');
Route::get('/form/learning-outcomes', [App\Http\Controllers\Lect\Form\Step2Controller::class, 'createStepTwo'])->name('form.create.step.two');
Route::post('/form/learning-outcomes', [App\Http\Controllers\Lect\Form\Step2Controller::class, 'postCreateStepTwo'])->name('form.create.step.two.post');
...
Model
Step1.php
class Step1 extends Model {
use HasFactory;
public $table = 'forms';
protected $fillable = [
'title',
'code',
'creditvalue',
'mqflevel',
'affectedbatch',
'kulliyyah',
'department',
'synopsis',
'classification',
'prerequisite',
];
}
Step2.php
class Step2 extends Model {
use HasFactory;
public $table = 'proposal_learning_outcome';
public $timestamps = false;
protected $fillable = [
'proposal_id',
'lo_id',
'outcomes',
'bloom_c',
'bloom_a',
'bloom_p',
'ki',
'po',
];
}
Controller
Step1Controller.php
class Step1Controller extends Controller {
public function createStepOne(Request $request) {
return view('form.step1');
}
public function postCreateStepOne(Request $request) {
$validatedData = $request->validate([
'title' => 'required',
'code' => 'required|unique:forms',
'creditvalue' => 'required|numeric',
'mqflevel' => 'required|numeric',
'affectedbatch' => 'required',
'kulliyyah' => 'required',
'department' => 'required',
'synopsis' => 'required',
'classification' => 'required',
'prerequisite' => 'required',
]);
$step1 = new Step1;
$step1->title=$request->input('title');
$step1->code=$request->input('code');
$step1->creditvalue=$request->input('creditvalue');
$step1->mqflevel=$request->input('mqflevel');
$step1->affectedbatch=$request->input('affectedbatch');
$step1->kulliyyah=$request->input('kulliyyah');
$step1->department=$request->input('department');
$step1->synopsis=$request->input('synopsis');
$step1->classification=$request->input('classification');
$step1->prerequisite=$request->input('prerequisite');
$step1->created_by=Auth::user()->username;
$result = $step1->save();
return redirect()->route('form.create.step.two');
}
}
Step2Controller.php
class Step2Controller extends Controller {
public function createStepTwo(Request $request) {
return view('form.step2');
}
public function postCreateStepTwo(Request $request) {
$validatedData = $request->validate([
'proposal_id' => 'required',
'lo_id' => 'required',
'outcomes' => 'required',
'bloom_c' => 'required',
'bloom_a' => 'required',
'bloom_p' => 'required',
'ki' => 'required',
'po' => 'required',
]);
foreach($request->lo_id as $key=>$lo_id) {
$data = new Step2();
$data->proposal_id=$request->input('proposal_id');
$data->lo_id=$lo_id;
$data->outcomes=$request->outcomes[$key];
$data->bloom_c=$request->bloom_c[$key];
$data->bloom_a=$request->bloom_a[$key];
$data->bloom_p=$request->bloom_p[$key];
$data->ki=$request->ki[$key];
$data->po=$request->po[$key];
$data->save();
}
return redirect()->route('form.create.step.three');
}
}
View
step1.blade.php
<form action="{{ route('form.create.step.one.post') }}" method="POST">
#csrf
<div class="card">
Step 1: Basic Info
</div>
<div class="card-body">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="form-group">
<label for="title">Course Title</label>
<input type="text" name="title" class="form-control text-lg" id="title" placeholder="">
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="code">Course Code</label>
<input type="text" name="code" class="form-control text-lg" id="code" placeholder="">
</div>
<div class="form-group">
<label for="creditvalue">Credit Value</label>
<input type="number" name="creditvalue" class="form-control text-lg" id="creditvalue" placeholder="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="mqflevel">MQF Level</label>
<input type="number" name="mqflevel" class="form-control text-lg" id="mqflevel" placeholder="">
</div>
<div class="form-group">
<label for="affectedbatch">Affected Batch</label>
<input type="text" name="affectedbatch" class="form-control text-lg" id="affectedbatch" placeholder="">
</div>
</div>
</div>
<div class="form-group">
<label for="kulliyyah">Centre of Studies</label>
<select type="text" class="form-control text-lg" name="kulliyyah" id="kulliyyah">
<option value="Kulliyyah of Information and Communication Technology">Kulliyyah of Information and Communication Technology</option>
<option value="Kulliyyah of Education">Kulliyyah of Education</option>
<option value="Kulliyyah of Engineering">Kulliyyah of Engineering</option>
<option value="Kulliyyah of Architecture and Environmental Design">Kulliyyah of Architecture and Environmental Design</option>
</select>
</div>
<div class="form-group">
<label for="department">Department/Unit</label>
<select type="text" class="form-control text-lg" name="department" id="department">
<option value="Department of Computer Science">Department of Computer Science</option>
<option value="Department of Information System">Department of Information System</option>
</select>
</div>
<div class="form-group">
<label for="synopsis">Course Synopsis</label>
<textarea type="text" class="form-control text-lg" name="synopsis" rows="5" id="synopsis" placeholder=""></textarea>
</div>
<div class="form-group">
<label for="classification">Course Classification within the Curriculum</label>
<input type="text" class="form-control text-lg" name="classification" id="classification" placeholder="eg: CSC 1305">
</div>
<div class="form-group">
<label for="prerequisite">Prerequisite(s) (if any)</label>
<input type="text" class="form-control text-lg" name="prerequisite" id="prerequisite" placeholder="">
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Next</button>
</div>
</div>
</form>
step2.blade.php
<form action="{{ route('form.create.step.two.post') }}" method="POST">
#csrf
<div class="card">
Step 2: Course Learning Outcomes</div>
<div class="card-body">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="form-group">
<label for="proposal_id">Proposal ID</label>
<input type="text" class="form-control text-lg" name="proposal_id" id="proposal_id" placeholder="">
</div>
<div class="table-responsive">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-bordered" id="user_table">
<thead>
<tr class="table-active">
<th rowspan="2">No.</th>
<th rowspan="2" class="w-50">Outcomes</th>
<th colspan="3" class="w-25">Bloom's Taxonomy</th>
<th rowspan="2">Soft skills (KI)</th>
<th rowspan="2">Programme Outcomes (PO)</th>
<th rowspan="2">Add</th>
</tr>
<tr class="table-active">
<th>C</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control text-lg" name="lo_id[]"/></td>
<td><textarea class="form-control text-lg" name="outcomes[]"></textarea></td>
<td><input class="form-control text-lg" name="bloom_c[]"/></td>
<td><input class="form-control text-lg" name="bloom_a[]"/></td>
<td><input class="form-control text-lg" name="bloom_p[]"/></td>
<td><input class="form-control text-lg" name="ki[]"/></td>
<td><input class="form-control text-lg" name="po[]"/></td>
<td>Remove</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-6 text-left">
Previous
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn btn-primary ">Next</button>
</div>
</div>
</div>
</div>
</form>
and the other 5 steps are basically like that.
My current problem is how can I get the proposal_id of the first form (step1) as a reference to the next 6 forms. The proposal_id is used as a foreign key for other tables. The proposal_id is auto-incremented in the table.
The reason I divided them into many tables is that some parts of the form are in table format as shown in step2.blade.php. The image below a reference.
Form example
For now, as you can see in the code, my current solution is to manually input the proposal_id in each form (which is not practical because they would not know the proposal_id in the first place). My current code has no issue. It can be saved into the database as normal.
How can I solve this issue? Or is there another way to fill up this form? Thank you in advance.
You have two solution, the first I see is to pass the proposal_id as a parameter of your route (see below).
Route::get('/form/learning-outcomes{proposal_id}', [App\Http\Controllers\Lect\Form\Step2Controller::class, 'createStepTwo'])->name('form.create.step.two');
The second is to save it in your session variable and you can acess it throught your form
session()->put('proposal_id', $proposal_id)
To get it in your second form use :
session()->get('proposal_id')
Update
Make sure to add this line in your migration file:
$table->id('proposal_id')
where the proposal_id is your primary key autoincrement. By default if you don't put anything as id parameter, it will be id in your column table.
$table->id()//COLUMN TABLE WILL CONTAINT id as name
$table->id('proposal_id')//COLMUN TABLE WILL CONTAINT proposal_id as name
The answer was helpful but not actually what I asked (sorry if my question was not clear). I found the answer to my question.
I wanted to get the proposal_id from the first form. I called the lastest added row in the table like this:
$proposal_id = DB::table('forms')
->select('proposal_id')
->orderBy('proposal_id', 'desc')
->limit(1)
->value('proposal_id');
I added this code in the Step1Controller after
$result = $step1->save();
And then I save it into session like crazy4dev suggested:
$request->session()->put('proposal_id', $proposal_id);
return redirect()->route('form.create.step.two', compact('proposal_id'));
I can access the proposal_id in the Step2Controller with:
$proposal_id = $request->session()->get('proposal_id');

Laravel multiple data insert into database

i want to insert more items to one delivery_notes_id in Laravel. But i get the error "Array to String conversion". When i delete the code with $lastid then is no error.
Can you help me?
$data=$request->all();
$lastid=delivery_note::create($data)->id;
$delivery_note->datum = $data['datum'];
$delivery_note->customer_id = $data['customer'];
if(count($data['produkt']) > 0)
{
$data2=[];
foreach($data['produkt'] as $item => $value)
array_push($data2, [
'delivery_notes_id'=>$lastid,
'menge'=>$request['menge'][$item],
'einheit'=>$request['einheit'][$item],
'product_id'=>$request['produkt'][$item],
]);
Items::insert($data2);
}
return $this->index()->with([
'meldung_success' => 'Lieferschein wurde erstellt!'
]);
}
Here is the HTML Code. I've tried this with the following tutorial https://tsdurjoy.blogspot.com/2019/01/laravel-multiple-data-insert-into_20.html
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="container">
<h4 class="text-center"><i class="fas fa-chevron-left"></i> neuer LIEFERSCHEIN</h4>
<form class="row g-3" action="/delivery_note" method="post">
#csrf
<table>
<tbody>
<tr>
<label for="datum" class="form-label">Datum</label>
<input type="date" class="form-control" name="datum" id="datum" value="{{ old('datum') }}">
</tr>
<tr>
<label for="customer_id" class="form-label">Kunde</label>
<select id="customer_id" class="form-control" name="customer">
<option selected>Kunde wählen</option>
#foreach (App\Customer::get() as $customers)
<option value="{{$customers->id}} ">{!! $customers->customer !!}</option>
#endforeach
</select>
</tr>
<div id="more">
<tr>
<td>
<label for="menge" class="form-label">Menge</label>
<input type="text" class="form-control" name="menge[]" id="menge" value="{{ old('menge') }}">
</td>
<td>
<label for="einheit" class="form-label">EH</label>
<input type="text" class="form-control" name="einheit[]" id="einheit" value="{{ old('einheit') }}">
</td>
<td>
<label for="produkt" class="form-label">Produkt</label>
<select id="produkt" class="form-control" name="produkt[]">
<option selected>Produkt wählen</option>
#foreach (App\Product::get() as $produkt)
<option value="{{$produkt->id}}">{!! $produkt->produkt !!}</option>
#endforeach
</select>
</td>
</tr>
</div>
</tbody>
</table>
<div class="col-12 mt-2">
<a class="addRow" name="addRow" id="addRow">+ weiteres Produkt</a>
</div>
<div class="col-12 mt-4">
<button type="submit" class="btn btn-primary">SPEICHERN</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('.addRow').on('click', function() {
addRow();
});
function addRow() {
var tr = '<tr>'+
'<td>'+
'<input type="text" class="form-control" name="menge[]" id="menge" value="{{ old('menge') }}">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" name="einheit[]" id="einheit" value="{{ old('einheit') }}">'+
'</td>'+
'<td>'+
'<select id="produkt" class="form-control" name="produkt[]">'+
'<option selected>Produkt wählen</option>'+
'#foreach (App\Product::get() as $produkt)'+
'<option value="{{$produkt->id}}">{!! $produkt->produkt !!}</option>'+
'#endforeach'+
'</select>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
};
</script>
try like this one:
$data=$request->all();
$lastid=delivery_note::create($data)->id;
$delivery_note->datum = $data['datum'];
$delivery_note->customer_id = $data['customer'];
if(count($data['produkt']) > 0)
{
foreach($requsest->get('produkt') as $item => $value){
$data = new yourModelName();
$data->delivery_notes_id=$lastid;
$data->menge=$request->menge[$item];
$data->einheit=$request->einheit[$item];
$data->product_id=$request->produkt[$item]
$data->save();
}
}
return $this->index()->with([
'meldung_success' => 'Lieferschein wurde erstellt!'
]);
}

How to update database fields using controller Laravel - No error message

I am going round in circles trying to update data to the database, I finally have got rid of all the errors so now its correctly redirects with no error yet it isnt updating on the site or on the database.
Any help would be greatly appreciated, thanks!
web.php
Route::put('/my-saved-routes/{myroute_id}', 'MyroutesController#update');
MyroutesController.php
public function update(Request $request, $id)
{
$Myroutes = Myroutes::find($id);
$Myroutes->start = $request->input('start');
$Myroutes->end = $request->input('end');
$Myroutes->waypoints = $request->input('waypoints');
$Myroutes->save();
return redirect('/my-saved-routes');
}
show.blade.php
<div class="col-md-4">
<h2>Route {{ $myroute->myroute_id }}</h2>
<form method="put" action="/my-saved-routes">
{{ method_field('put') }}
{{ csrf_field() }}
<input type="hidden" name="_method" value="PUT" />
<div class="form-group">
<label>Start Point</label>
<input type="text" id="start" name="start" class="form-control" value="{{ $myroute->start }}" required/>
</div>
<div class="form-group">
<label>End Point</label>
<input type="text" id="end" name="end" class="form-control" value="{{ $myroute->end }}" required/>
</div>
<div>
<label for="mode">Mode of Travel</label>
<select id="mode" class="form-control" onchange="calculateAndDisplayRoute();">
<option value="DRIVING" name="driving">Driving</option>
<option value="WALKING" name="walking">Walking</option>
<option value="BICYCLING" name="cycling">Cycling</option>
<option value="TRANSIT" name="public-transport">Public Transport</option>
</select>
</div>
<p>Note: Public Transport is only available for start and end points.</p>
<div id="dynamicInput" class="form-group">
<label>Additional Destinations</label>
<input type="text" name="waypoints" class="form-control" autocomplete="on" value="{{ $myroute->waypoints }}">
</div>
<input type="button" class="btn btn-secondary" value="+" onClick="addInput('dynamicInput');" style="padding:0 10px;">
</br></br>
<input type="button" id="calc-route" style="color:#2b2b2b" class="btn btn-light" value="Calculate Route"/>
<input type="submit" id="update-route" class="btn btn-success" value="Update"/>
<input type="button" class="btn btn-danger" value="Delete"/>
</form> <!-- end of form -->
Myroutes.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
class Myroutes extends Model
{
protected $fillable = [
'myroute_id',
'user_id',
'start',
'end',
'waypoints'
];
protected $primaryKey = 'myroute_id';
}
You can do like below
Myroutes::where('id', $id)
->update(['start' => $request->input('start'),
'end'=>$request->input('end'),
'waypoint'=>$request->input('waypoints')]
);
try to
<form method="put" action="/my-saved-routes">
update
<form method="post" action="/my-saved-routes/{{ $myroute->myroute_id }}">
Try the following:
<form class="form" method="post" action="/my-saved-routes/{{ $$myroute->myroute_id) }}">
{{ method_field('patch') }}
{{ csrf_field() }}

Angular and not angular forms within the same page

I have two forms on a single page. One form I am adding/deleting which is working fine. Now in the second form (which I don't want to do anything through angular)
But I am not able to submit this(second form). Both the forms are inside my app. Anybody have any idea please share.
I can see when I refresh the page "ng-pristine ng-valid" classes are added in my second form.
This is my first form
<div class="address address-form" ng-hide="!isEdit">
<form class="edit-address-form" ng-submit="updateAddress(currentAddress.aid);">
<div class="form-group">
<label class="sr-only" for="first_name">First name </label>
<input type="text" class="form-control" id="first_name" value="testing" name="first_name" value="{{currentAddress.first_name}}" placeholder="First name" required ng-model="currentAddress.first_name">
</div>
<div class="form-group">
<label class="sr-only" for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" ng-model="currentAddress.last_name" >
</div>
<div class="form-group">
<label class="sr-only" for="phone">Phone/mobile</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" ng-model="currentAddress.phone">
</div>
<div class="form-group">
<label class="sr-only" for="street">Street address</label>
<input type="text" class="form-control" id="street" name="street" placeholder="Street address" ng-model="currentAddress.street">
</div>
<div class="form-group">
<label class="sr-only" for="city">City</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" ng-model="currentAddress.city" >
</div>
<div class="form-group">
<label class="sr-only" for="postal_code">Postal code</label>
<input type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Postal code" ng-model="currentAddress.postal_code" >
</div>
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="Country" autofocus ng-model="currentAddress.country">
</div>
<div class="form-group">
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<div class="alert alert-success" role="alert" ng-show="successMsg">{{successMsg}}</div>
<button type="submit" class="btn btn-lg btn-primary btn-block" id="button-update-address" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Updating address...">Update address</button>
</div>
</form>
</div>
This one second form
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Payment Summary</h3>
</div>
<div class=" ">
<form id="confirm-order" name="confirm_order" method="POST" action="">
<div class="form-group">
<?php
if($con->returned_rows):
$row = $con->fetch_assoc();
?>
<table class="table">
<tr>
<td> Sub total </td>
<td><?php print $row['subtotal'] ;?><input type="hidden" name="subtotal" value="<?php print $row['subtotal'] ;?>"/></td>
</tr>
<tr>
<td>Total items </td>
<td><?php print $row['total_qty'] ;?></td>
</tr>
<tr>
<td>Shipping</td>
<td><?php //print $row['total_qty'] ;?></td>
</tr>
</table>
<?php endif; ?>
</div>
<div class="form-group">
<input type="submit" name="confirm" class="btn btn-lg btn-primary btn-block" value="Confirm order"/>
</div>
</form>
</div>
angular has directive named form, because of which it considers your form directive in angular-scope.
if you want this directive to be out of angular-scope, use ngNonBindable
<form ng-non-bindable>
.....
</form>

AngularJS Form submit

Working on my first small AngularJS App I'm facing problems with a form submit. I worked trough the CodeSchool course and figured the most out by myself, but this form submit thingy... well I just don't get where I'm wrong so that's why it would be nice if you could show me the right solution, so I can go on.
Project: A simple Workout List where you can list all the training sessions you had. This is my HTML, Element 3 is the problem:
<header class="wob-masthead container-fluid">
<div class="row">
<div class="col-md-6" ng-init="tab = 1">
<ul class="nav nav-pills">
<li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1">Overview</a></li>
<li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Stats</a></li>
<li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3">New</a></li>
</ul>
</div>
<div class="col-md-6">
<form class="navbar-form pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
</div>
</header>
<section class="wob-main mainlist container" id="headjump">
<!--- ==========================================
Element 1: Overview
============================================= -->
<div class="subsite" ng-show="tab === 1">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>WorkoutBuddy</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} Minutes</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--- ==========================================
Element 2: Stats
============================================= -->
<div class="subsite" ng-show="tab === 2">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>Stats</h1>
<!-- Ende Subsite -->
</div>
<!--- ==========================================
Element 3: New
============================================= -->
<div class="subsite" ng-show="tab === 3">
<div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
<h1>New</h1>
<div class="table-responsive" ng-controller="ListController as listing">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-2">Date</th>
<th class="col-md-8">Type</th>
<th class="col-md-1">Repeat</th>
<th class="col-md-1">Time</th>
</tr>
</thead>
<tbody ng-controller="ListController as listing">
<tr ng-repeat="wo in listing.sessions | limitTo:2">
<td>{{wo.date | date:'dd/MM/yyyy'}} </td>
<td>{{wo.name}}</td>
<td>{{wo.repeat}}</td>
<td>{{wo.time}} minutes</td>
</tr>
</tbody>
</table>
</div>
<form name="WorkoutForm" ng-controller="EntryController as entryCtrl">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong><br>
<small>am: {{entryCtrl.wo.date}}</small><br>
{{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
<!-- Ende Subsite -->
</div>
</section>
I styled it with Bootstrap and this is my app.js:
(function(){
var app = angular.module('wobuddy', [ ]);
app.controller('ListController', function(){
this.sessions = wos;
});
var wos = [
{
name: 'Squat',
date: '01.01.2015',
repeat: 50,
time: 10
},
{
name: 'Push Ups',
date: '01.01.2015',
repeat: 50,
time: 10
}
];
})();
Switching between the sections using the nav works pretty fine and also printing out the data-elements in the table, but when I push submit nothing happens - really hope you can help me to learn :-)
You need to make an EntryController that will add a new object to the end of the wos collection. Something like this:
app.controller('EntryController', function($scope) {
$scope.wo = {};
$scope.submit = function() {
wos.push($scope.wo);
$scope.wo = {}; // Clear the form fields
};
});
Then your HTML for that section could look something like this:
<form name="WorkoutForm" ng-controller="EntryController">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{wo.name}}</strong><br>
<small>am: {{wo.date}}</small><br>
{{wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input ng-model="wo.date" type="date" placeholder="date" />
<input ng-model="wo.name" type="name" placeholder="name" />
<input ng-model="wo.repeat" type="repeat" placeholder="repeat" />
<input ng-model="wo.time" type="time" placeholder="time" />
<button ng-click="submit()">Add</button>
</form>
Notice that it's more usual for a controller to communicate data to the template via the $scope object rather than via the controller object itself.
By looking at you form HTML, I think you missed the name attribute inside your form and also ng-submit directive is missing which will gets called after a submit form. Do check form validation inside controller using $valid() method and perform post else give alert to user.
HTML
<form name="workoutForm" ng-controller="ReviewController as reviewCtrl" ng-submit="submit(workoutForm, entryCtrl.wo)">
<blockquote>
<h3>Last Workout:</h3>
<strong>{{entryCtrl.wo.name}}</strong>
<br>
<small>am: {{entryCtrl.wo.date}}</small>
<br> {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
</blockquote>
<input name="date" ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
<input name="name" ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
<input name="repeat" ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
<input name="time" ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
<input type="submit" value="Add" />
</form>
Controller
$scope.submit = function(workoutForm, item){
if(workoutForm.$valid)
//then make $http.post by sending item values
else
//show error
};
UPDATE
<html ng-app='demoApp'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<form ng-controller="validationCtrl">
<input type="text" placeholder="Name...." ng-model="user.name"/>
<input type="text" placeholder="Password...." ng-model="user.pass"/>
<input type="text" placeholder="Mobile...." ng-model="user.mo"/>
<input type="submit" ng-click="alldata(user)"/>
</form>
<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
$scope.alldata=function(user)
{
alert(JSON.stringify(user));
}
});
</script>
</body>
</html>
You can also use this method, and
Your form shoud be like
<form method="post" name="sentMessage" id="my_contact" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Name</label>
<input class="form-control" id="name" type="text" name="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Email Address</label>
<input class="form-control" id="email" type="email" name="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Phone Number</label>
<input class="form-control" id="phone" type="tel" name="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Message</label>
<textarea class="form-control" id="message" rows="5" name="Message" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
Send
</div>
</form
import jquery as below
npm install jquery using CLI
import * as $ from 'jquery';
send_query() function will be
send_query() {
var data = $("#my_contact").serializeArray();
var indxarr = {};
$.each(data,function(i,v){
indxarr[v['name']] = v['value'];
});
data = JSON.parse(JSON.stringify(indxarr))
//POST YOUR DATA
this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/', data,httpOptions)
.subscribe(data => {
console.log(data);
});
}
Your backend code will be
public function contact_query_submit(){
if ($this->input->post()) {
$postdata = file_get_contents("php://input");
$_POST = json_decode($postdata,TRUE);
$addArr = array(
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'phone' => $this->input->post('phone'),
'message' => $this->input->post('message'),
'created' => time()
);
if($this->main_model->create('rjt_contact', $addArr)){
$arr[] = array('type' => 'success', 'msg' => '<p>Your query has been received. <br>We will get back to you soon.</p>');
echo json_encode($arr);
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>'.$this->db->last_query().'</p>');
echo json_encode($arr);
}
}else{
$arr[] = array('type' => 'warning', 'msg' => '<p>No data post yet</p>');
echo json_encode($arr);
}
}

Resources