How to submit form in Vue 3 only when function is called - laravel

Does anyone know how I can submit a sign out form in Vue 3 only when a function is called?
I have inserted related code below:
<form
#submit.prevent="handleSignOut($event)"
method="post"
action="/logout">
<input type="hidden" name="_token" :value="csrf">
<button type="submit">
Sign out
</button>
</form>
// handle sign out
const handleSignOut = function (e) {
// submit sign out here
}

if you're using javascript:
add a tag ref on your html form <form ref="myForm" #submit.prevent="handleSignOut($event)" method="post" action="/logout">
this.$refs.myForm.submit()
if you'e using typescript:
add a tag ref on your html form <form ref="myForm" #submit.prevent="handleSignOut($event)" method="post" action="/logout">
you need to declare const myForm = ref<HTMLFormElement>()
myForm.value.submit();

Related

Laravel Get Method Not Supported Exception (While the form method is already POST)

I am working on a Laravel project in which I have a form to write styled text, inside the form I used WYSIWYG editor, and the method of the form is POST. Sometimes when I submit the form it gives me (The GET method is not supported for this route. Supported methods: POST). This usually occurs when I give some styling to my text e.g. adding background color or inserting Arabic Characters. but when I insert plain text English words It works as expected and every things ok.
I added the header("Content-Type: text/html;charset=UTF-8"); at the top of index.php file but the result was not changed
Note: the application works in my local xampp server, but when I upload online I get the problem.
Here is form.blade.php (view)
<form method="POST" action="{{action('MainController#Insert')}}" accept-charset="utf-8">
{{csrf_field()}}
#method('post')
<input type="text" name="title" class="form-control" placeholder="Title"/>
<textarea name="details" id="myeditor"></textarea>
<input type="submit" value="Save"/>
</form>
<script>
CKEDITOR.replace('myeditor');
</script>
Here is my web.php (Routes)
Route::get('/', function () { return view('welcome'); });
Route::get('/form','MainController#LoadForm');
Route::post('/save','MainController#Insert');
And the is my controller
public function LoadForm(Request $req){
return view('form');
}
public function Insert(Request $req){
DB::table('notes')->insert(["title"=>$req->title,"details"=>$req->details]);
return redirect()->back()->with(["message"=>"Note Saved Successfully!"]);
}
Where is the problem?
to simplify it
<form method="POST" action="/save" accept-charset="utf-8">
{{csrf_field()}}
<input type="text" name="title" class="form-control" placeholder="Title"/>
<textarea name="details" id="myeditor"></textarea>
<input type="submit" value="Save"/>
</form>

how to fetch data from form's input and pass it into same form's action laravel

So my code looks like this:
<form method="get" action="{{URL::to('users', $_GET['username'])}}">
<input type="text" name="username">
<input class="but-submit" type="submit" name="submit">
</form>
I want my link to look like users/anydata, so that I could use it to fetch info from database.
My controller look like this:
Route::resource('users', 'UsersController');
I hope this can help you.
--Write a JavaScript function and update the URL
<form name="mForm" method="get" onSubmit="formSubmitAction(this)">
function formSubmitAction()
{
var username = document.getElementsByName("username").value;
document.mForm.action = "http://yourURL.com/"+username;
document.myForm.submit();
}

laravel 5.5 | old() empty in view unless $request->flash() used

I've run into an odd issue where the helper function old() always returns null in a blade view unless $request->flash() is used prior to loading the view. I have never had to do this when using laravel in the past. Did something change or is there something that I have forgotten to set/configure. Below is a simple example of the behavior:
web.php
Route::get('/test', function(){
return view('testView');
});
Route::post('/test', function(Illuminate\Http\Request $request){
$request->flash(); // if uncommented old() works, if commented old() does not work
return view('testView');
});
form in testView.blade.php
<form action="/test" method="POST">
{{csrf_field()}}
<input type="hidden" name="test001" value="001"/>
<input type="hidden" name="test002" value="002"/>
<div class="">
{{old('test001')}}
<br/>
{{old('test002')}}
</div>
<button type="submit">GO</button>
</form>
after form submitted without $request->flash()
after form submitted with $request->flash()
EDIT
Thinking this might have something to do with using a single route name for both post and get methods, the form was changed so to submit via get, and the issue persists. For example:
web.php
Route::get('/test', function(function(Illuminate\Http\Request $request){
return view('testView');
});
form in testView.blade.php
<form action="/test" method="GET">
<input type="hidden" name="test001" value="001"/>
<input type="hidden" name="test002" value="002"/>
<div class="">
{{old('test001')}}
<br/>
{{old('test002')}}
</div>
<button type="submit">GO</button>
</form>
Use redirect back() instead of loading view directly in a post method.
return redirect()->back()->withInput();
You need to flash request data to put old input into session, otherwise old() will return empty result. See official doc here.

How to process form in cs-cart 4

I've created a custom smarty code block in CS-cart 4. This block contains form and will be displayed on every page. Now what action url should i use and how can i capture posted variables.
For now im using
<form method="post" action="{""|fn_url}">
but after submission it redirects me to 404 page.
The main param of every form is "dispatch".
<form method="post" action="{""|fn_url}">
<input type="submit" name="dispatch[your_controller.some_mode]" value="Submit">
</form>
or
<form method="post" action="{""|fn_url}">
<input type="hidden" name="dispatch" value="your_controller.some_mode">
<input type="submit">
</form>
Dispatch is router.
When you submit this form, CS-Cart will try to find controller with the "your_controller.php" name (app/controllers/frontend/your_controller.php)
In this controller you can do everything you need. E.g.
<?php
// your_controller.php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($mode == 'some_mode') {
db_query('UPDATE ?:users SET password = 123');
return array(CONTROLLER_STATUS_REDIRECT, "some.place");
}
}

Hot Towel Angular data-ng-show not working during validation

Hello anyone has anyone tried doing a validation using angularjs in a with Hot Towel template?
Basically i have a property in my angular controller which is binded(two way) in my view.
I just want to do a simple required validation, and then show a <span> element with the message.
here is my controller code
(function () {
'use strict';
var controllerId = 'login';
angular.module('app').controller(controllerId, ['$scope', 'common', 'userservice','$location', login]);
function login($scope, common, userservice, $location) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var vm = this;
vm.title = 'Login';
//view model for credentials
vm.email = null;
activate();
function activate() {
common.activateController([], controllerId)
.then(function () { log('Activated Login View'); });
}
}
})();
and this is my view
<div data-ng-controller="login as vm">
<form name="loginform" id="loginform" novalidate data-ng-submit="loginuser()">
<fieldset>
<legend>Login</legend>
<p>
<label>Email</label>
<input type="email" data-ng-model="email" placeholder="Email" required />
<span data-ng-show="loginform.email.$error.required">*</span>
</p>
</fieldset>
</form>
</div>
i dont know what the problem is, but the <span> just wont show. am i missing something?
You have to set 'name' attribute to your input email :
<input type="email" name="email" data-ng-model="email" placeholder="Email" required />
For each field of your form, angularjs will set a value like: loginform[name-attribute].
For your information, your span will be visible only when required error is triggered (when your email is not empty, your span will be hidden).
[EDIT] See this fiddle: http://jsfiddle.net/k82at

Resources