Link to home
Start Free TrialLog in
Avatar of Washcare
WashcareFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Return to TAB on .php Form

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

Avatar of Gary
Gary
Flag of Ireland image

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
Avatar of Washcare

ASKER

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

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.
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
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.
... 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.
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)
Gary: please add a caveat with the // protocol less load of jquery that from file system you MUST add the http: or https:
Sorry, I had to goto bed last night, please see below of the URL:BC_Audit Form
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
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
@ 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.
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
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Why would he be running a php from the filesystem...?
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
Thanks so much!
Should work on the iPhone as is.