I have a form that contains an email input and a submit button. On Iphone, when I type something on email and delete it, button slide down a little bit. I use tailwind css and what causes this problem?
<form wire:submit.prevent="submit">
<span class="inline-grid">
<input type="text" name="email" wire:model.defer="email" class="form-control relative flex-auto desktop:rounded-lg below-desktop:rounded placeholder-gray-300 desktop:h-14 below-desktop:h-8 xl:w-72 small-desktop:w-60" placeholder="{{__('E-mail')}}" aria-label="Search" aria-describedby="button-addon2" style="border-radius: 4px;">
</span>
<button type="submit" class="bg-blue-400 text-base desktop:rounded-lg below-desktop:rounded text-white desktop:h-14 below-desktop:h-8 px-6 desktop:ml-2 xl:w-32 small-desktop:w-24" style="border-radius: 4px;">{{ __('Send') }}</button>
</form>
Related
I have created a form that uses formsubmit.co to forward the message to my email account. When I tested it on my local computer using VS Code and Live Server it worked flawlessly. After I uploaded to the web it only partially works. I get the message data but lose the name and email data. Formsubmit activated successfully in both cases.
Here is my code:
<form
action="https://formsubmit.co/john.herring#hrtinspection.ca"
method="POST"
>
<div class="input-group">
<input name="name" type="text" id="name" required />
<label for="name"><i class="fa-solid fa-user"></i> Name: </label>
</div>
<div class="input-group">
<input name="email" type="email" id="email" required />
<label for="email"
><i class="fa-solid fa-envelope"></i> Email:
</label>
</div>
<div class="input-group">
<textarea
name="message"
id="message"
cols="35"
rows="8"
required
></textarea>
<label for="message">
<i class="fa-solid fa-comment"></i> Details:
</label>
</div>
<button type="submit">
<i class="fa-sharp fa-solid fa-paper-plane"></i> Send
</button>
</form>
I have tried removing the icons, changing the order the attributes are listed in, and deleting and replacing the file on the server.
this is my email form
<form action="https://gmail.us11.list-manage.com/subscribe/post?u=XXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll" style="display: flex;flex-direction: row;">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fb16c0b54b243c41cf0ba431c_6cbe3da72c" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="rehab-btn-secondary">Send</button>
</div>
</div>
</div>
</form>
however if I input "aaa" as email address which is wrong. I am getting this error
Which obviosly breaks our UI,
by checking on the HTML in dev tools, it creates a new div with id "mce-inline-error"
out of the blue, how can i control this error so i can style it properly in our UI?
This is getting annoying google cant give me answer.
If there are no answers, what type of work around can you guys suggest?
<jet-button class="bg-green-600 m-auto"
#click="creatingProductCategory = true"
>Create New</jet-button>
<jet-dialog-modal :show="creatingProductCategory" #close="creatingProductCategory = false">
<template #title>Create New Product</template>
<template #content>
<form #submit.prevent="submit">
<div>
<jet-label for="email" value="Product Category"/>
<select name="" id=""
class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
>
<option value="1">Macrame</option>
<option value="2">Coords</option>
<option value="3">Plant</option>
<option value="4">Accessories</option>
</select>
</div>
<div class="mt-4">
<jet-label for="email" value="Product Name"/>
<jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email"
placeholder="Enter Product Name"
required autofocus/>
</div>
<div class="mt-4">
<jet-label for="password" value="Price"/>
<jet-input id="password" type="password" class="mt-1 block w-full"
placeholder="Enter Price"
v-model="form.password" required autocomplete="current-password"/>
</div>
<div class="flex items-center justify-end mt-4">
<jet-button class="ml-4" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing">
Create
</jet-button>
</div>
</form>
</template>
</jet-dialog-modal>
This is the button component i have used that comes within jetstream templates.
But when i click the button the value of the variable 'creatingProductCategory' doesnt change.
Iam missing something important here !
Also if you have links to some good documentation it would be of great help :)
As Rwd mentiond in comment you need to add .native to #click:
<jet-button type="button" #click.native="someFunction" class="mr-4">
press button
</jet-button>
I got a simple way around it.
<button class="bg-green-600 m-auto inline-flex items-center px-4 py-2 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150"
#click="creatingProductCategory = true"
>Create New</button>
I used generic html5 buttons and gave it the class that was being used in jetstream buttons . It loooks exactly the same and the click handler works now
I have a form in razor page with 2 button.
<form method="post" class="form-group ">
<div class="form-group col-md-3">
<div class="input-group">
<input asp-for="DoctorViewModel.NationalCode" class="form-control" type="text" maxlength="10" required onblur="">
<div class="input-group-append">
<button class="btn btn-outline-primary " asp-page-handler="GetInfo" >search</button>
</div>
</div>
<span asp-validation-for="DoctorViewModel.NationalCode"></span>
</div>
.
.
<div class="form-group col-md-2">
<label asp-for="DoctorViewModel.Name" class="col-form-label"></label>
<input asp-for="DoctorViewModel.Name" class="form-control" type="text" maxlength="50" required>
<span asp-validation-for="DoctorViewModel.Name"></span>
</div>
.
.
.
.
<input type="submit" class="btn btn-success" value="Save"/>
</form>
and when click on search button i wants to load form info from a handler.
but when click this button get validation error.
How i can disable validation check for only search button. in asp.net form i used CauseValidation=false.
To skip validation while still using a submit-button, you can try to add the attribute formnovalidate :
<button class="btn btn-outline-primary" formnovalidate asp-page-handler="GetInfo">search</button>
The default type for a button is to submit the form it is contained within in most browsers.
You simply need to add a type of button and this should stop the submit and therefore the automatic validation will not trigger.
<button class="btn btn-outline-primary " type="button" asp-page-handler="GetInfo" >search</button>
I am trying to edit existing post using CKeditor. Content isn't loading.
<div class="form-group">
<label>Content</label>
<textarea id="editor1" name="content" class="form-control" rows="3" placeholder="Enter ...">
{{ Request::old('content') }}
</textarea>
</div>
Also im having trouble getting date from the database too.
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="date" name="published_at" class="form-control" value="{{ $post->published_at->format('M jS Y') }}">
</div>
For the textarea, check for old input, but fall back to defaulting to using the model's content attribute (the post's content)
<textarea ....>{!! Request::old('content', $post->content) !!}</textarea>
For your date issue, I don't know what problem you are having.