TechQA.

How focus last input edited after submit form with jQuery

1.6k views Asked by At

I made a website where I have a table with more than 13,000 records, I'm trying to put a filter where each letter user enters site refresh to filter records with this letter, but the field loses focus on submit.

how can I solve this?

I tried to use cookie following example of sephiith question, but it still fails. Example how i submit:

$(function() {
  $('input').keyup(function() {
    this.value = this.value.toLocaleUpperCase();
    this.form.submit();
  });
});

Code of Page

<?php
session_start();
if (!isset($_SESSION['LOGIN'])) {
  header("location: index.php");
}

include("config.php");
require("rep.php");

if (isset($_SESSION['active']) && (time() - $_SESSION['active'] > 1800)) {
  session_unset();
  session_destroy();
}
$_SESSION['active'] = time();
?>
<html>
  <head>
    <? include("meta.txt"); ?>
    <title><? echo $config[TITLE]; ?></title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style type="text/css">
      <!--
        @import url("<? echo $config[CSSFORM]; ?>");
        @import url("<? echo $config[CSS]; ?>");
      -->
    </STYLE>
    <script language="javascript" type="text/javascript" src="<? echo $config[JAVASCRIPT]; ?>"></script>
    <script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
    <script language="javascript" type="text/javascript">
      $(function() {
        $("input").keyup(function(e) {
          var code = (e.keyCode ? e.keyCode : e.which);
          this.value = this.value.toLocaleUpperCase();
          if ( code == 13 ) {
            this.form.submit();
          }
        });
      });
    </script>
  </head>
  <body onload="showGMTDateTime()">
    <center>
      <!-- begin -->
      <div id="begin">
        <!-- Banner -->
        <? include("includes/banner.php"); ?>
        <!-- Menu -->
        <? include("includes/menu/menu01.html"); ?>
        <!-- Msg -->
        <? include("includes/msg.php"); ?>
        <div class="DivCad">
          <h1 class="prod" align="center">List of Produts</h1>
          <?php
            $rep      = new Rep();
            $GProd = $rep->SelectProd(0, 0, 0, $sql);
            if (!$GProd) {
              echo "<h4>List of Produts empty!</h4>";
            } else {
              $sql = "";
              $get = "";
              If ( $_REQUEST['group'] ) {
                $sql.= "   AND (GROUP LIKE '%".$_REQUEST['group']."%')";
                $get.= "&group=" . $_REQUEST['group'];
              }
              If ( $_REQUEST['model'] ) {
                $sql.= "   AND (MODEL LIKE '%".$_REQUEST['model']."%')";
                $get.= "&model=" . $_REQUEST['model'];
              }
              If ( $_REQUEST['line'] ) {
                $sql.= "   AND (LINE LIKE '%".$_REQUEST['line']."%')";
                $get.= "&line=" . $_REQUEST['line'];
              }
              If ( $_REQUEST['Prod'] ) {
                $sql.= "   AND (PROD LIKE '%".$_REQUEST['Prod']."%')";
                $get.= "&Prod=" . $_REQUEST['Prod'];
              }
              If ( $_REQUEST['desc'] ) {
                $sql.= "   AND (DESC LIKE '%".$_REQUEST['desc']."%')";
                $get.= "&desc=" . $_REQUEST['desc'];
              }
          ?>
          <table id="Prod">
            <form id="frmprodut" name="frmprodut" method="post" action="Prod.php">
              <thead>
                <tr>
                  <th width="30" align="center">
                    <input type="text" name="group" value="<?php echo $_REQUEST['group']; ?>" class="inputs" size="2" maxlength="4" placeholder="Group">
                  </th>
                  <th width="30" align="center">
                    <input type="text" name="model" value="<?php echo $_REQUEST['model']; ?>" class="inputs" size="9" maxlength="9" placeholder="Model">
                  </th>
                  <th width="30" align="center">
                    <input type="text" name="line" value="<?php echo $_REQUEST['line']; ?>" class="inputs" size="9" maxlength="9" placeholder="Line">
                  </th>
                  <th width="200" align="center">
                    <input type="text" name="Prod" value="<?php echo $_REQUEST['Prod']; ?>" class="inputs" size="15" maxlength="15" placeholder="Prod">
                  </th>
                  <th width="420" align="left">
                    <input type="text" name="desc" value="<?php echo $_REQUEST['desc']; ?>" class="inputs" size="20" maxlength="30" placeholder="Desc">
                  </th>
                  <th width="10" align="center">
                    <img alt="Add Filter" src="./imagens/filter_add.png" width="16" height="16" onclick="$('#frmprodut').submit()">
                  </th>
                  <th width="10" align="center">
                    <img alt="Clear Filter" src="./imagens/filter_del.png" width="16" height="16" onclick="javascript:window.location='Prod.php'; $('#frmprodut')[0].reset();">
                  </th>
                </tr>
              </thead>
            </form>
            <thead>
              <tr>
                <th align="center">Group</th>
                <th align="center">Model</th>
                <th align="center">Line</th>
                <th align="center">Prod</th>
                <th colspan="3" align="left">Desc</th>
              </tr>
            </thead>
            <tbody>
            <?php
              $GProd = $rep->SelectProd(0, 0, 0, $sql);

              $page     = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1;
              $numLine   = 1;
              $GTotal     = count($GProd);
              $reg  = 20;
              $next       = $page + 1;
              $prev        = $page - 1;
              $numpages = ceil($GTotal / $reg);
              $last  = $numpages - 1;
              $adjacent = 2;
              $begin     = ($reg * $page) - $reg;

              $AProd = $rep->SelectProd(1, $inicio, $reg, $sql);
              $TNow= count($AProd);

              for ($i = 0; $i < $TNow; $i++) {
                $Prod = new Prod($AProd[$i]['GROUP'], $AProd[$i]['MODEL'], $AProd[$i]['LINE'], $AProd[$i]['PROD'], $AProd[$i]['DESC']);
                if (($numLine % 2) == 0) {
                  echo "<tr>";
                } else {
                  echo "<tr class=\"alt\">";
                }
                echo "<td align=\"center\">" . $Prod->GetGroup() . "</td>";
                echo "<td align=\"center\">" . $Prod->GetModel() . "</td>";
                echo "<td align=\"center\">" . $Prod->GetLine() . "</td>";
                echo "<td align=\"left\">" . $Prod->GetProd() . "</td>";
                echo "<td align=\"left\" colspan=\"3\">" . $Prod->GetDesc() . "</td>";
                echo "</tr>";
                $numLine++;
              }
            ?>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="7">
                  <div id="paging">
                    <ul>
                    <?php
                      if ($page > 1) {
                        $pagination = "<li><a href=\"Prod.php?page=" . $prev . $get ."\">Prev</a></li>";
                      }

                      if ($numpages <= 5) {
                        for ($i = 1; $i < $numpages + 1; $i++) {
                          if ($i == $page) {
                            $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
                          } else {
                            $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
                          }
                        }
                      }

                      if ($numpages > 5) {
                        if ($page < 1 + (2 * $adjacentes)) {
                          for ($i = 1; $i < 2 + (2 * $adjacentes); $i++) {
                            if ($i == $page) {
                              $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
                            } else {
                                $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
                            }
                          }
                          $pagination .= "<li class=\"dot\">...</li>";
                          $pagination .= "<li><a href=\"Prod.php?page=" . $last . $get . "\">".$last."</a></li>";
                          $pagination .= "<li><a href=\"Prod.php?page=" . $numpages . $get . "\">".$numpages."</a></li>";
                        } elseif ($page > (2 * $adjacentes) && $page < $numpages - 3) {
                          $pagination .= "<li><a href=\"Prod.php?page=1\">1</a></li>";
                          $pagination .= "<li><a href=\"Prod.php?page=2\">2</a></li>";
                          $pagination .= "<li class=\"dot\">...</li>";
                          for ($i = $page - $adjacentes; $i <= $page + $adjacentes; $i++) {
                            if ($i == $page) {
                              $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
                            } else {
                              $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
                            }
                          }
                          $pagination .= "<li class=\"dot\">...</li>";
                          $pagination .= "<li><a href=\"Prod.php?page=" . $last . $get . "\">".$last."</a></li>";
                          $pagination .= "<li><a href=\"Prod.php?page=" . $numpages . $get . "\">".$numpages."</a></li>";
                        } else {
                          $pagination .= "<li><a href=\"Prod.php?page=1\">1</a></li>";
                          $pagination .= "<li><a href=\"Prod.php?page=2\">2</a></li>";
                          $pagination .= "<li class=\"dot\">...</li>";
                          for ($i = $numpages - (4 + (2 * adjacentes)); $i <= $numpages; $i++) {
                            if ($i == $page) {
                              $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
                            } else {
                              $pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
                            }
                          }
                        }
                      }

                      if ($next <= $numpages && $numpages > 2) {
                        $pagination .= "<li><a href=\"Prod.php?page=" . $next . $get . "\">Next</a></li>";
                      }
                      echo $pagination;
                    ?>
                    </ul>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
          <?php } ?>
        </div>
      </div>
    </center>
  </body>
</html>
jquery html cookies jquery-cookie
Original Q&A
2

There are 2 answers

5
durian On BEST ANSWER

Try to do it with ajax so the page wont refresh at all, it seems not practical to refresh the whole page at on letter press:

Html:

<input type="text" id="field"/>
<div id="showContent"></div>

jQuery:

function findWithLetter(){
    $("#field").on("keyup",function(e){
        var Val = $(this).val();
        $.post("url\to\php",{Val:Val},function(answer){
            $("#showContent").html(answer);
        });      
    });
}

PHP:

$val = $_POST['Val'];
$ans = "";

$query = $mysqli->query("SELECT * FROM `table` WHERE name LIKE '$val%'");
while($row = $query->fetch_object()){
    $ans.="<div>$row->name</div>";
}
echo $ans;
0
A dev On

As you said, site refresh so I think focus the field on dom ready.

$(function() {
  if($('input').val().length > 0){
    $('input').focus();
    }
});

Related Questions in JQUERY

Related Questions in HTML

Related Questions in COOKIES

Related Questions in JQUERY-COOKIE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions