Uncaught SyntaxError: Invalid or unexpected token even with correct syntax

Question

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>

gavgrif · Accepted Answer · 2016-12-01T05:42:41.223

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>

Thanks very much. That worked and it's redirecting also. But on the redirect URL I see `http://localhost/local/RegistryWS/src/main/webapp/home.html?username=username`. Could you tell me why it's not catching the username I am entering in the form? Is there something wrong with `data-username="username"` ? — John, Dec 01 '16 at 02:38
oh - just realised thats because the name variable is trying to find the data attribute from the button click. Change that in the js to get the value of the username input and it should work. will update my answer when I get a sec. — gavgrif, Dec 01 '16 at 04:06
updated the answer so it should now pick p the value of the name and apply that. Also noted that you are not using the correct name for the for="" on the name input. — gavgrif, Dec 01 '16 at 05:19

Uncaught SyntaxError: Invalid or unexpected token even with correct syntax

1 Answers1