Member Avatar for mbarandao

Hello:

I would like to get confirmation from user, if a particular checkbox on form is not checked, whether they want to submit the form without checking this box.

I have written the following, but need help with it --missing something.

<script type="text/javascript">
function taxable(){

if (document.processEstimate.tax.checked == 0) 
    {
if (confirm('You have not checked the taxes. Are you sure you want to continue?')) document.processEstimate.submit(); else return false; 
    } 
else 

document.processEstimate.submit();
};
</SCRIPT>

and then

<form name="processEstimate" .... .... onsubmit="return taxable();">

Not working so far. Is this correct or is there a better way?

Thank you!
Mossa

  • 1 Contributor
  • 2 Replies
  • 183 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by mbarandao

Dani AI

Generated

Good catch by — the working code in the thread shows the right idea. A few pitfalls worth calling out: inline onsubmit/onclick handlers make flow harder to follow; comparing checked to 0 is brittle (it is a boolean); and calling form.submit() from inside a submit handler can bypass other listeners and validation. A cleaner, unobtrusive pattern is to attach a submit listener that prevents the submission only when the user cancels the confirmation.

document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('form[name="processEstimate"]');
  if (!form) return;
  var box = form.querySelector('input[name="taxbox"]');

  form.addEventListener('submit', function (e) {
    if (!box || box.checked) return;            // already checked -> allow submit
    if (!confirm('Sales taxes are not checked. Submit without taxes?')) {
      e.preventDefault();                       // stop submit
      box.focus();                              // steer keyboard focus to the checkbox
    }
  });
});

Troubleshooting tips: confirm that the checkbox input name or id matches the selector; test the flow when the form is submitted programmatically (scripted submits may need to call form.requestSubmit() to trigger the submit event); avoid calling form.submit() inside the handler unless the handler is removed first. For better accessibility and UX, consider showing an inline message and a visible button to continue instead of relying solely on confirm() dialogs. Finally, always enforce the same validation on the server side so the check cannot be bypassed.

Member Avatar for mbarandao

solved!

Member Avatar for mbarandao

here is a working code:

function validateprocessEstimate()
{
var focus_me = null, msg = "";

if (document.processEstimate.taxbox.checked == 0) 
{
msg += " ";
focus_me = focus_me || processEstimate.taxbox[0];
//}
if (msg != "")
{
var prefix = "\nSales Taxes were not added!\n";
var suffix = "\nClick OK to add and re-submit.\n";
var suffix = suffix + "\ Or click CANCEL to continue without Taxes."
var ask = confirm(prefix + msg + suffix);

if (ask) 
{
    if (focus_me)   
    {
        focus_me.focus()
    }
    return false;
}

else 
{
document.forms.processEstimate.submit();
}
}
}
else 
{
document.forms.processEstimate.submit();
}
}

and then

handlers:

<a href="#" class="classname" onclick="return validateprocessEstimate() && document.forms['processEstimate'].submit(); return false;">Print & Save</a>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.