Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

mikepro44

macrumors member
Original poster
May 18, 2008
86
0
Situation summary:

I have a search function in javascript that uses a drop down menu and textfield values from my html. It sends the values to my php and the second javascript function displays the results in a table.

The problem I am facing is that it shows the results for a split second then it seems to reload and it clears. I have an alert that pops up and when it pops up I can see the results, once I click ok then it clears.

Heres my HTML:

HTML:
<body>
<div id="search">
<p> </p>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col"> CARD SEARCH ENGINE</th>
  </tr>
</table>
<table width="408" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th align="center" scope="col"> 
    <form method="post" name="searchcard">
 
<br />
Search:
<select name="card_search" id="card_search">
  <option value="0">Pick search item</option>
  <option value="1">First Name</option>
  <option value="2">Last Name</option>
  <option value="3">Brand</option>
</select>
<input type="text" name="search_field" id="search_field" />
 
  <input type="submit" value="Get" onclick="search_data()"/>
  </form> </th>
  </tr>
</table>
<p></p>
<p> </p>

<div id="cards_div">
 
</div>

</div>



</body>

Here is my Javascript functions:




Code:
var new_search=1;
var new_searchadded=1;


function search_data(new_search,new_searchadded)

{
	var card_search = document.searchcard.card_search;
	
	
	if (card_search.value == 2)
    {
     var search_text = document.getElementById("search_field").value;
	
	
	if(search_text != "")
	{
		xmlDoc.load("get_fields.php?search_field="+search_text);
		read_data();
		alert("worked");
		

    
	}

	}
		
	else
	{
		parent.search_card.document.getElementById("cards_div").innerHTML = "";
		
	}

	

}
	
	


function read_data(id)
{

	 var card_html = '</br></br><label><table width="300" border="1" align="center"><tr><td><b>Player Name</b></td><td><b>Brand Name</b></td><td><b>Year</b></td><td><b>Stock</b></td><td><b>Add Stock</b></td><td><b>Sold Stock</b></td></tr>';
	 
	 var cardsNode = xmlDoc.getElementsByTagName("cards");
	 var cardsList = cardsNode[0].getElementsByTagName("card");
	 for(var i = 0; i < cardsList.length; i++)
	 {
		
		var name = cardsList[i].getElementsByTagName("First")[0].firstChild.nodeValue;
		var name2 = cardsList[i].getElementsByTagName("Last")[0].firstChild.nodeValue;
		var brand = cardsList[i].getElementsByTagName("Brand")[0].firstChild.nodeValue;
		var card_id = cardsList[i].getElementsByTagName("card_id")[0].firstChild.nodeValue;
		var stocks = cardsList[i].getElementsByTagName("stock_num")[0].firstChild.nodeValue;
		var year = cardsList[i].getElementsByTagName("Year")[0].firstChild.nodeValue;
		
		
		
		card_html += '<tr><td><b>'+name+'</b>&nbsp<b>'+name2+'</b></td><td><b>'+brand+'</b></td><td><b>'+year+'</b></td><td><b>'+stocks+'</b></td>';
		card_html += '<td><label><input type="button" name="button2" id="button2" value="Add Stock" onclick="add_stock('+card_id+')"/></label></td>';
		card_html += '<td><label><input type="button" name="button2" id="button2" value="Sold Stock" onclick="sold_stock('+card_id+')"/></label></tr>';
	 }
	 if(cardsList.length == 0)
	 {
		card_html += '<tr><td>No Results</td></tr>'; 
	 }
    	
	
	
	card_html += '</table></label>';
	
	document.getElementById("cards_div").innerHTML = card_html;
	}


Didn't think I'd need to post the PHP since it seems to be pulling the correct info..
 
change <input type="submit" value="Get" onclick="search_data()"/>
to <input type="submit" value="Get" onclick="return false; search_data()"/>

My guess is that you are loading the data on click and then the page gets reloaded by the submit button.
 
change <input type="submit" value="Get" onclick="search_data()"/>
to <input type="submit" value="Get" onclick="return false; search_data()"/>

That won't work, because you do a "return" before the search_data executes.

The better approach is to have an event handler on the onsubmit event. Get rid of the JavaScript on your submit button. On your form tag do,

HTML:
<form method="post" name="searchcard" onsubmit="search_data(); return false;">
 
Oops about the order. Just remember you may have issues if you have more than one button on the form doing a submit if you put the event on the form itself.
 
change <input type="submit" value="Get" onclick="search_data()"/>
to <input type="button" value="Get" onclick="search_data()"/>

when click "submit" button, it will request action page, if it's not defined, then reload current page. "button" button on click will do nothing, you can through "onclick" event to call the function.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.