-4

I want to write a HTMl page using javascript, in which an Array will store some values. There will be a text box on the screen.

User need to enter a value in the text box. If that values is there in the array. Then it should display "Value is there in the array" or else not found.

<html>
<head>
<script>
var cars = ["abc", "def", "ghi","jkl"];
</script>
</head>

<body>
Enter a value <input type="text"><br>
</body>
</html>
Muneeb K
  • 457
  • 1
  • 9
  • 21
  • 1
    How are you assigning the value of input box to array? Can you show your code.. – The Guest Apr 09 '15 at 15:54
  • 1
    how about some code? – DLeh Apr 09 '15 at 15:54
  • its just examplee ... i didnt write any code. Am really starting . – Muneeb K Apr 09 '15 at 15:58
  • 1
    Well what problems are you having? Question seems far too premature if you haven't done anything yet and haven't isolated an actual problem. SO isn't a sounding board for how to get started. In fact there isn't even a question here – charlietfl Apr 09 '15 at 16:03
  • Added my code n edited the question – Muneeb K Apr 09 '15 at 16:16
  • [indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) – epascarello Apr 09 '15 at 16:22
  • possible duplicate of [Javascript: Determine whether an array contains a value](http://stackoverflow.com/questions/1181575/javascript-determine-whether-an-array-contains-a-value) – DanielST Apr 09 '15 at 18:58

2 Answers2

2

Look, my personal tip would be learning JavaScript. MDN has a great tutorial in JavaScript. Check it here.

Now, answering your question:

First, you'll need to have an event to detect text changes. We'll be using the HTML onchange event.

We can use jQuery's $.inArray() method, for not using loops. You'll also have to add an ID to your element.

Full solution:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<p>Enter a value: <input type="text" id="carInput" onchange="textChanged()"></p>
<p id="onListText"></p>
<script>
var cars = ["abc", "def", "ghi","jkl"];
var textChanged = function(){
  var inputText = $("#carInput").text();
  if($.inArray(inputText, cars) !== -1){
    $("#onListText").text("Yes sir, this car is in our list! :D");
    return;
  }
}
</script>
</body>
</html>
Gabriel Tomitsuka
  • 1,121
  • 10
  • 24
  • Am not getting any output ? – Muneeb K Apr 09 '15 at 17:05
  • @gabriel in case you are thinking of why #indexOf is better: http://jsperf.com/in-array-vs-inarray-vs-indexof – Calvintwr Apr 09 '15 at 18:43
  • @Calvintwr `Array.prototype.indexOf()` is not available in IE 8 or inferior. This was asked for some sort of homework, clearly(he mentioned the instructor's requirements). And school teachers often use IE8. – Gabriel Tomitsuka Apr 10 '15 at 09:01
0

I see you are a beginner to JS and HTML.

Firstly, no you do not need AJAX for this. Secondly, I advise that you try to implement something really simple called List.js.

I selected this for you because I think it is simple enough.

This should get you started.

Air
  • 8,274
  • 2
  • 53
  • 88
Calvintwr
  • 8,308
  • 5
  • 28
  • 42
  • It is an assignment. The instructor told to use AJAX :( – Muneeb K Apr 09 '15 at 16:35
  • @MuneebK Do you even know what AJAX is? If so, where will you be getting your data from? – Gabriel Tomitsuka Apr 09 '15 at 16:39
  • Then you could use listjs for AJAX as well. I suggest you go through the basics of it first, which is using a static JS array like you did. After you are done with it, you can use AJAX to retrieve JSON data and initialise your list. Good luck. – Calvintwr Apr 09 '15 at 16:39