Default Values Using Javascript


Badge +6

Hi Everyone,

 

I have a form that has 2 choice controls that are being used as 'tabs'.

I need each choice control to default to 'Job Details' every time the form is opened.

 

It seems I need more than just setting their default values and have tried the below code:

 

NWF$(document).ready(function(){

var tab = NWF$("#"+mainTabButton);

tab.val('Job Details');

});

 

My goal is to have 'mainTabButton' (Client ID for JavaScript) and my 'AuthTab' (Client ID for JavaScript) to default to the value of 'Job Details' everytime the form is opened.

Pointers:

 

- Both 'tab' controls are choice controls on the form

- Both 'tab' controls are not connected to a list item (they are used for tab purposes only)

- Both 'tab' controls have JS Client ID names saved in their advanced options

 

I no longer get any debugging error messages with the code above, however it does not work. No errors, and no sign of anything happening.

 

Hope someone can help me

 

Regards,

 

Andrew


14 replies

Badge +6

I should mention in addition - the choice controls do have a default value. This works fine when the form is first opened - New Item.

Once the form is saved however the tabs (choice control) takes the value of the selection it was in when it was saved. I would like to set the value of these choice controls when the form opens.

Thank you.

Andrew

Badge +9

Hi Andrew,

The JavaScript code is not executed when you View the item but when you Edit the item.

You can also set the value when you Save the form to make sure when the item is opened, the default tab is 'Job Details'

Please refer to this Article to know how to do it.

Best regards,

Christophe Raucq

Badge +6

Hi Christophe,

I have tried your code, matched up all of my fields and it doesn't currently work.

In F12 Debug mode - on the Console, it says I'm missing method=POST so it will not complete my task.

Do you have any ideas about this issue? Did you encounter it also on your way to making your code work?

Thank you,

Andrew

Badge +9

Hi Jeremy,

Thank you for the hint.

What I find very strange is that when I put this JavaScript code behind a button in Edit mode, it sets my radio button to the right value when the radio button has no value.

But if I select another value, it does not reset to the value specified in this code. Do you know why?

Thanks,

Christophe

Badge +6

Hi,

I have been successful with the code 'NWF$(':radio[value="Test1"]').attr('checked',true);'.

Thanks for your help Jeremy, I was hoping you'd get in touch as I had followed your 'tab tutorial' so you probably have a good idea of what my form is like and the tabs I created. You were spot on, the display format is options buttons and the code works.

The form now sets its tabs to 'job details' on opening the form each time.

Thank you.

Best Regards,

Andrew

Badge +9

Thanks for checking but the issue is the last line as I would like to be more generic and use a value ('Job Details') instead of an index: 0

Badge +9

Hi Jeremy,

I finally made it working the way I want

NWF$('document').ready(function(){

var strMyRadioButtonValue = 'Test1';

NWF$('#'+fldTabs).find('input[value=''+strMyRadioButtonValue+'']').prop('checked', 'checked');

});

No need to uncheck all values and it is working in a button and when you save the iterm.

Happy ;-)

Christophe

Badge +5

Hi Jeremy,

I have a similar, exactly the same possibly, requirement to Andrew...the option buttons (tabs) are used to show and hide panels on the canvas.

I have tried the .attr('checked',true) method however what I observe is that the tab appears selected (as indicated by the formatting of the tab) but the panels which are displayed are those which would be expected for the previously selected tab i.e. the one that was selected when the form was saved.

Is there an issue of timing here which prevents the formatting hide rules from being applied to the panels? Some necessity to build in a delay before setting the value of the tab / button?

I have also tried the click() method but the result is the same.

Thanks for any help,

Barry

Badge +5

Hi Jeremy,

Thanks so much for this pointer! So here's what I found.

Placing your original code with .attr('checked',true) inside RegisterAfterReady - nothing happened, this time even the target tab was not highlighted to indicate it was selected.

However, when I placed the following code inside the RegisterAfterReady it behaved exactly as hoped i.e. the tab was selected and the hide rules on the panels fired correctly:

NWF$(':radio[value="Test1"]').click();

Hopefully this is helpful to someone else...I'm curious about why the original code seems to work in some cases and not others?

Thanks Again!

Barry

Badge +9

For your info, it seems that .attr('checked',true) does not always fires but it seems that .prop('checked', 'checked') is more accurate in O365

Badge +6

Hi Barry,

Through trial and error, with some success at times and at other times failure I built my working code from everything you see in this feed. I should have probably posted it back to this page for people to find. I ended up combining everything I had learned through this feed and I have a script that runs on opening the form and some code that runs when the save button is clicked. Here's how my code turned out combining suggestions in this post, especially as I have 2 main tabs where at least one of those is hidden at any one time, I am unable to change the tab myself as it is not visible so this code makes my form work:

NWF$(document).ready(function(){

var rad = NWF$('#' + mainTabButton);

rad.find('input').each(function(){

this.checked = false;

});

rad.find('input')[0].checked = true;});

NWF$(document).ready(function(){

NWF$(':radio[value="Job Details"]').attr('checked',true);}); //Both of my two main tabs need to be 'job details'

function SelectTabs(){                 //"Save" Button calls this function

var rad = NWF$('#' + mainTabButton);

var authrad = NWF$('#' + Authorisationtab);

var hazard = NWF$('#' + hazardtab);

rad.prop('checked',false);

authrad.prop('checked',false);

hazard.prop('checked',false);

rad.find('input').each(function(){

if(this.value == "Job Details"){

this.checked = true;

} });

authrad.find('input').each(function(){

if(this.value == "Job Details"){

this.checked = true;

} });

hazard.find('input').each(function(){

if(this.value == "Working Environment"){

this.checked = true;

} })};

Badge +6

I had posted this question under a different title in the past and I went back to answer it myself after this feed discussion.

You may be able to see how I used information in this feed to piece together my working code.

JavaScript Auto Select

Andrew

Badge +7

Hi Chris,

I'm wondering if you can help.

I have two panels, hidden or showing based on which of my two tabs are selected. This works great if a user uploads the document using the normal +Add a Document and they get the form immediately to populate metadata. However, if I use the drag and drop, and try to edit the metadata after my upload, the form opens without the default panel opening. Do I need to use some sort of code like you have used?

thanks!

Badge +7

Hey Andrew. Can you lend a quick hand with something I'm doing very similar to you?

Reply