Not able to produce action upon clicking the button - php

I am using the below code from Tailblocks Link under CTA section , upon clicking the button I am not able to get to new page. In the below code form tags are added by me. please guide how can I resolve it?
<form ction="index.php" method="post">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Slow-carb next level shoindcgoitch ethical authentic, poko scenester</h1>
<p class="leading-relaxed mt-4">Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
</div>
</div>
</section>
</form>

You form action attribute is having a typo.
<form action="index.php" method="post">
Also, instead of button you need to select the input type as submit.
<input type='submit' class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" value="Button">
else add some JS to submit the form
<script>
var forms = document.getElementsByTagName('form');
for(var i = 0; i < forms.length; i += 1) {
forms[i].addEventListener('submit', function(e) {
e.preventDefault();
}, true);
}
</script>

You have a typo error in action attribute in your form tag.
<form action="index.php" method="post">
Also you don't add the type attribute to your button tag.
<button type="submit" class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
I hope this will fix your problem.

Related

laravel livewire upload image error validation

i have the same problem in this issue:
Laravel Livewire File Upload Not Validating and is returning a Livewire\TemporaryUploadedFile instance
i want upload my image path in database product, but i have some error
first in validate file image, missing field image or image required
same error in edit edit view,
but if i push second time the button il all ok and work
this is my controller:
public function store()
{
$data= $this->validate([
'name' => 'required',
// 'detail' => 'required',
//'giac' => 'required',
'classe' => 'required',
'photo' => 'required|image|mimes:jpg,jpeg,png,svg,gif|max:2024', // 1MB Max
]);
// $this->photo->store('documents');
$data['photo']= $this->photo->store('documents');
$filename = $this->photo->store('documents','public');
$data['photo'] = $filename;
$this->photo = $filename;
Product::updateOrCreate(['id' => $this->product_id], [
'name' => $this->name,
// 'detail' => $this->detail,
'giac' =>$this->giac,
'photo' =>$this->photo
]);
//$this->reset();
session()->flash('message',
$this->product_id ? 'Product Updated Successfully.' : 'Product Created Successfully.');
$this->closeModal();
$this->resetInputFields();
}
this is my blade file:
<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>?
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<form>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="">
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Codice:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="minsan">
#error('minsan') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Giacenza:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="giac">
#error('giac') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Descrizione:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="name">
#error('name') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Classe:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="classe">
#error('classe') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<form wire:submit.prevent="uploadImage" enctype="multipart/form-data">
<input type="file" wire:model="photo">
#error('photo') <span class="text-red-500">{{ $message }}</span> #enderror
</form>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Salva
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</form>
</div>
</div>
</div>
</div>
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Crud;
use App\Http\Livewire\Products;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/products', Products::class)->name('products.index');
Route::post('/products', Products::class)->name('products.index');

submit prevent doesn't work laravel livewire

i am doing tutorials doing comments website, i have app layout which yield content and register page the view is working fine but the form in register submit prevent doesnt work it just refresh when submitted.
here are the codes
layout app blade php
`--``
<!DOCTYPE html>
<html lang="en">
<head>
...
#livewireStyles
#livewireScripts
<script src="{{asset('js/app.js')}}"></script>
</head>
<body class="flex flex-wrap justify-center bg-blue-100">
<div class="flex w-full justify-between px-4 bg-purple-900 text-white">
<a class="mx-3 py-4" href="/">Home</a>
<div class="py-4">
<a class="mx-3" href="/login">Login</a>
<a class="mx-3" href="/register">Register</a>
</div>
</div>
<div class="my-10 w-full flex justify-center">
#yield('content')
</div>
<script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks#v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
<script type="module">
import hotwiredTurbo from 'https://cdn.skypack.dev/#hotwired/turbo';
</script>
</body>
</html>
register blade php
#section('content')
<div class="my-10 flex justify-center w-full">
<section class="border rounded shadow-lg p-4 w-6/12 bg-gray-200">
<h1 class="text-center text-3xl my-5">SignUp to Get Started</h1>
<hr>
<form class="my-4" wire:submit.prevent="submit">
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="name" class="p-2 rounded border shadow-sm w-full" wire:model="form.name"
placeholder="Name" />
#error('form.name') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="email" class="p-2 rounded border shadow-sm w-full" placeholder="Email"
wire:model="form.email" />
#error('form.email') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="password" class="p-2 rounded border shadow-sm w-full" placeholder="Password"
wire:model="form.password" />
#error('form.password') <span class="text-red-500 text-xs">{{ $message }}</span> #enderror
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="text" class="p-2 rounded border shadow-sm w-full"
placeholder="Confirm Password" wire:model="form.password_confirmation" />
</div>
</div>
<div class="flex justify-around my-8">
<div class="flex flex-wrap w-10/12">
<input type="submit" value="Register" class="p-2 bg-gray-800 text-white w-full rounded tracking-wider cursor-pointer" />
</div>
</div>
</form>
</section>
</div>
#endsection
this is my first time posting, i searched in a lot of places but didnt find the solution.
it worked when i used #livewire('register') in app layout but if i use that the register page is visible in all other pages when app layout is called
I found the solution,
The problem was i am using the livewire 1.0 code which is '#yield('content')' in app layout, i changed that to '{{ $slot }}' and removed '#section('content')' blade code from my views it worked fine
Check the documentation
https://laravel-livewire.com/docs/2.x/upgrading#route-livewire

Error on input validation even though input exists

I have an application where an user can change his name via a pop-up.
This is the method that handles the name change:
public function changeVorname(Request $request) {
$this->validate($request, [
'vorname' => 'required|max:255',
]);
Portal::query()->where('email', $request->email)->update(['vorname' => $request->neuer_vorname]);
return redirect()->back()->with('message', 'Vorname erfolgreich geändert');
}
This is the blade file with the modal:
<div class="w-1/2 mb-4 pb-3 text-lg">
<p>Vorname:</p>
<input type="text" name="vorname" id="vorname"
value="{{ \Illuminate\Support\Facades\Auth::guard('portal')->user()->vorname }}"
class="flex text-center bg-gray-100 border-gray-500 shadow-2xl
border-opacity-50 border-2 w-full p-4 rounded-lg #error('vorname') border-red-500 #enderror"
readonly>
#error('vorname')
<div class="text-red-500 mt-2 text-sm">
{{ 'Der Vorname darf keine Zahlen enthalten und nicht leer sein' }}
</div>
#enderror
<div class="text-right">
<button id="change_vorname" class="md:pl-2" name="change_vorname">
Vorname bearbeiten
</button>
</div>
</div>
<div id="change_vorname_modal"
class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
<div class="mt-3 text-center text-xl">
Neuer Vorname
</div>
<div class="items-center px-4 py-3">
<label for="neuer_vorname" class="sr-only">Neuer Vorname</label>
<form
action="{{ route('change_vorname', \Illuminate\Support\Facades\Auth::guard('portal')->user()->email) }}"
method="post">
#csrf
<input type="text" name="neuer_vorname" id="neuer_vorname"
placeholder="Neuer Vorname" value=""
class="flex text-center text-sm mb-2 bg-gray-100 border-gray-500 shadow-2xl border-opacity-50 border-2 w-full p-4 rounded-lg">
<button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Vorname ändern
</button>
</form>
</div>
<div class="items-center px-4 py-3">
<button id="back" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
zurück
</button>
</div>
</div>
#if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
#endif
<script>
var vorname_modal = document.getElementById("change_vorname_modal");
var vorname_btn = document.getElementById("change_vorname");
var back_btn = document.getElementById("back");
vorname_btn.onclick = function () {
vorname_modal.style.display = "block";
}
back_btn.onclick = function () {
vorname_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
vorname_modal.style.display = "none";
}
}
</script>
The issue is when I have the required in the request validation I always get the error, when I delete the required everything works perfectly. I need it because a user should not be able to rename his name to an empty one.
You have a mistake on name of new name input. its not same as validators key
change your validator like this
$this->validate($request, [
'neuer_vorname' => 'required|max:255',
]);
it will work

Livewire file upload validation always fails the first time but works the second time

Weird issue with my Livewire: the validation, when I send a file, always fails on the first time. If I have the criteria that it must be a pdf, I will put the PDF, submit the form, get a message telling me I have the wrong format, I won't change anything, resubmit and it will go through with no issue.
Does anyone knows why it might be happening?
<?php
namespace App\Http\Livewire\Branch\Documents;
use App\Models\BranchDocument;
use Livewire\Component;
use Livewire\WithFileUploads;
class Upload extends Component
{
use WithFileUploads;
public BranchDocument $document;
public $file;
public $saved = false;
public function render()
{
return view('livewire.branch.documents.upload');
}
public function save() {
$this->validate([
'file' => 'mimes:jpg,bmp,png,pdf|max:10240', // 1MB Max
]);
$this->document->file = $this->file;
$this->saved = true;
}
}
<div x-data="{ open: false }">
<li class="#if(!$saved) hover:bg-gray-100 py-2 px-2 rounded cursor-pointer #endif" #click="open = true">
<div class="relative">
<div class="relative flex space-x-3">
<div class="min-w-0 flex-1 flex justify-between space-x-4 items-center">
<div>
<p class="text-sm text-porange">{{ $document->document_type->title }}#if($saved)<span class="text-sm text-gray-600"> - {{ __('Document sent!') }}</span>#endif</p>
<p class="text-xs text-gray-600">{{ $document->created_at->diffForHumans() }}</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
#if(!$saved)
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
#else
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
#endif
</svg>
</div>
</div>
</div>
</li>
#if(!$saved)
<div x-show="open" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div #click.away="open = false" class="inline-block align-bottom bg-white rounded-lg px-4 py-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{{ __('Upload ":title"', ['title' => $document->document_type->title])}}
</h3>
</div>
</div>
<form wire:submit.prevent="save">
<input type="file" wire:model="file" class="file-input-business block mx-auto mt-4"/>
#error('file') <span class="error">{{ $message }}</span> #enderror
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="submit" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-porange text-base font-medium text-white hover:bg-porange-darker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:col-start-2 sm:text-sm">
{{ __('Send')}}
</button>
<button #click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:mt-0 sm:col-start-1 sm:text-sm">
{{ __('Cancel')}}
</button>
</div>
</form>
</div>
</div>
</div>
#endif
</div>
Thank you!
Is the file uploaded before you hit submit? If not then the file is null hence the wrong format error. Check its value in the save method before validation. You can also use wire.loading on a div to determine if the file is still uploading.
You may also run into issues with built in artisan development server (the one you start with php artisan serve command). It has different limitations to a 'real' server - upload file size, formats, etc.

How pass the data of a foreach to a modal window?

This is the code that i have in index.blade.php
#foreach ($posts as $item)
<!-- Someting -->
<form name="f" method="POST" action="route...">
#csrf
#method('DELETE')
<button class="modal-open"><i class="fas fa-edit"></i></button>
<!-- Delete button... -->
</form>
#endforeach
How i can open a modal window with the data from $item where i clicked the edit button and not the others? (When i tried the code always give me the data of the frist or the last $item)
Here the modal window code
<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
<span class="text-sm">(Esc)</span>
</div>
<div class="modal-content py-4 text-left px-6">
<form name="form" action="route..." method="GET" class="mt-3">
#csrf
#method('POST')
<br>
<textarea class="bg-gray-300 rounded" name="mensaje" placeholder="{{Here the old data}}" required></textarea>
<input type="hidden" name="foro_id" value="#">
<input type="hidden" name="tema_id" value="#">
<div class="mt-2">
<button type="submit" class="bg-green-300 p-1 rounded">Actualizar Post</button>
</div>
</form>
<div class="flex justify-end pt-2">
<button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
<button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
</div>
</div>
</div>
</div>
Thank you all and sorry for the inconvenience.
You must use JavaScript or JQuery to pass the data to the modal. For my convenience, I am using JQuery. For JQuery, we need to do something like the following-
In index.blade.php
<button class="modal-open" data-item-foro-id="{{ $item->foro_id }}" data-item-tema-id="{{ $item->tema_id }}"><i class="fas fa-edit"></i></button>
//In Modal
............
<input type="hidden" name="foro_id" id="foro_id" value="#">
<input type="hidden" name="tema_id" id="tema_id" value="#">
............
JQuery Code-
<script>
$(document).on("click", ".modal-open", function () {
var foroId= $(this).attr('data-item-foro-id');
var temaId= $(this).attr('data-item-tema-id');
$("#foro_id").val(foroId);
$("#tema_id").val(temaId);
});
</script>
Note: Here, I am providing an example to pass values to the two input fields. If you get the idea from it, you can pass any value to the modal.

Categories