6 Replies - 4171 Views - Last Post: 04 December 2012 - 07:40 AM

#1 mklein52  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 31-October 12

creating a search button

Posted 29 November 2012 - 07:26 AM

I have created a document and I need to make a search button for the employees last names I created the search button but I do not have it doing anything yet because I am not sure how to reference the last names for the search button any help would be great

<!DOCTYPE html>
<html>
<head>
<title>TABS</title>
</head>


<script>

var i = 0;
var namearray= new Array();
var lastarray = new Array();
var salaryarray = new Array();

function resetform () {

	var clearfname = document.getElementById('fname');
	clearfname.value = "";
	var clearlname = document.getElementById('lname');
	clearlname.value = "";
	var clearsalary = document.getElementById('salary');
	clearsalary.value = "";
	}

function BlankCheck () {

	var errormessage = "";
	
	
	if (document.getElementById('fname').value == "") {
		errormessage +="Please enter first name. \n";
		document.getElementById('fname').style.borderColor = "red";
		}
	
	if (document.getElementById('lname').value == "") {
		errormessage +="Please enter last name. \n";
		document.getElementById('lname').style.borderColor = "red";
		}
		
	if (document.getElementById('salary').value == "") {
		errormessage +="Please enter salary. \n";
		document.getElementById('salary').style.borderColor = "red";
		}	
		
	if (errormessage != "") {
		alert(errormessage);
		return false;
		}
		
	else {
		alert('Data entered successfully!');
		namearray[i] = (document.getElementById('fname').value);
		lastarray[i] = (document.getElementById('lname').value);
		salaryarray[i] = (document.getElementById('salary').value);
		i++;
		var g=0;
        document.getElementById('output').innerHTML='';	  
			
			for(g=0; g < namearray.length; g++) {
				
				document.getElementById('output').innerHTML = document.getElementById('output').innerHTML + namearray[g]+" " + lastarray[g]+ " " + salaryarray[g] +"<br>";
			 
			  }
		
		var fnamesub = document.getElementById('fname');
		fnamesub.value = "";
		var lnamesub = document.getElementById('lname');
		lnamesub.value = "";
		var salarysub = document.getElementById('salary');
		salarysub.value = "";
	}
	
}

			
		
</script>

<body>



<h1>Enter Employee Information</h1>	
<fieldset>
<label>First Name:
<input type="text" id="fname" name="fname"></label>
<br>
<label>Last Name:
<input type="text" id="lname" name="lname"></label>
<br>
<label>Salary:
<input type ="text" id="salary" name="salary"></label>
<br>
<input type="submit" value="Submit" onclick="BlankCheck();">
<input type="button" value="Clear" onclick="resetform();">
</fieldset>
<h2> Employee Information</h2>

<div id="output"></div>
<h3>Search</h3>


<input type="button" value="Search" onclick=()>



</body>

</html>



Is This A Good Question/Topic? 0
  • +

Replies To: creating a search button

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: creating a search button

Posted 29 November 2012 - 07:28 AM

Hello,

Where is the information for the staff coming from? Are you planning on storing it statically within your Javascript, a file on the server such as CSV or from a database (which would require a server-side script such as PHP to handle)?
Was This Post Helpful? 0
  • +
  • -

#3 mklein52  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 31-October 12

Re: creating a search button

Posted 29 November 2012 - 07:30 AM

Itll just be information that I type in the employee information section
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: creating a search button

Posted 29 November 2012 - 07:54 AM

Hello again,

Well, firstly I will answer your question in a some what raw manner, then I will propose a slightly better solution I think you should adapt towards.

We know your output element will contain all your staff separated by a <br> element, each field of the staff member being separated by a space, so we can work from that. Grab the staff data and stuff it into a variable like so...
var data = document.getElementById('output').innerText;

Why are we using innerText rather than innerHTML? Well, that's because you append a break to the end of every line, including the last one, which will result in an extra result when we dissect it. If we grab the text, we can trim that away easier and as a bonus, we're not dealing with as much data. So, let's split up our data...
var split = data.trim().split("\n");

Here we have the variable split which is an array of strings, each item being a different staff member. Let's loop each one and split up the data!
for (var pointer in split)
		{
			var staffMember = split[pointer].split(" ");
			// staffMember[0] is the first name
			// staffMember[1] is the second name
			// staffMember[2] is the salary
		}

Going forward with this should be quite simple for you to master, I have shown you how to grab all of the data and split it up correctly, morph this into a search function!

As I said at the start of the post, I had a better solution for you. Firstly, instead of putting new lines inside the output array, put new div elements. When you're doing this, store a copy of the data inside an object and append that object to a data array, a small untested example below.
// Make this array available to all your functions
		var staffData = [];
	
		// This is where we put stuff in the output element
		var output = document.getElementById('output'), // The output DIV
			newLine = document.createElement('div'), // A new DIV to put inside
			newID = staffData.length - 1; // A new ID for the array (quick for example)
			
		// Give the new DIV an ID to match the data in the array
		newLine.setAttribute('id', newID);
		
		// Append the staff information to the new DIV
		newLine.innerHTML = namearray[g] + ' ' + lastarray[g] + ' ' + salaryarray[g];
		
		// Store the staff data in the array as an object
		staffData[newID] = {
			firstName: namearray[g],
			secondName: lastarray[g],
			salary: salaryarray[g]
		};
		
		// Shove the new DIV inside the output DIV
		output.appendChild(newLine);

What you should end up with is an array of data matching what is in your output element. All you would need to do to search, is loop through your array and check each lastName value.
Was This Post Helpful? 0
  • +
  • -

#5 mklein52  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 31-October 12

Re: creating a search button

Posted 01 December 2012 - 08:09 PM

Where in my code would I put that data/split stuff? I tried putting it in a few different places, but I couldn't get it to work anywhere. I know why I can't get it to work, but I don't really know what to do to get it to work properly. Thank you
Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: creating a search button

Posted 04 December 2012 - 07:36 AM

Hello again,

You will need to provide me with more information as to why your attempts at doing as I propose did not work. For all I can tell from what you have said is that you copied my code into the middle of yours and expected it to work. (I am not saying you did, it's just that lack luster of details)

Where did you put it? Why did it not work?
Was This Post Helpful? 0
  • +
  • -

#7 mklein52  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 31-October 12

Re: creating a search button

Posted 04 December 2012 - 07:40 AM

this is what i have

<!doctype html>

<html>
<head>
<title>test</title>
</head>

<script>

	var i = 0;
	var namearray = new Array();
	var lastarray = new Array();
	var salaryarray = new Array();
	
	function resetbutton () {
	var x = document.getElementById('fname');
	x.value = "";
	var y = document.getElementById('lname');
	y.value = "";
	var z = document.getElementById('salary');
	z.value = "";
	}
	


	function BlankCheck () {

	var errormessage = "";

	
	if (document.getElementById('fname').value == "") {
		errormessage +="enter your first name \n";
		document.getElementById('fname').style.borderColor = "red";
		}
	
	if (document.getElementById('lname').value == "") {
		errormessage +="enter your last name \n";
		document.getElementById('lname').style.borderColor = "red";
		}
		
	if (document.getElementById('salary').value == "") {
		errormessage +="enter salary \n";
		document.getElementById('salary').style.borderColor = "red";
		}	
		
	if (errormessage != "") {
		alert(errormessage);
		return false;
		}
		
	else {
		alert('thank you');
		namearray[i] = (document.getElementById('fname').value);
		lastarray[i] = (document.getElementById('lname').value);
		salaryarray[i] = (document.getElementById('salary').value);
		i++;
		var g=0;
        document.getElementById('output').innerHTML='';	  
			
			for(g=0; g < namearray.length; g++) {
				
				document.getElementById('output').innerHTML = document.getElementById('output').innerHTML + namearray[g]+" " + lastarray[g]+ " " + salaryarray[g] +"<br>";

				var a = document.getElementById('fname');
				a.value = "";
				var b = document.getElementById('lname');
				b.value = "";
				var c = document.getElementById('salary');
				c.value = "";	  
				}
	
	
			}			
}

var k = 0;
function search() 
{
var data = document.getElementById('output').innerText;
var split = data.trim().split("\n");
var lastcap = document.getElementById('find')

for (var pointer in split)
        {
        var staffMember = split[pointer].split(" ");
		var namefirst = staffMember[0];
		var namelast = staffMember[1];
		var newsal = staffMember[2];
		}
}	
	

</script>



<body>
	<h1>Employee Information</h1>
	
<fieldset>
<label>First Name:
<input type="text" id="fname" name="fname"></label>
<br>
<label>Last Name:
<input type="text" id="lname" name="lname"></label>
<br>
<label>Salary:
<input type ="text" id="salary" name="salary"></label>
<br>
<input type="submit" value="send data" onclick="BlankCheck();">
<input type="button" value="clear" onclick="resetbutton();">
</fieldset>

<input type ="text" id="find" name="find">
	
<div id="output"></div>
<input type="button" value="push" onclick="search();">
	
	
</body>
</html>



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1