0

I have dynamic input list fields that are generated in as many rows needed with a + or removed with - button I wanted that input fields to be replaced with select predefined values so I acomplished that with jQuery replaceWith() function. But my problem is how can i keep select selected values on page reload in prev next step form.

Here is bin with my code that I have reproduced http://jsbin.com/josorepiru/1/edit?html,js,output

Thanks!

stav
  • 69
  • 1
  • 1
  • 9

3 Answers3

1

you can use local storage, something like:

window.addEventListener("beforeunload", function(e){
   sessionStorage.setItem( "list1", $("list1").val() );
}, false);

and then restoring on load

Downgoat
  • 11,422
  • 5
  • 37
  • 64
PRDeving
  • 649
  • 3
  • 11
  • How to implement this for array of select inputs ? http://jsbin.com/ticixonaru/1/edit?html,js – stav May 05 '15 at 23:10
  • @stav can `JSON.stringify()` object or array and store, then parse it on page load – charlietfl May 05 '15 at 23:35
  • any tutorial or example of this would be nice :) – stav May 06 '15 at 18:38
  • I forgot to say that this script vas part of gravity form builder I found filter for this purpose here https://wordpress.org/support/topic/gravityforms-list-field-with-dropdown-on-entries-column, so i solved my problem thanks! – stav May 07 '15 at 00:44
1

Have you tried using cookies or local storage? Those may be places you can stash user data that you hope to be persistent. Local Storage vs Cookies

Alternatively, if you have a user that allows cookies, you could always use server side resources-- like a session or a DB entry keyed off the CSRF*. Session Variables vs Database Storage in Terms of Speed

*My multi-page forms are always on one actual page in one set of form tags. Each 'page' is just a section that is shown via CSS-- that still works if javascript is off, it is just one looong form. So from 'page' to 'page' of the form my CSRF stays the same. Also, since the user never navigates away, 'page' navigation doesn't 'kill' any data entered into the form.

What I ended up doing was running some JavaScript that made a REST request after the DOM loaded and manipulated the form elements according to the elements and their properties/attributes, which made the page elements match what I had stored. Previous to that, I had used PHP to echo PHP variables server side into my JavaScript that ran client side-- but that task really is better suited to front end code. It wasn't pretty, but it worked for presetting dropdowns.

I stumbled on someone else's representative example of how I first manipulated a form element with PHP/JavaScript: Injecting Stored Information into JavaScript via PHP In the example, you can see how to put information you have stored into your JavaScript. This felt messy and unprofessional to me, so I do things differently now. Now, I do it all in PHP by setting the proper 'selected' attribute in the option tag-- obviously you'll need to edit it for other elements via the text value, checkbox checked, or node text for textarea elements. For AJAX requests, the selected option is indicated in the return data and handled in a standardized way-- even if it is just my own standard.

Why am I telling you this server side stuff that may be irrelevant-- because you may want to consider storing the in progress form data server side which you have much control over...

Community
  • 1
  • 1
BradChesney79
  • 606
  • 7
  • 15
0

From the other answer... My multi-page forms are always on one actual page in one set of form tags. Each 'page' is just a section that is shown via CSS-- that still works if javascript is off, it is just one looong form. So from 'page' to 'page' of the form my CSRF stays the same. Also, since the user never navigates away, 'page' navigation doesn't 'kill' any data entered into the form.

Consider making a huuuge single page form and just presenting certain parts via hiding and showing in the CSS. Your 'back' and 'next' buttons just manipulate which part of the form the user sees.

BradChesney79
  • 606
  • 7
  • 15
  • Also neat, you have a built-in confirm when you show all the parts and the submit button. – BradChesney79 May 06 '15 at 14:30
  • i want to help one my friend and the script that i need to make the changes is based on wordpress gravity form builder but my friend don't want to make core changes so i must acomplish this from frontend with jquery, but i can't find any example how can I record array values on dynamic builded fields – stav May 06 '15 at 18:37
  • I found filter for this purpose here https://wordpress.org/support/topic/gravityforms-list-field-with-dropdown-on-entries-column, so i solved my problem thanks! – stav May 07 '15 at 00:43