Event handler and script location questions....

[blarney]

ANY help would be greatly appreciated!!!!

Okay, I have a script that I think should work, but I can't get it to function....Here it is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$("#caspioform").submit( function()
{
    var selectedopts = $('[name=cbParamVirtual1]').getChildren();
    for(i=0;i<selectedopts.length;i++)
    {
        if(selectedopts[i].val() == '')
        {
            return false;
        }
    }
});
</script>

The script is trying to validate the input (into a text field via barcode scanner) against a hidden dropdown (virtual field "cbParamVirtual1")....

Event handler question/issues:

• CURRENTLY, the barcode scanner, as it scans, it hits "enter" (like a keyboard enter, I think) at the same time submitting the form
• I need the above code to keep it from submitting if the value isn't in the dropdown
• Is ".submit" the correct event handler for this? ...or do I use ".keypress"? maybe something else?

 

Location of script question

• Do I put the script in the form's footer or header...or should I put this in the header of the webpage where it's embeded? 
• I'm confused about when to use the form's header/footer vs the webpage header

 

One more detail that I left out is that I have an iframe code deployed in the footer of the form...it's the only way I could get a report to update as the form (also in an iframe) is submitted....it works well, even though I've read you can't deploy inside another datapage.... that seems doesn't seem to hold true with iframes.  However, would I need to change the form name above if I have the 2nd datapage deployed in the footer of the form????

 

[nightowl]

Hi blarney,

As for the event handler questions, here are my insights:

1. I am not sure what third-party barcode scanner you're using. But in this case, you can disable the barcode scanner library's default Enter key handler using the event.preventDefault() function: http://stackoverflow.com/questions/22374214/barcode-reader-calling-submit-function-in-my-form
2. As for question #2, I am not sure what "value" are you referring to. Is this a form input that you want to check against the available dropdown values?
3. If you want to prevent form submission while you're validating form inputs, you must use the same event.preventDefault() function at the very start of your .submit() handler. The revised code should look like this:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
   <script>
   $('#caspioform').submit(
       function (event)
       {
           // NOTE: I enabled the usage of the 'event' parameter in the
           //       function () declaration above
           // Disable form submit for the meantime
           event.preventDefault();
   
           var selectedopts = $('[name=cbParamVirtual1]').getChildren();
           for (i = 0; i < selectedopts.length; i++)
           {
               if (selectedopts[i].val() == '')
               {
                   return false;
               }
           }
   
           // Submit the form only when the value has been validated
           this.submit();
       }
   );
   </script>

    

4. For more information on #3, please check this StackOverflow post: http://stackoverflow.com/questions/22363838/submit-form-after-calling-e-preventdefault
5. .submit()  is still the correct event handler for this application. Just follow the recommendations in #1 and #3.

 

As for the location of the script, here are my insights:

1. For custom scripts, they should always be put in the footer unless there's a serious need to do so. Yahoo recommends this practice for two reasons: 1) performance reasons and 2) it ensures that all form elements have already been loaded before the script starts executing.
2. As for the form header/footer vs. web page header question, the decision will depend on personal preference. Usually, putting scripts in the DataPage header/footer will ensure that your script will always execute, no matter where you deploy it. On the other hand, if you put scripts in the HTML file where you deployed the DataPage, say view-profile.html, that would require you to copy-and-paste the script again should you deploy the DataPage to another HTML file, say edit-profile.html.

 

As for the iframe embed question, you don't need to change the #caspioform form ID. That's because the iframe's #caspioform is independent of the parent's #caspioform. For more details on this topic, please check this StackOverflow post: http://stackoverflow.com/questions/14667158/manage-iframes-form-submit-from-parent-frame

 

[blarney]

Thank you nightowl!

 

I'm just now seeing this....wow, love the detailed info here, amazing job, thanks again!

 

Oh, to answer #2, it's a form inputting sku #s that I'm checking against a hidden virtual field's cascading dropdown (which contains the skus that are associated with the order). The idea is to validate skus we are picking and packing/shipping against the skus that should be in the order (from another table). 

[nightowl]

Hi blarney,

Oh I see. In that case, the script in #3 above should be revised to look like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$('#caspioform').submit(
    function (event)
    {
        // NOTE: I enabled the usage of the 'event' parameter in the
        //       function () declaration above
        // Disable form submit for the meantime
        event.preventDefault();

        // NOTE: I added a validation flag here
        var valid = true;

        // NOTE: Use the actual ID of your SKU field as mentioned
        var sku = $('#NAME_OF_YOUR_SKU_FIELD').val();

        var selectedopts = $('[name=cbParamVirtual1]').getChildren();
        for (i = 0; i < selectedopts.length; i++)
        {
            if (selectedopts[i].val() !== sku)
            {
                // NOTE 1: Returning a false value does NOT prevent submission
                // NOTE 2: Don't return yet. We need to go through each dropdown value.
                valid = false;
            }
            else
            {
                // NOTE: We're all set here 
                valid = true;
                break;
            }
        }

        // Submit the form only when the value has been validated
        if (valid)
        {
            this.submit();   
        }
    }
);
</script>

-nightowl