CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 1220

Uncaught SyntaxError: Invalid or unexpected token even with correct syntax

I am trying to grab the username and direct it to another page using javascript in an html page. I am simply following the approach mentioned here , however, I am getting syntax error at the line mentioned below in the code. I have checked the syntax on jQuery API documentation and it looks correct. Could anyone check why it's throwing an error? Also, am I heading in the right direction if I have to redirect the page after submit button is clicked?

<!DOCTYPE html>
<html>
<head>  
<title>Login Page</title>
<style type="text/css">
        html,body{height: 100%; padding:0; margin:0;}
        form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; }
        fieldset{ margin:0;   border:0;padding:0;}
        legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em;  padding:0; }
        label, label+ input {display:inline; float:left;margin-top:1em;}
        label{text-align: right; width:28%; clear: left; margin-top:.8em; }
        label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset;  margin-left: }
        #sub{  margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%}
</style>
</head>
<body>

    <form >
        <fieldset><legend>My Login</legend>
            <label for="name">UserName: </label><input  type="text" name="username" id="username" value="">
            <label for="password">Password: </label><input  type="password" name="password" id="password" >
            <input type="button" name="theButton" value="Submit" class="btn" data-username="username" />
        </fieldset> 
    </form>

<script>

console.log("Am I present?");

$(document).on('click', '.btn', function() {

    console.log("Am I Inside?");

    var name = $(this).data('username');        
    if (name != undefined && name != null) {
        window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name;
    }
});​// Getting Syantax error here at developers console



</script>


</body>
</html>

Upvotes: 0

Views: 2208

Answers (1)

gavgrif
gavgrif

Reputation: 15509

you do not seem to be loading the jquery library into the document:

add this into the head:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

the following is just your existing code with that change (as well as wrapping the click function in a document ready wrapper) and it doesn't error and consoles the message on the button click.

<!DOCTYPE html>
<html>
<head>  
<title>Login Page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
        html,body{height: 100%; padding:0; margin:0;}
        form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; }
        fieldset{ margin:0;   border:0;padding:0;}
        legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em;  padding:0; }
        label, label+ input {display:inline; float:left;margin-top:1em;}
        label{text-align: right; width:28%; clear: left; margin-top:.8em; }
        label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset;  margin-left: }
        #sub{  margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%}
</style>
</head>
<body>

    <form >
        <fieldset><legend>My Login</legend>
            <label for="username">UserName: </label><input  type="text" name="username" id="username" value="">
            <label for="password">Password: </label><input  type="password" name="password" id="password" >
            <input type="button" name="theButton" value="Submit" class="btn" data-username="username" />
        </fieldset> 
    </form>

<script>

console.log("Am I present?");
$(document).ready(function(){
  $(document).on('click', '.btn', function() {
    var name = $('#username').val();
    console.log("Am I Inside?");
    console.log("name: " +name);
    if (name != undefined && name != null) {
        window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name;
    }
  });
 });



</script>


</body>
</html>

Upvotes: 1

Related Questions