[FIXED] When i call ajax it reloads the window

Issue

When I call ajax to submit form data it reloads the window. how can I stop it?

This is a registration code for customer. I am using a modal to submit data. Please give me some solution for this problem.

My HTML

<form  id="newregister">
<div class="form_content clearfix">

    <div class="form-group">
        <label for="firstname">First Name</label>
        <input type="text" class="form-control" " id="firstname_page" name="firstname_page" required>
    </div>

    <div class="form-group">
        <label for="lastname">Last Name</label>
        <input type="text" class="form-control" " id="lastname_page" name="lastname_page"  required>
    </div>
    <div class="form-group">
        <label for="compnay_name">Company Name</label>
        <input type="text" class="form-control" id="compnay_name" name="compnay_name"   required>
    </div>
    <div class="form-group">
        <label for="country_name">Country Name</label>
        <input type="text" class="form-control" id="country_name" name="country_name"   required>
    </div>
    <div class="form-group">
        <label for="email_create">Email address</label>
        <input type="text" class="form-control" id="email_create" required name="email_address_page" >
    </div>
    <div class="form-group">
        <label for="phone_no">Phone No</label>
        <input type="number" class="form-control" id="phone_no"  required name="phone_no" >
    </div>

    <div class="form-group">
        <label for="passwd">Password</label>
        <input class="form-control" type="password"  id="password_page" name="password_page" >
    </div>

    <div class="form-group">

        <button class="btn btn-default button button-medium exclusive" id="SubmitCreates" onclick="newRegister()"> <span>
            <i class="icon-user left"></i>Create an account </span>
        </button>
    </div>
</div>
</form>

My Javascript

function newRegister()
{
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url:'{{ route('web.new.register') }}',
        data:$("#newregister").serialize(),
        type:'post',
        success:function(response)
        {
            alert(response);
        }
    });
}

My Controller

public function newregister(Request $request)
{
    return response()->json('true');
}

I also used this jquery method.

My HTML

<div class="form-group">
    <button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" onclick="DoLogin()"> <span>
        <i class="icon-user left"></i>Login </span>
    </button>
</div>

My Jquery

$(document).ready(function(){
    $('#SubmitCreates').on('click', function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url:'{{ route('web.new.register') }}',
            data:$("#newregister").serialize(),
            type:'post',
            success:function(response)
            {
                alert(response);
                return false;
            }
        });
    });
});

but this also not working. Please give me some hint or solution to solve this problem.

Solution

You need to prevent default button behavior: https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault

function newRegister(clickEvent)
{
    clickEvent.preventDefault();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url:'{{ route('web.new.register') }}',
        data:$("#newregister").serialize(),
        type:'post',
        success:function(response)
        {
            alert(response);
        }
    });
}

Answered By - zlodes

Answer Checked By - Katrina (PHPFixing Volunteer)