Jump to content

Run Script When Form Submitted Without Required Fields


Recommended Posts

I am using two virtual fields in a submission form. They both have the same datasource, but one is cascading and one is not. This submission form is a timecard for employees. The employees first need to select the Job they worked on (which is the parent value for the cascading virtual field), and then use one of the virtual field dropdowns to select which type of material they were working on. One virtual field dropdown is always hidden, with a checkbox to switch between the two.

The idea is to limit the employees Material selection to what we have saved for it. That is where the cascading feature comes in - the user selects the job and the cascading virtual field allows you to select between the materials we have set for the job. However, if the material they used isn't in the cascading list for some reason, they can check the checkbox to get access to the entire material list that we have, so they can choose any of them. I hope this makes sense. We are trying to limit our employees choosing the wrong materials for the job, pretty much.

To save the selected value in the actual Material field (named Cost Code), I am using some Javascript. Pretty much just running event listeners on change of each of the virtual fields and copying the value over. This is working. However, if the user doesn't enter in a value to any of the Required fields, the form stops submission and refreshes like normal. But the value selected in my virtual field dropdown still shows as selected, and the script is not bringing the value over to the actual field anymore. So, to the user it looks like their material is still selected, but the value is not being saved.

Any ideas how I can get the value to copy over to the actual field upon refresh due to missing required fields?

document.getElementById("cbParamVirtual6").addEventListener("change", function(){
  setTimeout(function(){
    document.getElementById("InsertRecordCost_Code_ID").value = document.getElementById("cbParamVirtual6").value;
}, 1500);
});


document.querySelector("select[id*='cbParamVirtual5_']").addEventListener("change", function(){
  setTimeout(function(){
    document.getElementById("InsertRecordCost_Code_ID").value = document.querySelector("select[id*='cbParamVirtual5_']").value;
  }, 1500);
});

document.getElementById("cbParamVirtual7").addEventListener("change", function(){
  var checkBox = document.getElementById("cbParamVirtual7");
  setTimeout(function(){
    if(checkBox.checked){
      document.getElementById("InsertRecordCost_Code_ID").value = document.getElementById("cbParamVirtual6").value;
    } else {
      document.getElementById("InsertRecordCost_Code_ID").value = document.querySelector("select[id*='cbParamVirtual5_']").value;
    }
  }, 1500);
});

requiredrefresh.PNG.3c776fac3b89992667a8b3b04b5e1680.PNG

Link to comment
Share on other sites

After messing around a little bit... I was getting a 'checkBox not found' error. Which makes sense because I for some reason left it out of the setTimeout function. So, I changed that, and no longer get any errors.

I have noticed that, with the timeout delay, the value is still in the real Cost Code field after the page reloads after failed submission, and then changes to blank after the delay duration. But, this only happens when the checkbox is checked (to hide 1st virtual dropdown). If the checkbox is not checked, and the value is coming from the first virtual dropdown, the value stays and works. But, when the checkbox is checked, and the value is coming from the 2nd dropdown, the value disappears after the delay.

When viewing the element in devtools after it goes blank from reloading, it still shows the element has the correct value... but the text box shows blank. :angry:

<input type="text" maxlength="255" name="InsertRecordCost_Code_ID" id="InsertRecordCost_Code_ID" value="100" class="cbFormTextField" style="width:216px;">

 

Link to comment
Share on other sites

I believe my issue is with the last eventlistener in my script. When the page refreshes after a failed submission, the first (cascading) dropdown resets to blank if it is hidden, but the 2nd dropdown does not. I am thinking that the script is not reading the checkbox value (or the value isn't loaded up yet or something) and automatically going to the ELSE clause in my if/else statement. So, it reloads, looks at the checkbox (that is checked), thinks it is not checked, and goes to the 2nd part of my if/then statement, which would give it the blank value after the delay.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...