Retain form field values set using javascript on page refresh / reload

(Jonathan Whittaker) #1

We have created a form which has some calculations in it using JavaScript events.

 

When the user selects the number of properties from a dropdown control, a cost estimate (text input field) is automatically updated.

eg. The person selects '3', then a text input field on the page updates to 3 * 5 (15).

 

My problem is that if the user fails the captcha for any reason when submitting the form, the page re-loads and any values I have set using javascript are lost.

 

Just wondering if there is any way to retain this field value? All other form fields in which data was manually entered retain their values/selections.

 

I am new to using Squiz Matrix Forms, so perhaps there is a better way to set the field/asset value?

 

I'm currently using the method below:

onchange="{$('#q13690_q5').val($('#q13685_q13').val() * $('#q13688_q2').val());}

Any ideas or advice would be much appreciated.

 

Thanks,

Jono

 

 

 

(Peter McLeod) #2

Hi 

 

Matrix should persist any form field values between loads. If the cost estimate is a field in the Matrix form then it should persist whether its value was added via javascript or a user.

 

If it's just an additional form field to display data - then if you change your javascript so that the calculation function is called on the page load event as well as the select change event, then you should be ok.

 

Otherwise you could just store the value using the browser's localstorage or sessionstorage (session would be the better option for this), to enable the data to persist between page loads. You would need to write some Javscript to store / retreive and delete once the form is completed. Only issue would be if you need to still support older browser for this: https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage 

 

Thanks

Peter

(Jonathan Whittaker) #3

Thanks for your reply Peter.

 

I thought it was odd that the values weren't saving. I found out after posting my question that in fact the values aren't being saved with the form at all (even when the captcha is entered correctly).

 

Perhaps there is another sQuiz specific function I am unaware of to the effect of .setAttribute or similar.

 

I'll have a go at adding an on-load event using JavaScript as a workaround. With any luck this will save the values when submitted.

I'm assuming I can add this function within the 'Form Extra Attribute' field. I have been placing my onChange events in the 'Extras' area on the necessary form fields.

 

Cheers,

Jono