CODEWITHSUNDEEP
javascripthtml
mtmx
mtmx

Reputation: 947

JS scripts in external file: ReferenceError: function is not defined

I have following problem: This is my register.html file with register scripts included

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Customer registration</title>
    <script type="text/javascript" src="register.js"></script>
</head>
<body>



        <legend>Customer Registration</legend>
        <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4">
                <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label">Last Name</label>
            <div class="col-md-4">
                <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="email">Email</label>
            <div class="col-md-4">
                <input id="email" name="email" type="text" placeholder="[email protected]" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-4">
                <input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-8">
                <input type="button" value="Register" id="registerBtn" onclick="prepareRegisterData()" class="btn btn-info btn-block">
            </div>
        </div>



</body>
<script type="text/javascript">
    function prepareRegisterData() {
        let registerData = {
            firstname: $('#firstname').val(),
            lastname: $('#lastname').val(),
            email: $('#email').val(),
            password: $('#password').val()
        };
        register(registerData);
    }

    function register(data) {
        $.ajax({
            url: "http://localhost:8080/customer",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function() {
                alert("Successfully registered");
            },
            error: function() {
                alert("Registration error")
            }
        })
    }
</script>
</html>

Everything works ok, but i want to create js file with my function. I import my script in between head tags in register.html:

<script type="text/javascript" src="register.js"></script>

and move scripts from script tags in html to register.js file:

function prepareRegisterData() {
    let registerData = {
        firstname: $('#firstname').val(),
        lastname: $('#lastname').val(),
        email: $('#email').val(),
        password: $('#password').val()
    };
    register(registerData);
}

function register(data) {
    $.ajax({
        url: "http://localhost:8080/customer",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function() {
            alert("Successfully registered");
        },
        error: function() {
            alert("Registration error")
        }
    })
}

Now if i click register button in console i have

ReferenceError: prepareRegisterData is not defined

Maybe You know what I missed here?

Upvotes: 1

Views: 994

Answers (1)

mtmx
mtmx

Reputation: 947

Ok, project structure is reason. I have my .js files under WEB-INF directory, now i have js directory above WEB-INF and everything works Thanks for help :)

Upvotes: 1

Related Questions