Javascript problem.

Discussion in 'Web Design and Development' started by mikepro44, Mar 6, 2010.

  1. mikepro44 macrumors member

    Joined:
    May 18, 2008
    #1
    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..
     
  2. joelypolly macrumors 6502

    Joined:
    Sep 14, 2003
    Location:
    Melbourne & Shanghai
    #2
    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.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    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;">
     
  4. mikepro44 thread starter macrumors member

    Joined:
    May 18, 2008
  5. joelypolly macrumors 6502

    Joined:
    Sep 14, 2003
    Location:
    Melbourne & Shanghai
    #5
    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.
     
  6. imredkid macrumors newbie

    Joined:
    Mar 8, 2010
    #6
    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.
     

Share This Page