Issue Updating Form Controls with JavaScript

  • 14 August 2019
  • 2 replies
  • 10 views
kelliganp
Userlevel 4
Badge +10

Hi Folks,

I have JS code that should change some control values when a user wanted to cancel the supply request. User should put in some comments and then click the "Confirm cancellation - Sign" button. The associated code puts the current user's info in the signature block, puts the current date in the date field, and changes the Cancel check box to true. This works initially.

If the user decides not to cancel or clicks the button in error, there is an "Undo" button that clears all values (check box to false). Upon clicking the "Confirm cancellation - Sign" button again, everything works except the check box.

 

//=============================;
//  Cancellation Controls;
//=============================;
function signCancellation() {
    var curDate = new Date();
    NWF$('#'+ jsvar_CancellationSignature_TXT).val(NWF$('#'+ jsvar_CurrentUserPreferredName_CAL).val() +" (Current User)");
    NWF$('#'+ jsvar_CancellationDate_DTE).val((curDate.getMonth() + 1) + '/' + curDate.getDate() + '/' + curDate.getFullYear());
    NWF$('#'+ jsvar_CancellationCheck_CHK).attr('checked',true);
}
//=============================;
function resetCancellation() {
    NWF$('#'+ jsvar_CancellationComments_MLT).val("");
    NWF$('#'+ jsvar_CancellationSignature_TXT).val("");
    NWF$('#'+ jsvar_CancellationDate_DTE).val("");
    NWF$('#'+ jsvar_CancellationCheck_CHK).attr('checked',false);
}
//=============================;

This is what the form section looks like when the user puts in some comments and clicks the "Confirm cancellation - Sign" button.

3919i703A58C486EAB1CA.png

This is what the form looks like after clicking the "Undo" button.

3920i001850C5F0B1E2EB.png

Upon clicking the "Confirm cancellation - Sign" button again, the code works except for the checkbox...

3921iFCA65A9AAFA703A1.png

Does anyone understand thios behavior and knows a workaround?

 

Thanks and Regards,

Patrick

2 replies

MegaJerk
Userlevel 5
Badge +14

The "checked" is not an attribute. It's a property and should be toggled via: 

 

NWF$("#" + jsvar_CancellationCheck_CHK).prop("checked", true);

// or

NWF$("#" + jsvar_CancellationCheck_CHK).prop("checked", false);

 

 

(Note / Edit: Attribute and Properties are a bit confusing at a glance because they seem like they are *almost* the same thing, but a good rule of thumb is that you can recognize an Attribute if it's VISIBLE in on the <element>. When you see things like: 

 

<a href="blah" class="blah" value="test"/> 

 

everything in bold would be considered an attribute, however... to add to the confusion, *certain* properties can be represented as attributes and can even be updated when you update the property! 

The Attribute "id" would be an example of that. Updating the id via .attr or .prop should result in it being updated in the other place... but certain updates work in only ONE direction. 

 

Updating .attr("value", "blah") will update the .prop("value"), BUT if you were to update .prop("value", blah2"), the .attr("value") would NOT be updated! 

 

Additionally, certain attribute / property binding will only work if the element is in a 'clean' state depending on the Browser! So in your case, you change the Attribute and it works once, but as soon as it changes, the element is now dirtied and changing that attribute results in nothing happening! 

 

Either way, just remember, if you're not certain just open up the console and test out with both prop and attr to see how it reacts in order to make sure that you're updating the right thing or receiving the correct value. 

 

Hope this helps!) 

kelliganp
Userlevel 4
Badge +10

Thanks @MegaJerk !

 

That fixed the problem!

 

Regards,

Patrick

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings