Printing data using JavaScript taken from HTML

Question

I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:

[17:40:27.073] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html

Please explain what this means of if there is some mistake in my code. Heres my code

HTML:

<!doctype html>
<html>

 <head>
    <title>TakeMeHome</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type='text/javascript' src='js/app.js'></script>

  </head>

  <body>
    <center><form id="details">
      Your Place:<input id="source" type="text"><br><br>
      Friend1:<input id="friend1" type="text"><br><br>
      <div id="friends"></div>
      <div id="button">Add!</div><br><br>

       <input type="submit" value="go">
    </form>
  </body>

</html>

jQuery:

 var j=2;
var friends = [];


$(document).ready(function(){

    $('#button').click(function(){
      if(j<11){
          $('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>'); 
        j++;
      }
     else
      {
     alert("Limit reached");
   }
    });



});


$("form").submit(function(){

    friends[0] = ('#source').val();
    for(var i=1;i<j;i++)
    {
        friends[i] = ('#friends'+i+'').val();
    }

    console.log(friends);
});

Bilal lilla · Accepted Answer · 2013-01-19 12:34:36Z

1

your code is working perfectly you can see it from this console.log is good for debuging but i prefer you to use firebug for debuging. Using firebug you can debug each and every line and you can also view the values of each variable. I am using firebug with firefox. You can download firebug for firefox from that link .I hope that it helps you.

answered Jan 19, 2013 at 12:34

Bilal lilla

6583 gold badges9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1263375 Over a year ago

hey i am looking at the jsfiddle. the alert i get says "fired" every time. But it should show the list of friends that i enter. Why isnt that coming ?

Bilal lilla Over a year ago

i updated the fiddle now it will provide you the friends in var f. I also did some changes in <html> too. now it will provide you all the text boxes and you can get the value form each text box..jsfile

user1263375 Over a year ago

still i am not getting the list !

Bilal lilla Over a year ago

in alert you see the number of controls and it is providing you correct count. f is the number of friends text boxes

user1263375 Over a year ago

i dont want the number of friends, i want all my inputs to be displayed. Now when i change the line 19 in js to console.log(f);it just shows me object,object. But i want what i entred. are you getting ?

defau1t · Accepted Answer · 2013-01-19 12:21:48Z

1

The error has nothing to do with JavaSCript.

If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.

I also see the you have a type in doctype declaration.

answered Jan 19, 2013 at 12:21

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

4 Comments

user1263375 Over a year ago

but whenever i try this in my browser, i am not getting an alert with all the friends name i entered. ?

defau1t Over a year ago

that is because you have errors in your js, One of the error is see is that you have multiple jquery files included. Including different versions of jquery on same page may cause conflicts.

user1263375 Over a year ago

which one should i remove ?

defau1t Over a year ago

any one, but that doesn't mean it will fix. there can be other issues.

Boaz · Accepted Answer · 2013-01-19 12:40:27Z

1

This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.

The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:

<head>
    ...
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    ...
</head>

Since your doctype is HTML5, you can also use the charset attribute:

<head>
    ...
    <meta charset="UTF-8">
    ...
</head>

edited Jan 19, 2013 at 12:40

answered Jan 19, 2013 at 12:21

Boaz

20.3k9 gold badges69 silver badges74 bronze badges

Collectives™ on Stack Overflow

Printing data using JavaScript taken from HTML

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related