A
A
Alexander Shvedov2019-07-24 14:14:35
AJAX
Alexander Shvedov, 2019-07-24 14:14:35

Why does ajax reload the page?

I submit the form everything is fine but the page reloads although I use ajax why

<form>
    <div class="form-group">
        <label for="name">Имя</label>
        <input type="text" name="name" class="form-control">
        <div>{{$errors->first('name')}}</div>
    </div>
    <div class="form-group">
        <label for="family">Фамилия</label>
        <input type="text" name="family" class="form-control">
        <div>{{$errors->first('family')}}</div>
    </div>
    <div class="form-group">
        <label for="phone">Номер</label>
        <input type="text" name="phone" class="form-control">
        <div>{{$errors->first('phone')}}</div>
    </div>
    <div class="form-group">
        <label for="levelStudy">Уровень образования</label>
        <select name="levelStudy" id="levelStudy" class="form-control">
            <option value="Bachelor">Bachelor</option>
            <option value="Master">Master</option>
            <option value="PhD">PhD</option>
        </select>
        <div>{{$errors->first('levelStudy')}}</div>
    </div>
    <button class="btn btn-success btn-submit">Submit</button>
</form>
<div class=" message alert alert-success" role="alert">
    <strong>Well done!</strong> You success <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="errors alert alert-danger" role="alert">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(".btn-submit").click(function(e){
    e.preventDefault();
    var name = $("input[name=name]").val();
    var family = $("input[name=family]").val();
    var phone = $("input[name=phone]").val();
    var levelStudy = $("select[name=levelStudy]").val();
    $.ajax({
        type:'POST',
        url:'/taskone',
        data:{name:name, family:family, phone:phone,levelStudy:levelStudy},
        success:function(data){
            alert(data.success);
        }
    });
});
</script>

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Alexander Shvedov, 2019-07-24
@constintmid

Solution to downgrade jquery version

C
Chris, 2019-07-24
@tv_dakota

<button class="btn btn-success btn-submit">Submit</button>

Specify type = 'button'

A
Alex-1917, 2019-07-24
@alex-1917

Your button has no TYPE specified!! слямзил код не знаю где ПАМАГИТЕЕЕ???
You have e.preventDefault(); on the button - this is nothing - the form will also go in the vanilla way after entering text into the input and pressing enter ...
Set e.preventDefault(); to the form.
Instead of this:
this:
And instead,
this:
Or if you want to bind it to a button click (then you can place the button outside the form altogether), then like this, longer and clumsier:

$("#FORMA").submit(function(e){
    return false;
});
$( "#KNOPKA" ).click(function() {
    $( "#FORMA" ).submit();
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question