Add/Insert user input into database return filter 1

[notsoevilgenius]

Hello! Can anyone help me add a user input to filter mysql database return. Right now I'm using alphabet buttons to filter the table return of a list of names from a donor table. They work great and I'd like to keep them.

<script>
var btns = "";
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letterArray = letters.split("");
for(var i = 0; i < 26; i++){
    var letter = letterArray.shift();
    btns += '<button class="mybtns" onclick="alphabetSearch(\''+letter+'\');">'+letter+'</button>';
}
function alphabetSearch(let){
window.location = "donorList.php?letter="+let;
}
</script>

The user would like an either AND process where in addition to being able to click a button like say J and return Jackson, Jason, Jenson and Johnson, but to also be able to enter in ja and return Jackson and Jason or type in jac and return Jackson.

The php/mysql code (I don't think this needs to change)

<?php 
  
   $letter = "";
     if(isset($_GET['letter']) && strlen($_GET['letter']) == 1){
      $letter = preg_replace('#[^a-z]#i', '', $_GET['letter']);
	 }

  	$sql = "SELECT * FROM donors WHERE lastname LIKE [b]'$letter%'[/b] ORDER BY lastname, firstname";
    $result = mysql_query($sql) or die(mysql_error());
    ?>
  
   <h4>Donor List</h4>
   <p style="margin-left:25px;"> Clicking on an A thru Z button will return names that start with that letter.</p>
   <p style="margin-left:25px;"> Clicking on a table column header will sort the entire list by that heading.</p>
   <p style="margin-left:25px;">[b]<script> document.write(btns);</script>[/b]

  <table...

Thanks!

 

[mikrom]

IMO you could add user input box in HTML without need to use JavaScript, i.e. directly using on submit your PHP-function

<form action="donorList.php"> 
   <label id ="searchlabel">Enter search string: 
     <input id ="searchbox" type="text" name="letter">
   </label>    
   <input type="submit" value="Find">     
</form>

or if you need/want to use the step with your existing Javascript function alphabetSearch(let) then something like this:

<form> 
   <label id ="searchlabel">Enter search string: 
     <input id ="searchbox" type="text" name="letter">
   </label>    
   <input type="button" value="Find using JS" onclick="jsSearch()">   
</form>
   
<script type="text/javascript">
   function alphabetSearch(let){
     window.location = "donorList.php?letter="+let;
   }   

   function jsSearch() {
     var searchbox = document.querySelector('#searchbox');
     var str = searchbox.value;
     // call search function
     alphabetSearch(str);
   }
</script>

 

[notsoevilgenius]

Thanks for your help!

I'm a little slow at this so please be patient...

I've have the script near the top of my page...

<script>
var btns = "";
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letterArray = letters.split("");
for(var i = 0; i < 26; i++){
    var letter = letterArray.shift();
    btns += '<button class="mybtns" onclick="alphabetSearch(\'+letter+'\');">'+letter+'</button>';
}
function alphabetSearch(let){
window.location = "donorList.php?letter="+let;
}
[COLOR=#EF2929][b]function jsSearch() {
     var searchbox = document.querySelector('#searchbox');
     var str = searchbox.value;
     // call search function
     alphabetSearch(str);
   }[/b][/color]

</script>

And way down in line 131 I start with my php

    <?php 
  
   $letter = "";
     if(isset($_GET['letter']) && strlen($_GET['letter']) == 1){
      $letter = preg_replace('#[^a-z]#i', ', $_GET['letter']);
	 }

  	$sql = "SELECT * FROM donors WHERE lastname LIKE '$letter%' ORDER BY lastname, firstname";
    $result = mysql_query($sql) or die(mysql_error());
    ?>
  
   <h4>Donor List</h4>
   <p style="margin-left:25px;"> Clicking on an A thru Z button will return names that start with that letter.</p>
   <p style="margin-left:25px;"> Clicking on a table column header will sort the entire list by that heading.</p>
   <p style="margin-left:25px;"><script> document.write(btns);</script></p>
[COLOR=#EF2929][b]   <form style="margin-left:25px;"> 
   	<label id ="searchlabel">Enter search string: 
     <input id ="searchbox" type="text" name="letter">
    </label>    
     <input type="button" value="Find Donor" onclick="jsSearch()">   
   </form>[/b][/color]
  <table class="example table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate    table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" id="t1">
  <thead>
    <tr>
        <th class="table-sortable:default" title="Click to sort"></th>
        <th class="table-sortable:default" title="Click to sort">Memeber
        <th class="table-sortable:default" title="Click to sort">Annual</th>
        <th class="table-sortable:default" title="Click to sort">Auction</th>
        <th class="table-sortable:default" title="Click to sort">Artifact</th>
        <th class="table-sortable:default" title="Click to sort">Fund</th>
        <th class="table-sortable:default" title="Click to sort">Greeting</th>
        <th class="table-sortable:default" title="Click to sort">First Name</th>
        <th class="table-sortable:default" title="Click to sort">Last Name</th>
        <th class="table-sortable:default" title="Click to sort">Company</th>
        <th class="table-sortable:default" title="Click to sort">Email</th>
        <th class="table-sortable:default" title="Click to sort">Phone</th>
        <th class="table-sortable:default" title="Click to sort">Fax</th>
        <th class="table-sortable:default" title="Click to sort">Address</th>
        <th class="table-sortable:default" title="Click to sort">City</th>
        <th class="table-sortable:default" title="Click to sort">State</th>
        <th class="table-sortable:default" title="Click to sort">Zip</th>
        <th class="table-sortable:default" title="Click to sort">Note</th>
    </tr>
  </thead>
 <tbody>

 <?php 
    $texts[0] = 'No';
    $texts[1] = 'Yes';
		
    while($row = mysql_fetch_array($result))
  {  
  
 ?>
       
 <tr>
     <td><a href=deleteDonor.php?id=<?php echo $row['donor_id'];?>>Delete</a></td>
     <td><?php echo $texts[$row['am']]?></td>
     <td><?php echo $texts[$row['aa']]?></td>
     <td><?php echo $texts[$row['au']]?></td>
     <td><?php echo $texts[$row['ad']]?></td>
     <td><?php echo $texts[$row['fd']]?></td>
     <td><?php echo $row['greeting']?></td>
     <td><?php echo $row['firstname']?></td>
     <td><a href=donorDetails.php?id=<?php echo $row['donor_id'];?>><?php echo $row['lastname']?></a></td>
     <td><?php echo $row['company']?></td>
     <td><?php echo $row['eMail']?></td>
     <td><?php echo preg_replace("/([0-9]{3})([0-9]{3})([0-9]{4})/", "($1) $2-$3", $row['phone'])?></td>
     <td><?php echo preg_replace("/([0-9]{3})([0-9]{3})([0-9]{4})/", "($1) $2-$3", $row['fax'])?></td>
     <td><?php echo $row['address1']?></td>
     <td><?php echo $row['city']?></td>
     <td><?php echo $row['state']?></td>
     <td><?php echo $row['zip']?></td>
     <td><?php echo $row['note']?></td>
  </tr>
  <?php 
  
  }
  ?>

On the search button click the page refreshes, but nothing changes.

 

[notsoevilgenius]

I had to also modify the php code removing the strlen to make it work.

   $letter = "";
     if(isset($_GET['letter']) && strlen($_GET['letter']) == 1){
      $letter = preg_replace('#[^a-z]#i', '', $_GET['letter']);
	 }

Thanks for your help!