Solved

Return to TAB on .php Form

Posted on 2013-06-12
18
494 Views
Last Modified: 2013-06-13
Hello

Please see the attached code for a simple form, it has the following fields:

Cabinet_Name
Cabinet_U_Height
Make
Model

The form works correct, the problem I have is that I want to use a handheld scanner for the input, which automatically insets a return, which submits the form.

I have looked at using JavaScript to change the event, but cannot get the code to work with the form.

Thank you

<?PHP
/*
Simfatic Forms Main Form processor script

This script does all the server side processing. 
(Displaying the form, processing form submissions,
displaying errors, making CAPTCHA image, and so on.) 

All pages (including the form page) are displayed using 
templates in the 'templ' sub folder. 

The overall structure is that of a list of modules. Depending on the 
arguments (POST/GET) passed to the script, the modules process in sequence. 

Please note that just appending  a header and footer to this script won't work.
To embed the form, use the 'Copy & Paste' code in the 'Take the Code' page. 
To extend the functionality, see 'Extension Modules' in the help.

*/

@ini_set("display_errors", 1);//the error handler is added later in FormProc
error_reporting(E_ALL & ~((defined('E_STRICT')?E_STRICT:0)|E_NOTICE));

require_once(dirname(__FILE__)."/includes/BC_Audit-lib.php");
$formproc_obj =  new SFM_FormProcessor('BC_Audit');
$formproc_obj->initTimeZone('default');
$formproc_obj->setFormID('a407bf43-6ad9-4502-b439-3a85797ff480');
$formproc_obj->setFormKey('b43c10ec-9b85-41a9-b56d-0f88794cfa74');
$formproc_obj->setLocale('en-GB','dd/MM/yyyy');
$formproc_obj->setEmailFormatHTML(true);
$formproc_obj->EnableLogging(false);
$formproc_obj->SetDebugMode(true);
$formproc_obj->setIsInstalled(true);
$formproc_obj->SetPrintPreviewPage(sfm_readfile(dirname(__FILE__)."/templ/BC_Audit_print_preview_file.txt"));
$formproc_obj->SetSingleBoxErrorDisplay(true);
$formproc_obj->setFormPage(0,sfm_readfile(dirname(__FILE__)."/templ/BC_Audit_form_page_0.txt"));
$formproc_obj->AddElementInfo('Cabinet_Name','text','');
$formproc_obj->AddElementInfo('Cabinet_U_Height','text','');
$formproc_obj->AddElementInfo('Make','text','');
$formproc_obj->AddElementInfo('Model','text','');
$formproc_obj->setIsInstalled(true);
$formproc_obj->setFormFileFolder('./formdata');
$formproc_obj->setFormDBLogin('mysql5.websitelive.net','BC_Audit','D5608D1A739C6C2AD564C73D02EE3A89','BC_Audit');
$formproc_obj->SetHiddenInputTrapVarName('t86c5cff731eb00b53f02');
$page_renderer =  new FM_FormPageDisplayModule();
$formproc_obj->addModule($page_renderer);

$admin_page =  new FM_AdminPageHandler();
$admin_page->SetPageTemplate(sfm_readfile(dirname(__FILE__)."/templ/BC_Audit_admin_page_templ.txt"));
$admin_page->SetLogin('BC_Audit','D5608D1A739C6C2AD564C73D02EE3A89');
$admin_page->SetLoginTemplate(sfm_readfile(dirname(__FILE__)."/templ/BC_Audit_admin_page_login.txt"));
$formproc_obj->addModule($admin_page);

$validator =  new FM_FormValidator();
$validator->addValidation("Cabinet_Name","required","Please fill in Cabinet_Name");
$validator->addValidation("Cabinet_U_Height","required","Please fill in Cabinet_U_Height");
$validator->addValidation("Cabinet_U_Height","numeric","The input for Cabinet_U_Height should be a valid numeric value");
$validator->addValidation("Make","required","Please fill in Make");
$validator->addValidation("Model","required","Please fill in Model");
$formproc_obj->addModule($validator);

$csv_maker =  new FM_FormDataCSVMaker(1024);
$csv_maker->AddCSVVariable(array('Cabinet_Name','Cabinet_U_Height','Make','Model'));
$formproc_obj->addModule($csv_maker);

$s_db_handler =  new FM_SimpleDB('BC_Audit');
$s_db_handler->AddField('Cabinet_Name','VARCHAR(50)');
$s_db_handler->AddField('Cabinet_U_Height','INT');
$s_db_handler->AddField('Make','VARCHAR(50)');
$s_db_handler->AddField('Model','VARCHAR(50)');
$formproc_obj->addModule($s_db_handler);

$tupage =  new FM_ThankYouPage(sfm_readfile(dirname(__FILE__)."/templ/BC_Audit_thank_u.txt"));
$formproc_obj->addModule($tupage);

$uniqueid_s =  new FM_ShortUniqueID('BC_Audit');
$formproc_obj->AddExtensionModule($uniqueid_s);
$page_renderer->SetFormValidator($validator);
$formproc_obj->ProcessForm();

?>

Open in new window

0
Comment
Question by:Washcare
  • 8
  • 7
  • 2
  • +1
18 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39242906
Cannot see any FORM in the code but you would normally add

onkeypress="return event.keyCode != 13;"

to the form element then the form can only be submitted by clicking the submit button
0
 

Author Comment

by:Washcare
ID: 39242949
GaryC123

Thank you for your comment, am I right in thinking that this will effectively void the return? In which case the next input box will not be selected?

I have had a look at the other code files which  Simfatic Forms creates, and I am wondering if it this code which needs amend?

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
   <head >
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
      <title >Form Page: BC_Audit</title>
      <script src='scripts/gen_validatorv5.js' type='text/javascript'></script>
      <script src='scripts/sfm_moveable_popup.js' type='text/javascript'></script>
      <script src='scripts/sfm-png-fix.js' type='text/javascript'></script>
      <link rel='stylesheet' type='text/css' href='style/BC_Audit.css'/>
   </head>
   <body style='background-color:transparent'>
      <form id='BC_Audit' method='post' action='%sfm_self_script%' accept-charset='UTF-8'>
         <div id='BC_Audit_errorloc' class='error_strings' style='width:300px;text-align:left'>%sfm_error_display_loc%</div>
         <div id='BC_Audit_outer_div' style='width:300px;height:400px'>
            <div style='position:relative' id='BC_Audit_inner_div'>
               <input type='hidden' name='sfm_form_submitted' value='yes'/>
               <div id='Cabinet_Name_container'>
                  <input type='text' name='Cabinet_Name' id='Cabinet_Name' value='%Cabinet_Name%' size='20' class='sfm_textbox'/>
               </div>
               <div id='Cabinet_U_Height_container'>
                  <input type='text' name='Cabinet_U_Height' id='Cabinet_U_Height' value='%Cabinet_U_Height%' size='20' class='sfm_textbox'/>
               </div>
               <div id='Make_container'>
                  <input type='text' name='Make' id='Make' value='%Make%' size='20' class='sfm_textbox'/>
               </div>
               <div id='Model_container'>
                  <input type='text' name='Model' id='Model' value='%Model%' size='20' class='sfm_textbox'/>
               </div>
               <div id='Submit_container'>
                  <input type='image' name='Submit' id='BC_Audit_Submit_img' src='images/BC_Audit-Submit-0.png' alt='submit'/>
               </div>
            </div>
         </div>
      </form>
      <script type='text/javascript'>
// <![CDATA[
sfm_fix_png("BC_Audit_Submit_img","images/spacer.gif");
if(document.sfm_after_load != undefined){document.sfm_after_load();}

// ]]>
      </script>
      <script type='text/javascript'>
// <![CDATA[
var BC_AuditValidator = new Validator("BC_Audit");

BC_AuditValidator.EnableOnPageErrorDisplay();
BC_AuditValidator.SetMessageDisplayPos("right");

BC_AuditValidator.EnableMsgsTogether();
BC_AuditValidator.addValidation("Cabinet_Name","req","Please fill in Cabinet_Name");
BC_AuditValidator.addValidation("Cabinet_U_Height","req","Please fill in Cabinet_U_Height");
BC_AuditValidator.addValidation("Cabinet_U_Height","numeric","The input for Cabinet_U_Height should be a valid numeric value");
BC_AuditValidator.addValidation("Make","req","Please fill in Make");
BC_AuditValidator.addValidation("Model","req","Please fill in Model");

// ]]>
      </script>
   </body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39242967
Yes it will disable using the return key in a form.

In which case the next input box will not be selected?
??? The return key would not pass focus to the next input anyway.

You would add the keypress above to the form element (as in the code you posted above) - this has nothing to do with PHP.

I know nothing about scanners so this is based on pure programming logic.
Maybe there is a way to change the scanner to send a TAB command instead of the RETURN command

Edit
A quick google search says it is possible depending on the scanner - lots of people asking.
If not with your scanner then we could amend the keyup, put it into a function and if the return key is detected then throw a tab response to your page - but if you can change the scanner then that would the most simple way to do it.
0
 

Author Comment

by:Washcare
ID: 39242984
GaryC123

Thank you, I am trying to code around the problem (if possible) as I cannot change the scanner settings. I'm also not a programmer, hence the use of a program to create the form.

So can I disable the return input, and also have a piece of code which would pass the focus on to the next input?

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39243042
Afraid I'm gonna have to resort to jQuery for this - if you're happy with that then
Add a reference to the jquery library in your head section e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


Before your closing BODY tag add

<script>
$('input').keypress(function(e) {
      if (e.keyCode==13) {
            e.preventDefault()
            $(this).next('input').focus();
      }
})
</script>


If you're happy using jquery I'll leave it at that else I'll try coding a vanilla javascript version tomorrow.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39243043
... disable the return input, and also have a piece of code which would pass the focus...
Probably. Can you please post a link to the page in question so we can see the JS and the HTML?  I'm pretty sure GaryC123 is on the right track.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39243051
Was going to edit to say, with plain old javascript I couldn't get a proper index that worked in all browsers, that's why I went with jQuery which worked out of the box for the index (or at least to move focus forward)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39243397
Gary: please add a caveat with the // protocol less load of jquery that from file system you MUST add the http: or https:
0
 

Author Comment

by:Washcare
ID: 39243622
Sorry, I had to goto bed last night, please see below of the URL:BC_Audit Form
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:Washcare
ID: 39243655
GaryC123

I have managed to add your code, which disables the return key (on my PC, not been able to test with the scanner yet), but does not move to the next input field have I misunderstood your code?

 $(this).next('input').focus();

Thanks
0
 

Author Comment

by:Washcare
ID: 39243705
Can know confirm that the code also works with the scanner, but with the current input box remaining the focus and not moving onto the next?

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39244507
@ mplungjan
Gary: please add a caveat with the // protocol less load of jquery that from file system you MUST add the http: or https:
What do you mean? That's a perfectly valid format.

Looking at the code now.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39244536
If you have
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
the code is not loading if you test from file system.
It MUST be
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
while you test from file system since it will become
<script src="file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

and fail
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39244590
Change the script block to

<script>
$('input').keypress(function(e) {
      if (e.keyCode==13) {
            e.preventDefault()
            $(this).parent().next('div').find('input').focus();
      }
})
</script>
Also add a div container to
<div><input type='text' name='t86c5cff731eb00b53f02' id='t86c5cff731eb00b53f02'/></div>

Still half asleep to think thru the logic yet.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39244609
Why would he be running a php from the filesystem...?
0
 

Author Comment

by:Washcare
ID: 39244683
GaryC123

Thank you so much for all your help. The solution I have accepted works as requested for keyboard input on the PC and via the Scanner on the PC!

I will raise a new question with regards to getting the same idea to work on webpage running on my iphone.

Thank you
0
 

Author Closing Comment

by:Washcare
ID: 39244685
Thanks so much!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39244704
Should work on the iPhone as is.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
This article will show, step by step, how to integrate R code into a R Sweave document
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to dynamically set the form action using jQuery.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now