Submit form in modal

#1

in one livewire blade i have two form (one of them in a modal)
when i submit form in modal , page refreshed
this is my modal :

<div wire.ignore class="modal fade" tabindex="-1" id="showEnterCodeModal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross"></em></a>
        <div class="modal-body modal-body-lg text-center">
            <div class="nk-modal">
                <em class="nk-modal-icon icon icon-circle icon-circle-xxl ni ni-mobile bg-success"></em>
                <h4 class="nk-modal-title">لطفا کد دریافتی را وارد نمایید</h4>
                <form wire:submit.prevent="sendCodeMobile">

                <div class="nk-modal-text">
                    <input type="number" wire:model="mobileCode" id="mobileCode" name="mobileCode" class="form-control"  style="text-align: center;" placeholder="کد تایید ۵ رقمی ارسال شده به تلفن همراه خود را وارد نمایید.">
                </div>
                <div class="nk-modal-action">
                    <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                </div>
                </form>
            </div>
        </div><!-- .modal-body -->
        <div class="modal-footer bg-lighter">
            <div class="text-center w-100">
                <a href="#" id="profile" target="_blank" class="btn btn-round btn-outline-secondary w-150px"><span>ارسال مجدد کد تایید</span></a>
            </div>
        </div>
    </div>
</div>
#2

Could you explain a little about your issue???

#4

@prospero
I have two forms
The first form is without problems
But the second form, which is inside a modal, has a problem. The page is refreshed when the form is submitted
I checked all the codes but did not find the problem

#5

I test your code and all is all right. Just fix the “wire:ignore.self” instead “wire.ignore”

<div>
    <div >
        <button class="btn btn-success" data-toggle="modal" data-target="#showEnterCodeModal" >Open Modal</button>
    </div>
    <div  class="modal fade" tabindex="-1" id="showEnterCodeModal" wire:ignore.self>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross"></em></a>
                <div class="modal-body modal-body-lg text-center">
                    <div class="nk-modal">
                        <em class="nk-modal-icon icon icon-circle icon-circle-xxl ni ni-mobile bg-success"></em>
                        <h4 class="nk-modal-title">لطفا کد دریافتی را وارد نمایید</h4>
                        <form wire:submit.prevent="sendCodeMobile">

                            <div class="nk-modal-text">
                                <input type="number" wire:model="mobileCode" id="mobileCode" name="mobileCode" class="form-control"  style="text-align: center;" placeholder="کد تایید ۵ رقمی ارسال شده به تلفن همراه خود را وارد نمایید.">
                            </div>
                            <div class="nk-modal-action">
                                <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                            </div>
                        </form>
                    </div>
                </div><!-- .modal-body -->
                <div class="modal-footer bg-lighter">
                    <div class="text-center w-100">
                        <a href="#" id="profile" target="_blank" class="btn btn-round btn-outline-secondary w-150px"><span>ارسال مجدد کد تایید</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('custom_scripts')
    <script>
        $(document).ready(function(){
            $("#showEnterCodeModal").on('hidden.bs.modal', function(){
                livewire.emit('onCloseModal');
            });
        });
    </script>
@endsection

API TEST - Google Chrome 2021-05-02 16-28-17

#6

@prospero
It still does not work
I must also say that both forms are in the same blade file, isn’t that a problem?

#7

could you share all the blade and component code too?

#8

@prospero
that is blade :

     <div class="card-inner card-inner-lg h-100">
    <div class="align-center flex-wrap flex-md-nowrap g-3 h-100">
        <div class="nk-block-content">
            <div class="nk-block-content-head">
                <h4>تایید شماره موبایل</h4>
            </div>
            <p>توجه داشته باشید شماره ای که ثبت می کنید بایستی با کدملی که در ادامه ثبت خواهد کرد مطابقت داشته باشد.</p>

            <div class="col-md-12">
                <form wire:submit.prevent="sendCodeMobile">
                    <div class="form-control-wrap">
                        <div class="form-icon form-icon-right">
                            <em class="icon ni ni-mobile"></em>
                        </div>
                        <input type="number"  wire:model="mobileNumber" id="mobileNumber" name="mobileNumber" class="form-control" style="text-align: center;" placeholder="لطفا شماره موبایل خود را وارد نمایید">
                    </div>
                    @error('mobileNumber')
                    <span class="badge badge-dot badge-danger" style="margin-top: 12px;margin-bottom: 12px;">{{ $message }}</span>
                    @enderror
                    <br>
                    <div class="row g-4">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                        </div>
                    </div>
                    <br>
                </form>
                <form wire:submit.prevent="verify">
                    <div class="nk-modal-text">
                        <input type="number" wire:model="mobileCode" id="mobileCode" name="mobileCode" class="form-control"  style="text-align: center;" placeholder="کد تایید ۵ رقمی ارسال شده به تلفن همراه خود را وارد نمایید.">
                    </div>
                    <div class="nk-modal-action">
                        <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div>

    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form wire:submit.prevent="sendCodeMobile">
                        <div class="nk-modal-text">
                            <input type="number" wire:model="mobileCode" id="mobileCode" name="mobileCode" class="form-control"  style="text-align: center;" placeholder="کد تایید ۵ رقمی ارسال شده به تلفن همراه خود را وارد نمایید.">
                        </div>
                        <div class="nk-modal-action">
                            <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<div wire:model.self class="modal fade" tabindex="-1" id="showEnterCodeModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross"></em></a>
            <div class="modal-body modal-body-lg text-center">
                <div class="nk-modal">
                    <em class="nk-modal-icon icon icon-circle icon-circle-xxl ni ni-mobile bg-success"></em>
                    <h4 class="nk-modal-title">لطفا کد دریافتی را وارد نمایید</h4>
                    <form wire:submit.prevent="verify">
                    <div class="nk-modal-text">
                        <input type="number" wire:model="mobileCode" id="mobileCode" name="mobileCode" class="form-control"  style="text-align: center;" placeholder="کد تایید ۵ رقمی ارسال شده به تلفن همراه خود را وارد نمایید.">
                    </div>
                    <div class="nk-modal-action">
                        <button type="submit" class="btn btn-dim btn-outline-primary">ثبت شماره موبایل</button>
                    </div>
                    </form>
                </div>
            </div><!-- .modal-body -->
            <div class="modal-footer bg-lighter">
                <div class="text-center w-100">
                    <a href="#" id="profile" target="_blank" class="btn btn-round btn-outline-secondary w-150px"><span>ارسال مجدد کد تایید</span></a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@push('after-styles')
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
@endpush

and this is component:


<?php

namespace App\Http\Livewire\Frontend;

use App\Domains\Auth\Models\User;
use App\Models\VerificationCode;
use Livewire\Component;

class VerifyNumber extends Component
{
    public $mobileNumber;
    public $mobileCode;
    public function sendCodeMobile()
    {
        $this->validate([
            'mobileNumber' => 'required|ir_mobile',
        ]);
        if ($code = auth()->user()->VerificationCodes()->where('type', 'mobile')->first()) {
            if ($code->number == $this->mobileNumber) {
                // we can use Carbon instance to check if the code has expired
                if ($code->expire_at->isPast()) {
                    // replace the existing code
                    VerificationCode::updateOrCreate([
                        'user_id' => auth()->id(),
                        'type' => 'mobile',
                    ], [
                        'code' => rand(11111, 99999),
                        'expire_at' => now()->addSecond(60),
                    ]);
                    $this->dispatchBrowserEvent('enterCodeModal');
                    $this->dispatchBrowserEvent('swal', [
                        'title' => 'کد تایید با موفقیت ارسال شد.',
                        'timer' => 3000,
                        'icon' => 'success',
                        'position' => 'bottom-end',
                        'toast' => 'true',
                        'showConfirmButton' => false,
                    ]);
                } else {
                    $this->dispatchBrowserEvent('enterCodeModal');
                    $this->dispatchBrowserEvent('swal', [
                        'title' => 'جهت دریافت کد تایید جدید لطفا ۶۰ ثانیه دیگر اقدام کنید.',
                        'timer' => 3000,
                        'icon' => 'info',
                        'position' => 'bottom-end',
                        'toast' => 'true',
                        'showConfirmButton' => false,
                    ]);
                }
            } else {
                VerificationCode::where('user_id', $code->user_id)->update(
                    [
                        'number' => $this->mobileNumber,
                        'code' => rand(11111, 99999),
                        'expire_at' => now()->addSecond(60),
                    ]
                );
                $this->dispatchBrowserEvent('enterCodeModal');
                $this->dispatchBrowserEvent('swal', [
                    'title' => 'کد تایید با موفقیت ارسال شد.',
                    'timer' => 3000,
                    'icon' => 'success',
                    'position' => 'bottom-end',
                    'toast' => 'true',
                    'showConfirmButton' => false,
                ]);
            }
        } else {
            VerificationCode::updateOrCreate([
                        'user_id' => auth()->id(),
                        'type' => 'mobile',
                        'number' => $this->mobileNumber,
                    ], [
                        'code' => rand(11111, 99999),
                        'expire_at' => now()->addSecond(60),
                    ]);
            $this->dispatchBrowserEvent('enterCodeModal');
            $this->dispatchBrowserEvent('swal', [
                'title' => 'کد تایید با موفقیت ارسال شد.',
                'timer' => 2000,
                'icon' => 'success',
                'position' => 'bottom-end',
                'toast' => 'true',
                'showConfirmButton' => false,
            ]);
        }
    }

    public function verify()
    {
        $this->dispatchBrowserEvent('swal', [
            'title' => 'کد تایید با موفقیت ارسال شد.',
            'timer' => 2000,
            'icon' => 'success',
            'position' => 'bottom-end',
            'toast' => 'true',
            'showConfirmButton' => false,
        ]);
    }


    public function render()
    {
        return view('livewire.frontend.verify-number');
    }
}
#9

what do this code? and don’t understand why you have so many forms in the same blade that submit to the same methods

#10

@prospero
for open modal and this is js code

        window.addEventListener('enterCodeModal', event => {
            $('#showEnterCodeModal').modal('show');
        });

The first form to receive the user’s mobile number. When the number was received. The verification code will be sent to the user and in the second form the user must enter the verification code whose form is inside a modal.
I put two forms on the page without modal and it ran without any problems.
But it seems the problem is modal

#11

sorry the late…this was crashed!!!
so, put all that code blade inside a div container, actually isn’t so that’s why on modal submit the browser is refreshing

<div>
//   all the current code here
</div>

API TEST - Google Chrome 2021-05-02 17-30-52

#12

@prospero
now when i want write the verification code in modal form, modal closed ! what happend

#13

fix your modal code

<div wire:ignore.self class="modal fade" tabindex="-1" id="showEnterCodeModal">

instead

<div wire:model.self class="modal fade" tabindex="-1" id="showEnterCodeModal">
#14

this error returned :

 Property [$] not found on component: [frontend.verify-number]
#15

you misunderstood me…use “wire:ignore.self” not “wire:model.self”

1 Like
#16

thanks bro :heart_eyes:

#17

all is working now???

#18

@prospero yes that worked

1 Like
#19

Perfect. Good codding !!! If you can, make this question as solve. Greetings

1 Like