laravel | ajax, if form incomplete send email

Question

Hello fellow developers,

I am trying to solve a problem I am having and can't seem to find the correct answer a possible link or explanation will be very helpful.

I want to add an ajax function on the email field once the email is entered the name, surname and email should be saved to the database without the submit button being pressed. So that a (complete your form) email can be send 2 hours later.

I am really new to ajax and already using parsley for front end verification

Would anybody be able to assist?

Regards

{{ csrf_field() }}
<div class="form-group">
<label for="`name" class="name">First Name:</label>
<input type="text" name="name" id="name" class="form-control" required=" " 
data-parsley-minlength="6" data-parsley-trigger="blur">
</div>
<div class="form-group">
<label for="surname" class="surname">Surname:</label>
<input type="text" name="surname" id="surname" class="form-control" 
required=" " data-parsley-minlength="6" data-parsley-trigger="blur">
</div>

<div class="form-group">
<label for="email" class="email">Email Address:</label>
<input type="text" name="email" id="email" class="form-control" required=" " 
data-parsley-type="email" data-parsley-trigger="blur">
</div>
<div class="form-group">
<label for="`size" class="size">Size of company:</label>
<input type="text" name="size" id="size" class="form-control" required=" " 
data-parsley-type="integer" data-parsley-trigger="blur">
</div>
<div class="form-group">
<label for="`income" class="income">Income:</label>
<input type="text" name="income" id="income" class="form-control" required=" 
" data-parsley-type="integer" data-parsley-trigger="blur">
</div>
<div class="form-group" style="padding-bottom: 10px">
<label>Position in Company:</label>
<select name="position" id="position" class="form-control" value=" {{ 
old('position') }}" required=" " data-parsley-trigger="blur">
    @foreach(App\Http\Utilities\Position::all() as $position)
        <option value="{{ $position }}">{{ $position }}</option>
    @endforeach
</select>
</div>
<div class="form-group">
<textarea name="message" id="message" class="form-control" rows="4" data-
parsley-maxlength="1000" data-parsley-trigger="blur">Enter text here...
</textarea>
</div>
<div class="form-group">
<label for="path" class="path">Accept Terms and Conditions
<input type="checkbox" name="path" class="form-control" required=" " data-
parsley-trigger="blur"></label>
</div>
<div class="form-group">
<input type="file" class="form-control" name="cv" id="cv" data-parsley-
trigger="blur">
</div>
<button type="submit"class="btn btn-primary">Submit details</button>