I am just learning Laravel and following the Laravel 5.7 from scratch (I am using 5.8)course from Laracasts.
We create a new controller that should handle tasks associated with a project. We show the tasks on the details page for the particular project. All of this works so far. Then, we add a checkbox that indicates when a task has been completed. The checkbox is in a form that submits on change.
This is my form code.
#section('content')
<div class ="col col-md-6">
<form action="/tasks/{{$task->id}}" method="POST">
#method("PATCH")
#csrf
<label class = "checkbox" for="completed">Completed</label>
<input type="checkbox" name="completed" onChange="this.form.submit()">
</form>
</div>
#endsection
Currently, in my Controller, I have the function but am just trying to see if it is hitting the function so I die and dump. Or that is what it should do anyway..
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ProjectTasksController extends Controller
{
public function update(){
dd("hello");
}
}
And, in my web.php file, this is how I have my route set up.
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
Yet, it is not working. When I check one of the checkboxes, the URL changes to this
http://127.0.0.1:8000/projects/1?_method=PATCH&_token=0menrjzIOdiSn0SEu51unY114oKU8kZ2i2B5zy4p&completed=on
So, it is like it is not hitting the route though the route is defined. I don't know what I am doing wrong as I have done exactly what is being done in the video and so I am stuck.
Can someone tell me what is wrong with this?
change patch to post
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
to
Route::post('/tasks/{task}', 'ProjectTasksController#update');
and then add parameter
public function update(){
dd("hello");
}
to
public function update($task){
dd("hello");
}
php artisan route:clear
php artisan route:cache
php artisan config:clear
Seems like an issue with the route cache, have your tried clearing your cache using artisan?
php artisan route:clear
php artisan config:clear
php artisan view:clear
php artisan cache:clear
These are the 4 commands to clear all the cache Laravel may have for your configs, routes and views.
Check if you have a form inside a form or rather a form component is wrapped in with other form tags; I had the same problem.
You may find out in the parent blade you have a form and the child(medical-info-components.payment) blade that is alone has a form also.
<div>
<fieldset>
#if ($stripe)
<div class="card-body">
<script src="https://js.stripe.com/v3/"></script>
<hr>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<strong class="text-bold" style="font-size:20px;">Make Payment of
{{$currency}} {{$price}}
</strong>
<br>
<strong style="font-size:20px;">Please make payments by entering
your Credit or Debit
Card</strong>
</div>
</div>
</div>
<div class="col-md-6" style="float:right;">
<form action=" {!! action('\App\Http\Controllers\PaymentController#store') !!}" method="POST"
id="payment-form" ata-cc-on-file="false"
data-stripe-publishable-key="{{env('pk_test_')}}"
enctype="multipart/form-data">
#csrf
{{-- <input type="hidden" class="" name="stripeToken" id="stripeToken" wire:model.lazy="stripeToken" /> --}}
<div class="form-row">
<label for="card-element">
Your Name
</label>
<input type="text" name="name" class="form-control" wire:model.lazy='name'
placeholder="Enter Your Name" id="">
<label for="card-element">
Your Payable Amount
</label>
<input type="text" name="grandTotal" class="form-control" wire:model.lazy='amount'
placeholder="Enter Your Amount" id="">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="form-control">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<input type="button" class="previous action-button-previous btn btn-dark"
style="margin-left: -11rem; margin-top:15px;" value="Previous" wire:click='previousStep' />
<input type="submit" class="next action-button btn btn-primary"
style="float:right; margin-top:15px;" value="Confirm" />
</form>
</div>
</div>
#elseif($paypal) #elseif($mpesa) #endif
<div class="row">
<div class="col-md-12">
</div>
</div>
</fieldset>
And then inside the mother component, you may have this
<div>
<!-- call -->
<section class="slice">
<div class="container" id="grad1">
<div class="row justify-content-center mt-0">
<div class="col-12 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3 border-0 rounded-lg">
<div class="card-body px-5">
<div class="row">
<div class="col-md-12 mx-0">
{{-- <form id="msform"> --}}
<!-- progressbar -->
#livewire('medical-info-components.payment')
{{-- </form> --}} <!--You see here we have form wrapping our component that has form, you need to take it down-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I have a form1 and a add button. The thing I want is to add same form as form2 below form1 on clinking add button. As I am new to Angular Js it will be very helpful if someone can help me out.
HTML
<div class="row">
<header class="panel-heading">
<h5 class="panel-title" style="padding-left: 1.5rem;">
<b>APPLICANTS</b>
<input class="btn btn-primary" style="float:right " type="button" value="Add" />
</h5>
<hr>
</header>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtFullName">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nationality</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtNationality">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Pin Code</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtPincode">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">House No.</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtHouseNo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to create an array of applicants model objects, let's call it applicantsArray, where every object will represent a single applicant form.
You need to initialize this array with one model empty on page load.
Then you need to wrap your form with ng-for and iterate over every applicant model. So the n-th form will be binded with the n-th model in the applicantsArray.
Last step will be to push an empty applicant model to applicantsArray when 'Add' is clicked. Then a new model is added and the DOM will render additional form for the new model.
I am making a project in Django but Im not using Django built-in forms. Rather, I am using html and bootstrap to render forms. On a page, I want to create a quiz. I am doing this via a multi-step form where I input the number of questions on the first form. Then based upon this field, when I hit next, I want to have the same number of the fields for questions and corresponding answers to appear so that I can set them. For example, if I type 5 questions and hit next, it should have 5 fields for me to enter the questions and each question field should have 4 answer fields. Is there a way to dynamically do this?
Please help :(((( This is very important.
Thank you n here is my code snippet
{% block content %}
<div class="row">
<h2 style="color: darkblue;" class="text-center">Add a Quiz</h2>
</div>
<form action="" id="add_test_form" method="POST">
<!--This form will contain the quiz information-->
{% csrf_token %}
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name of test</label>
<input type="text" class="form-control" name="test_name" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of questions</label>
<input type="number" id="num_qu" class="form-control" name="test_num_questions" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Time( Duration) in minutes</label>
<input type="number" class="form-control" name="test_duration" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<input type="button" value="Next" id="first_next" class="btn btn-primary btn-lg mb-10">
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$("#first_next").click(function(e){
var num_of_qu = $("#num_qu").val();
alert(num_of_qu);
});
});
</script>
{% endblock content %}
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
this may be a little confusing, but let me show you the problem.
I am using express-handlebars in a NodeJs web app. I have to get user input in forms. To get that done, let's say I have two separate forms in two different views 1. Login 2. Book. What I want to achieve is code-reuse of the following partial/template:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{{ formBody }}}
</div>
</div>
</div>
Can anyone guide me how do I use the above template in a form like below:
{{> entry_form }} <!-- start of the form -->
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value="{{email}}"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value="{{password}}"/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="{{rememberMe}}"/>
Remeber me!
</div>
</div>
<div class="form-group text-danger">
{{ errorMessage }}
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form> <!-- end of the form -->
I want to get the following output after compilation. Assuming that {{variables}} will be replaced by the provided values in the context:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>Sing in</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value=""/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value=""/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" />
Remeber me!
</div>
</div>
<div class="form-group text-danger">
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form>
</div>
</div>
</div>
I solved the problem myself. Posting here the solution just to help others if they run into such issues.
What I have done is, I have used inline partials as following.
enclose the login form into inline partial:
{{#*inline loginForm}}
<form class="form-horizontal" method="post" action="/login">
<!-- form contorls -->
</form>
{{/inline}}
{{#> entry-form}}
{{> (lookup . 'loginForm')}}
{{/entry-form}}
Define form container partial as following:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> (dataform) }}
</div>
</div>
</div>
</div>
Please note that I have kept the form container partial in views/partials/entry-from.hbs file, and have loaded them by using:
const express = require('express');
let app = express();
app.engine('hbs', hbs({
extname:'hbs',
defaultLayout:'layout',
layoutsDir:join(__dirname,'views/layouts/'),
partialsDir: [
join(__dirname,'views/partials/')
]
}));
I seem to have arrived a bit late, but I would like to propose an alternative to #Nadeem Jamali's solution for those who have run into the same problem.
Reading the documentation I found the following: https://handlebarsjs.com/guide/partials.html#partial-blocks
You can use {{#partial-block}} in order to represent the content that will be embeded into your partial. Let me give you an example:
container-partial.hbs
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
{{#partial-block}}
<!-- More code here... -->
</div>
Now, in every handlebars file you can use this partial like this:
foobar.hbs
{{#> container-partial }}
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
{{/container-partial}}
And the output after compilation will be:
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
<!-- More code here... -->
</div>
In this case, we can find a solution to #nadeem-jamali's question by doing the following:
form-container.hbs
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> #partial-block }}
</div>
</div>
</div>
</div>
Now, we can use the partial like this:
login-form.hbs
{{#> form-container formTitle="FooBar"}}
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
{{/form-container}}
And the result will be:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>FooBar</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
</div>
</div>
</div>
</div>
Hope it helps :D !
Hello I am building an angular application and I have a problem inside my stripe form. Basically I send data such as card number, expiry date and CVC code from the view to the controller's stripe callback, but I would like to add also the amount of money to pay. So I added this into my form:
<form stripe-form="handleStripe" name="myForm">
<!-- input added for the price -->
<div class="row" ng-if="!unregistered_user">
<div class="input-field col col-xs-12">
<label for="name">Amount </label>
<input name='price' type="number" id="amount" ng-model="price">
</div>
</div>
<!-- credit/debit card form -->
<div class="row">
<div class="input-field col col-xs-12">
<label for="cardn">Card number</label>
<input type="text" name="number" id="cardn" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-6">
<label for="exp">Expiry</label>
<input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
</div>
<div class="input-field col-xs-6">
<label for="cvc">CVC</label>
<input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-12">
<button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button>
</div>
</div>
</form>
In the controller I have this variable:
▸ $scope.price = 0;
When I first load the page I can see that the price input has exactly the same amount that I put in the variable $scope.price. But when I changed it in the page and submit the form, $scope.price is always 0.
It's like the data is being passed from the controller to the view, but not the way back from the view to the controller.
How can I solve this?
I think your issue is with ng-if that wraps your input with price model. ng-if creates its own scope and in your case the price is connected with the scope inside ng-if and not with you controller.
You could use ng-show instead, or set the model like this: ng-model = "$parent.price" or use controllerAs syntax and you don't have to worry about this issue anymore.