-1

I have this code. The error in Chrome is "Uncaught SyntaxError: Invalid or unexpected token".

I'm trying to get data from a form and display it in a div on the same page.

<script type="text/javascript">
function getfromForm()
{
    var name = document.getElementById('name_txtbox').val();
    var number = document.getElementById('phone_txtbox').val();
    var email = document.getElementById('email_txtbox').val();
    var message = document.getElementById('message_txtbox').val();
    console.log(name);
    console.log(number);
    console.log(email);
    console.log(message);
    document.getElementById('name1').html(name);
    document.getElementById('phone1').html(number);
    document.getElementById('email1').html(email);
    document.getElementById('msg1').html(message);
};
​</script>

http://i.imgur.com/Us7RlOv.jpg

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875

1 Answers1

3

Invalid/unexpected tokens

The code in the question has no invalid/unexpected tokens. (Edit: Yes it does, I just didn't copy enough of it.) I can think of two reasons you might be getting that error:

  1. If you have exactly what's in the question (with the script tags) in a .js file you're loading like this:

    <script src="filename.js"></script>
    

    ...then that's the problem: You don't put script tags in JavaScript files. Remove them from the .js file. (Edit: But you've said the error points to the }; at the end of the function, so that's not it.)

  2. You have an invisible character in the code. Specifically, it's just prior to the </script> on the line after the line the browser is complaining about, a U+200B character (zero-width space; these seem to show up a fair bit; JSBin used to insert them in odd places, for instance). Delete that entire line, then retype the </script>.

Other issues

The code does have several problems other than invalid/unexpected tokens:

  • It tries to call undefined as a function (because of the capitalization issue urbz mentioned in the second part of his/her comment): It should be getElementById, not getElementByid.
  • If you fix that, it tries to use a jQuery function on a DOM element, but jQuery functions are only available on jQuery objects, not DOM elements.
  • If you fix that, later on it tries to use another jQuery function (html) on a DOM element.
  • It has an unnecessary (but harmless) ; after the function declaration.

Using jQuery, that code would look like this:

function getfromForm()
{
    var name = $('#name_txtbox').val()
    var number = $('#phone_txtbox').val();
    var email = $('#email_txtbox').val();
    var message = $('#message_txtbox').val();
    console.log(name);
    console.log(number);
    console.log(email);
    console.log(message);
    $('#name1').html(name);
    $('#phone1').html(number);
    $('#email1').html(email);
    $('#msg1').html(message);
}

Not using jQuery, just using the DOM API directly, it would be:

function getfromForm()
{
    var name = document.getElementById('#name_txtbox').value
    var number = document.getElementById('phone_txtbox').value;
    var email = document.getElementById('email_txtbox').value;
    var message = document.getElementById('message_txtbox').value;
    console.log(name);
    console.log(number);
    console.log(email);
    console.log(message);
    document.getElementById('name1').innerHTML = name;
    document.getElementById('phone1').innerHTML = number;
    document.getElementById('email1').innerHTML = email;
    document.getElementById('msg1').innerHTML = message;
}

More to explore:

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875