eStack's avatar

Searching inside a form without refresh

I have a GET route that echos company names when you enter a business number. For example, when I go to localhost/abn/11111111111 the page would echo JAMES LAWN MOWING COMPANY PTY LTD.

I want to add a field to the registration view “ABN” (Australian Business Number). And a search button next to it. So when the user enters there ABN into the registration form and hits the search button, it should then GET the business name and add it to the company name field on the registration form without refreshing the page. Any ideas?

0 likes
2 replies
rawilk's avatar

You are looking for Ajax. I recommend using axios for making the ajax requests.

2 likes
eStack's avatar

This is where I'm at. When I click search after entering the ABN nothing happens. But if I click search a second time it displays the results in company name field. Then after completing the form and clicking register, nothing happens.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Register - {{ config('app.name')  }}</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>

<form id="register" method="POST" action="{{ route('register') }}">
    @csrf

    <label for="Name"> Name</label>
    <input id="name" type="text" name="name" value="{{ old('name') }}" autofocus>

    <label for="Email"> E-mail Address</label>
    <input id="email" type="email" name="email" value="{{ old('email') }}" autofocus>

    <label for="abn"></label>
    <input id ="abn" type="text" name="abn" placeholder="Search...">
    <input id="abnbtn" type="submit" value="Search">

    <label for="company_name"> Company Name</label>
    <input id="company_name" type="text" name="company_name" value="{{ old('company_name') }}">

    <label for="Password"> Password</label>
    <input id="password" type="password" name="password">

    <label for="Password"> Confirm Password</label>
    <input id="password-confirm" type="password" name="password_confirmation">

    <button type="submit">
        Register
    </button>

</form>

<!-- the result of the search will be rendered inside this div -->
<script>
    $( "#register" ).submit(function( event ) {

    // Stop form from submitting normally
    event.preventDefault();

    $(document).on('click', 'input#abnbtn', function(){

        var dataString = '/' + 'abn='+ $("input#abn").val();
            url = "{{ url('/abn') }}";

        // Send the data using post
        var get = $.get( url + dataString );

        // Put the results in a div
        get.done(function( data ) {
            $('#company_name').val(data);
        });
    })
    $(document).on('click', 'input#submit', function(){
        $.ajax({
            url: "/",
            method: "post",
            data:{company_name: $("input#abn").val()},
            dataType:"text",
            success:function(data){
                alert('Successfully')
            }
        })
    });

    });
</script>

</body>
</html>

Please or to participate in this conversation.