CODEWITHSUNDEEP
javascriptphphtmllaravelaction
A.J
A.J

Reputation: 1180

Open a modal before sending form-data Laravel

I am trying to present the user with a terms and conditions modal before registering them.

Blade

<form method="POST" autocomplete="signupForm-noFill" action={{url("/register")}}>
    {{ csrf_field() }}
    <div class="form-group text-center signupForm">
        <input type="email" name="email" class="form-control text-center loginForm" id="signup-email" autocomplete="no-Thanks" placeholder="Email Address">
    </div>
    <div class="form-group text-center signupForm">
        <input type="password" name="password" class="form-control text-center loginForm" id="signup-password" autocomplete="please-No" placeholder="Password">
    </div>
    <div class="form-group text-center" style="display:inline-block; margin-bottom:20px;">
    {!! Recaptcha::render() !!}
    </div>
    <div class="form-group text-center" style="">
        <button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
    </div>
</form>

JavaScript

$('#registerButton').click(function() {
    $("#legalModal").modal("show");
    return false; 
});

$('#acceptTerms').click(function() {
    // Submit form data to {{url("/register")}}  
    return false; 
});

Modal Button

<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>

The issue is that I am not sure how to go back to the form's action and submit its data.

I tried passing the variables to the JavaScript functions but I can't seem to have it submit to the actual controller.

Edit

<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>

Upvotes: 0

Views: 925

Answers (1)

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7923

You just need to submit the form using js

Blade:

<form id="my_form" method="POST" autocomplete="signupForm-noFill" action={{url("/register")}}>
    {{ csrf_field() }}
    <div class="form-group text-center signupForm">
        <input type="email" name="email" class="form-control text-center loginForm" id="signup-email" autocomplete="no-Thanks" placeholder="Email Address">
    </div>
    <div class="form-group text-center signupForm">
        <input type="password" name="password" class="form-control text-center loginForm" id="signup-password" autocomplete="please-No" placeholder="Password">
    </div>
    <div class="form-group text-center" style="display:inline-block; margin-bottom:20px;">
    {!! Recaptcha::render() !!}
    </div>
    <div class="form-group text-center" style="">
        <button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
    </div>
</form>

JS:

$('#registerButton').click(function() {
    $("#legalModal").modal("show");
    return false; 
});

$('#acceptTerms').click(function() {
    $('#my_form').submit(); 
});

Upvotes: 1

Related Questions