Почему ajax перезагружает страницу?

Question

[Александр Шведов]

отправляю форму все нормально но страница перезагружается хотя я использую ajax почему

<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>

Comments

[Михаил]

$('form').submit

[Алексей Уколов]

Скорее всего, у вас какая-то ошибка в скрипте возникает и обработчик либо не ставится совсем, либо не срабатывает. Посмотрите консоль браузера, там должно быть написано что случилось.
Laravel тут, конечно, ни при чём.

Answer 1

[Александр Шведов]

Решение понизить версию jquery

Answer 2

[Iovan]

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

Укажи type = 'button'

Comments

[Алексей Уколов]

e.preventDefault();
Действие по-умолчанию отменяется, так что тип не важен, по идее.

[Александр Шведов]

Алексей Уколов, а что тогда как делать чтобы небыло перезагрузки

Answer 3

[alex-1917]

На вашей кнопке button не указан ТИП!! слямзил код не знаю где ПАМАГИТЕЕЕ ???
У вас e.preventDefault(); на кнопке - это ниочем - форма также отправится ванильным способом после ввода текста в инпут и нажатия на энтер...
Ставьте e.preventDefault(); на форму.

Вместо этого:

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

вот это:

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

И вместо этого
$(".btn-submit").click(function(e){
вот это:
$("form").submit(function(e){

Или если хочешь привязать именно к клику по кнопке (тогда можно кнопку вообще вне формы разместить), тогда вот так, длиннее и корявее:

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

Comments

[Александр Шведов]

Я не настолько туп и могу читать чужой код проблема была в библиотеке я поменял версию и все для справки e.preventDefault(); отключает любой обработку кнопки даже если бы у меня там был submit он бы не помог