File: fwphp/glomodul/oraedoop/enter_tab_emul/enter_tab_emul_v2.php

Recommend this page to a friend!
  Classes of Slavko Srakocic  >  B12 PHP FW  >  fwphp/glomodul/oraedoop/enter_tab_emul/enter_tab_emul_v2.php  >  Download  
File: fwphp/glomodul/oraedoop/enter_tab_emul/enter_tab_emul_v2.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: B12 PHP FW
Manage database records with a PDO CRUD interface
Author: By
Last change: ver 7.0.1 mnu, msg, mkd FUNCTIONAL namespaces, CRUD PDO trait, pretty URL-s
Date: 1 month ago
Size: 11,962 bytes


Class file image Download
// Routing info : see J:\awww\apl\dev1\08ls\info_php.php 
$curpgpath = __FILE__ ; require_once( 
  $_SERVER['DOCUMENT_ROOT'].'/zinc/utl/utls.php'); //or /../zinc/
//$dbi = 'pdo'; // or E. Rangel's pdooci = PDO sintax for oci8 dbi fns
//require_once($CNFGD.$DS.'db'.$DS.'db_conn.php'); // needs c n f variables  

//$ngjs = 'angular.min.js'; $ngapp = 'angularApp'; 
//    $ngctr = 'app.js'; //$ngctr = $curpgd.$DS.'app.js';
//$nginit = 'salary=0;percentage=0';
$title = 'enter_tab_emul';
$title2 = 'enter_tab_emul';
$basecss = $CNFGD.$DS.'cssfmt'.$DS.'style00.css'; 
//$addcss = '<link rel="stylesheet" type="text/css" href="msgboard.css">';
//$addcss2 = ...

<noscript>Your browser does not support JavaScript!</noscript>


<h3>Emulation: Tab -> Enter :&nbsp; JAVASCRIPT</h3>

<!-- novalidate = disable HTML5 automatic form validation,
     so JS can do validation  
     <SCRIPT LANGUAGE='JavaScript'>console.log(flds[0]);</script>
     (onFocus="nextfield ='box002';")
<form name=yourform  id="testform" 
      novalidate />
          <SCRIPT LANGUAGE="JavaScript">
            var fldids = new Array(
 <fieldset><legend>f o r m  name=yourform  id="testform" </legend>
  <div><label for=box001>Box 1 </label><input type=text 
     onkeydown="return myKeyAct(this,event);"
     autofocus /></div>
  <div><label for=box002>Box 2 </label><input type=text 
      name=nameofbox002 id="box002" onkeydown="return myKeyAct(this,event);"

  <div><label for=box003>Box 3 </label><input type=text 
     name=nameofbox003 id="box003" onkeydown="return myKeyAct(this,event);"
     required /></div>
  <div><label for=submit>Spremi tipkom F10 bla, bla </label><input type=submit name=done id="done" value="Spremi (F10)" accesskey="s" title="Klik za bla, bla [F10]" /></div>

<!-- http://dev1:8083/zinc/js/lov/
     <a href=""></a>
     <a href="#anchor_name"></a> TO JUMP TO <a name="anchor_name"></a>
          // set cursor to some form field:
          // SEE autofocus to set cursor to some form field:

<a href="http://dev1:8083/oraed/enter_tab_emul/enter_tab_emul2.html">This page URL</a>
 is script on disk: 
 <br /><br /><p><a href="">Ronnie T. Moore, Web Site:  The JavaScript Source </a>:
<pre>&lt;!DOCTYPE html&gt;<br>&lt;html lang="HR"&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; <br>      charset=utf-8" /&gt;<br><br>      &lt;title&gt;enter_tab_emul&lt;/title&gt;  <br>&lt;!-- <br>HTML5 shiv library is open sourced<br>JS generate elements of the new types, which making MS IE 
prior version 9 recognize, and style them appropriately.<br>--&gt;<br>&lt;!--[if lt IE 9]&gt;<br>&lt;script src=""&gt; <br>p &lt;/script&gt;<br>&lt;![endif]--&gt;<br><br>      &lt;link rel="stylesheet" href="./css/style01.css"&gt;<br>      &lt;link rel="stylesheet" href="./css/xxstyle02_tabs.css"&gt;<br>      &lt;link rel="stylesheet" href="./css/xxstyle02.css"&gt;<br><br><strong>&lt;script src="key_pressed.js"&gt;&lt;/script&gt;</strong><br><br>&lt;SCRIPT LANGUAGE="JavaScript"&gt;<br>&lt;!-- Begin<br>// End --&gt;<br>&lt;/script&gt;<br><br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;noscript&gt;Your browser does not support JavaScript!&lt;/noscript&gt;<br>&lt;table&gt;<br>&lt;tr&gt;<br>&lt;td&gt;<br>&lt;center&gt;<br><br>&lt;h3&gt;Emulation: Tab -&gt; Enter, version 2&lt;/h3&gt;<br><br>&lt;!-- novalidate = disable HTML5 automatic form validation,<br>     so JS can do validation  <br>     &lt;SCRIPT LANGUAGE='JavaScript'&gt;console.log(flds[0]);&lt;/script&gt;<br>     (onFocus="nextfield ='box2';")<br>--&gt;<br>&lt;form name=<strong>yourform</strong>  id="testform" <br>action="file:///J:\awww\apl\dev1\my_dev\enter_tab_emul\enter_tab_emul.html"<br>novalidate&gt;<br>          &lt;SCRIPT LANGUAGE="JavaScript"&gt;<strong>var flds = new Array</strong><br>               'box1','box2','box3'<br>          );&lt;/script&gt;<br> &lt;fieldset&gt;&lt;legend&gt;f o r m  name=yourform  id="testform" &lt;/legen <br>  &lt;div&gt;&lt;label for=box1&gt;Box 1 &lt;/label&gt;&lt;input type=text <br>     name="box1"<br>     id="box1" <br>     <strong>onkeydown="return myKeyAct(this,event)"</strong><br>     autofocus /&gt;&lt;/div&gt;<br>  <br>  &lt;div&gt;&lt;label for=box2&gt;Box 2 &lt;/label&gt;&lt;input type=text <br>      name=box2 id="box2" onkeydown="return myKeyAct(this,event)"<br>  /&gt;&lt;/div&gt;<br><br>  &lt;div&gt;&lt;label for=box1&gt;Box 3 &lt;/label&gt;&lt;input type=text <br>     name=box3 id="box3" onkeydown="return myKeyAct(this,event)"<br>     required /&gt;&lt;/div&gt;<br>  <br>   <br>  &lt;div&gt;&lt;label for=submit&gt;Spremi bla, bla &lt;/label&gt;&lt;input 
     type=submit name=<strong>done</strong> id="done" value="Spremi (F10)" 
     accesskey="s" title="Klik za bla, bla [F10]" /&gt;&lt;/div&gt;<br>  <br> <br>  &lt;/fieldset&gt;<br>&lt;/form&gt;<br>&lt;/center&gt;<br>&lt;!-- <br>  http://dev1:8083/oraed/enter_tab_emul/<strong>enter_tab_emul_v2.html</strong>
  J:\awww\apl\dev1\oraed\enter_tab_emul\enter_tab_emul_v2.html<br>     &lt;a href=""&gt;&lt;/a&gt;<br>     &lt;a href="#anchor_name"&gt;&lt;/a&gt; TO JUMP TO &lt;a name="anchor_name"&gt;&lt;/a&gt;<br>          // set cursor to some form field:<br>          // SEE autofocus to set cursor to some form field:<br>          //eval('document.yourform.b1.focus()');<br>  <br>  http://dev1:8083/my_dev/test/books/a03ullman/modernjs/ch06/employee.html<br>  J:\awww\apl\dev1\my_dev\test\books\a03ullman\modernjs\ch06<br>  file:///J:/awww/apl/dev1/my_dev/test/books/predlozak/predlozak02_PgBreak_OpenClose.html<br>--&gt;<br>  &lt;/td&gt;<br>  &lt;/tr&gt;<br>&lt;/table&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br></pre>&nbsp;&nbsp;
<pre>// J:\awww\apl\dev1\oraed\enter_tab_emul\<strong>key_pressed.js</strong><br>  //var flds = new Array('box1','box2','box3');<br>  <br>    function <strong>msg</strong>(t1,t2,t3,t4,t5,t6,txt_srvgen) { <br>       //document.getElementById('div_srvgen').innerHTML = txt_srvgen; <br>       alert(t1+"\n"+t2+"\n"+t3+"\n"+t4+"\n"+t5+"\n"+t6+"\n"+txt_srvgen); <br>    } <br><br>  function <strong>myKeyAct</strong>(field, evt) <br>  {<br>    if (evt.keyCode === 13) {<br>       // keypressed is ***enter key : goto next/first form field*** :<br>       if (evt.preventDefault) evt.preventDefault(); <br>       else if (evt.stopPropagation) evt.stopPropagation(); <br>       else evt.returnValue = false;<br><br>       var fname      =; //var fieldid =;<br>       var fnamenxt   = '0';<br>       var fcount     = flds.length;<br>       var flastordno = fcount - 1 ;<br>       <br>      for ( var ii = 0; ii &lt; fcount; ii++) {<br>         //msg('fname=',fname,'ii=',ii,'flds[ii]=',flds[ii],'') ;<br>      <br>        if (fname == flds[ii]) {<br>           <strong>// 1. all before last jump on NEXT :</strong><br>           if (ii &lt; flastordno) {fnamenxt = flds[++ii]; break; }<br>           <strong>// 2. last jumps on FIRST:</strong><br>           else { fnamenxt = flds[0]; break; }<br>        } <strong>// e n d  f o u n d  i n  f o r m  f l d s  a r r</strong> <br>      } <strong>// e n d  through f l d s</strong><br>       <br>               // ***UNCOMMENT THIS FOR TESTING*** :<br>               //document.write('&lt;hr /&gt;2. JS SAYS:&lt;br/&gt;' <br>               //  +'fname='+fname+'&lt;br/&gt;'+' nxtfname='+nxtfname+'&lt;hr/&gt;' <br>               //);<br>      if (fnamenxt) document.getElementById(fnamenxt).focus(); <br>      return false; // ignore keypressed<br>    //<br>    } <br>    else {<br>       // keypressed is ***not enter key*** :<br>       return true; // standard browser processing of keypressed<br>    }<br>  } // e n d  f n  my Key Action<br><br></pre>
<h2>Code snippets</h2>
<p>There are <strong>elements</strong> such as &lt;input/&gt; and <strong>containers</strong> like   &lt;form&gt; &lt;/form&gt;  Each element can have <strong>attributes</strong> associated   with it, such as: eg &lt;input/&gt; element has three attributes: <em>type</em>, <em>name</em> and <em>id</em></p>
<pre><strong>var inputs = document.getElementsByTagName("input");</strong><br>var message =<br>"Form has following <strong>input elements with 'type' attribute = 'text'</strong>: \n\n";<br>for (var i=0; i &lt; inputs.length; i++)<br>{<br><br>   if (inputs[i].getAttribute('type') == 'text')<br>   {<br>      message += inputs[i].tagName +<br>      " element with the 'name' attribute = '";<br>      message += inputs[i].getAttribute('name') + "'\n";<br>   }<br>}<br>alert(message);</pre>
  <strong>Toggle  visibility of the form</strong> by accessing  form   element &lt;form&gt;  and setting its <em>display</em> property:</p>
<pre class="brush: jscript; title: ; toolbar: false; notranslate" title="">var frm_element = document.getElementById('subscribe_frm');<br><br>var vis =;<br><br>if (vis.display=='' || vis.display=='none')<br>{<br>    vis.display = 'block';<br>}<br>else<br>{<br>    vis.display = 'none';<br>}
  var name_element = document.getElementById (&lsquo;txt_name&rsquo;);</p>
  <pre class="brush: jscript; title: ; notranslate" title="">if (trim(name_element.value) == '')
  {     alert ('Please enter your name');  } 

function trim (str)  {
       return str.replace (/^\s+|\s+$/g, '');  } </pre>
<p>To get a reference to the &lt;select&gt; element with the name attribute <em>mail_format</em>.</p>
  <pre class="brush: xml; title: ; toolbar: false; notranslate" title="">&lt;select name="mail_format" id="slt_mail_format"&gt;
  &lt;option value="TEXT"&gt;Plain Text&lt;/option&gt;
  &lt;option value="HTML"&gt;HTML&lt;/option&gt;  &lt;/select&gt;  </pre>
<p>We could access  desired element in this way:</p>
  <pre class="brush: jscript; title: ; toolbar: false; notranslate" title="">var mail_format_elements = document.getElementsByName('mail_format');  </pre>
<p>Here is a DIFFERENT IDEA for Tab - Enter: </p>
  <li> change <strong>on submit so that it calls fn</strong> instead of processing form </li>
  <li> in function <strong>check all the fields to see if they are blank</strong></li>
  <li> <strong>focus on  next blank field</strong> (that doesn't have a value)</li>
  <li> 1 to 3 when script runs (in runtime) behaves so :<br>
    user types a value into field1 -&gt;
    hit enter -&gt; function runs<br>
    -&gt; Fn sees that field1 is full, 2 isnt, so focus on field 2 <br>
    -&gt; when all fields are full, submit form for processing </li>
<p>If form has fields that can be blank, you could use a boolean array 
  that would keep track of which fields received focus using onfocus() event. </p>

<!--script src="../key_pressed.js"></script-->
<script src="/zinc/js/key_pressed.js"></script>

<!-- Begin
// End -->

For more information send a message to info at phpclasses dot org.