Question

Reset Form - What am I doing wrong?

Forms

Updated October 15, 2020

asked on September 25, 2020

I'm trying to clear the form when the "Start Over" (Submit) button is chosen. Everything works fine when I click the Reject (Cancel) button:

$(document).ready(function(){

//Remove required fields when cancelling
  $('.Reject').click(function() {    
    $('*[required]').each(function() { 
      $(this).removeClass('required')
      $(this).removeAttr('required');
    }); 
  });

//Reset form when starting over and remove required fields
  $('.Submit').click(function() {
    $(".Submit").prop("type", "reset");
    $('*[required]').each(function() {
      $(this).removeClass('required')
      $(this).removeAttr('required');
    });
  });

});  //close document.ready

This is what happens:

0 0

Answer

SELECTED ANSWER

replied on October 15, 2020

So, because all I wanted to clear was all table rows, this is what I ended up doing:

$(document).ready(function(){

//Remove required fields when Starting Over and delete all table rows
  $('.Submit').click(function() {    
    $('*[required]').each(function() { 
      $(this).removeClass('required')
      $(this).removeAttr('required');
      $('.cf-table-block tbody tr').each(function () {
        $(this).find('.form-del-field').trigger('click');
      }); 
    }); 
  });

});  //close document.ready

0 0

Replies

replied on September 30, 2020

I had one question here and a suggestion:

question:

I see that the prop is set to "reset", but it appears that is happening after the button is clicked and because the button is clicked:

$('.Submit').click(function() {
$(".Submit").prop("type", "reset");

At what point is this newly modified button clicked and activated?

suggestion:

On any of the fields that are not clearing out add a class to the field such as 'clearData' or something like that. Run the .each function on these fields and set the .val to ''. Something like this:

//Reset form when starting over and remove required fields
  $('.Submit').click(function() {
    $(".Submit").prop("type", "reset");
    $('*[required]').each(function() {
      $(this).removeClass('required')
      $(this).removeAttr('required');
    });
    $('.clearData input').each(function() {
      $(this).val('').change();
    });
  });

^It's a workaround to be sure! You might be able to eliminate the reset prop altogether this way if you add the class to all fields. Just putting it out there.

Not that it has anything to do with this functionality, but I did notice that W3 schools suggests not to use reset buttons.

Thanks

1 0

SELECTED ANSWER

replied on October 15, 2020

So, because all I wanted to clear was all table rows, this is what I ended up doing:

$(document).ready(function(){

//Remove required fields when Starting Over and delete all table rows
  $('.Submit').click(function() {    
    $('*[required]').each(function() { 
      $(this).removeClass('required')
      $(this).removeAttr('required');
      $('.cf-table-block tbody tr').each(function () {
        $(this).find('.form-del-field').trigger('click');
      }); 
    }); 
  });

});  //close document.ready

0 0

replied on September 27, 2020

Hi Gloria,

With attached JavaScript, I can reset form with single line field when click submit button, but doesn't work for number field. What type of fields are you using?

0 0

replied on September 28, 2020

When you say "with attached JavaScript", did you mean to attach something or did you mean the one I attached?

I have two forms each with two different tables, none of which use "numbers", however, it does use the checkbox:

0 0

replied on September 28, 2020

I meant your attached script. It did work when I put it into JavaScript and use the Form in user task.

Which version of Forms are you on? And is there any other JavaScript on the form that will modify the button?

0 0

replied on September 29, 2020

Laserfiche Forms Professional Version 10.4.1.164

$(document).ready(function(){
//set fields to hidden or readonly
  $(".read-only *").prop("readonly", true);//make fields with read-only class read-only
  $('.comment-section').hide();

//Autofill generates when changed
  function tableAutofill() {
    $('.cf-table-block tbody tr').each(function () {
    $(this).find('button.autofill').trigger('click');
    });
  }
  function autofill() {
    $('.autofill').trigger('click');  
    }
  $('.lookupCondition input').blur(autofill);
  $('.cf-table-block').change(tableAutofill);

//Confirmations
  $(document).on('click', '.Reject', ConfirmCancel);
  function ConfirmCancel(){
    return confirm("Are you sure you want to CANCEL this request? Click OK to continue or Cancel to abort.");
  }
  $(document).on('click', '.Submit', ConfirmStartOver);
  function ConfirmStartOver(){
    return confirm("Are you sure you want to RESTART this request? Click OK to continue or Cancel to abort.");
  }
  $(document).on('click', '.Approve', ConfirmSubmitChanges);
  function ConfirmSubmitChanges(){
    return confirm("Are you sure you want to SUBMIT this request? Click OK to continue or Cancel to abort.");
  }

//Remove required fields when cancelling
  $('.Reject').click(function() {    
    $('*[required]').each(function() { 
      $(this).removeClass('required')
      $(this).removeAttr('required');
    }); 
  });

//Reset form when starting over and remove required fields
  $('.Submit').click(function() {
    $(".Submit").prop("type", "reset");
    $('*[required]').each(function() {
      $(this).removeClass('required')
      $(this).removeAttr('required');
    });
  });

});  //close document.ready

I don't believe so.

0 0

You are not allowed to follow up in this post.

Question

Question

Reset Form - What am I doing wrong?

Answer

Replies

Sign in to reply to this post.