Develop Reference

How to prevent divs created when form is submitted from disappearing when form is resubmitted

I have been struggling with this one problem for about 5 days now and I have tried many different things but have not made any progress. Can someone please help me to find a solution?
Here is a video showing what my page does currently
https://imgur.com/a/DmkP0ut
What is happening is the user inputs some text into a form which checks for records in a database and creates rows with the info taken from that database. Then when the user ticks the checkbox it will append the row to another div. The problem is that when the user searches another name the rows that have been selected disappear.
I would like for these rows to stay where they are then when the user continues to the next page I would like the info in the selected rows to carry over to the next page.
I have tried many different approaches including cloning the rows, saving the ID as a session variable and attempting to retrieve info for that ID from the database again, and saving the individual names as making the divs from scratch. I am not even sure which approach is the right one let alone how to do it.
I know I have not really given a lot of information but I really don't know what code is important, so if you need any more information just ask.

Dynamic Jquery management of multiple table rows

Good Evening to all,
I'm currently developing an app that fetch data from a DB via AJAX calling a .php file.
I've got a table with 4 columns, the first 2 columns contain a < select >, the third an input and the last a button.
The first row is static: i've got a php query that loads the information of the 1st,2nd and 3rd column with default values.
When the user choose change the value of the 1st select a trigger launch a Jquery function that drop-down update the content of the 2nd and 3rd column.
In the same way if the user change the value of only the 2nd column, only the 3rd column value will be drop-down updated.
If the user make changes only with the 1st row, the code has no problem, but if the user press the button and via an .append() the code add another row, with the same scripts as the 1st one, obliviusly the new row selects won't work.
Trying to fix this I created a php for that copies the Jquery change functions using the iterator as identifier for both functions and the rows of the table.
Using the code inspector of chrome I don't find any errors, but only the 1st row jquery select will work, that is strange considerated that the 1st row function is generated by the same php cicle that is used for the others.
The hair are falling of my head because of this problem, hope you can understand and help me.
Thank in advance

Events and handlers added to existing elements won't work on clones of those elements added later dynamically. Simply said, your functions to do stuff on drop-down etc on existing rows are limited to those only, and won't apply to any newly generated rows.
For a general solution, consider writing all the event handlers separately, and invoke those again when you add new rows on button click.
Hope this made sense!

How to highlight multiple search results in input multiple textareas

I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.

The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.

Displaying certain sections of a form with accordion UI

I have a rather long form where a user has to fill in some sections and leave others blank depending on their circumstances and then I will save the sections to a database. To help visitors stay organized I have utilized jQuery UI's Accordion to divide the form into sections.
Now that the form is built I'm trying to find a way to display just the sections they filled in so they can print them off. If I simply bring up the form and they try to print it, it will print the accordion sections.
Right now I'm thinking of getting all the div's that have inputs filled in, combining them, and then sending them off to the DB to be saved so I can call them up later. This seems a little sloppy to me and I would prefer something tidier and that would be considered "best practices." If anyone has a better, neater, more efficient way of doing this I would appreciate your input! Thanks!

I made something similar for my work. I gathered the fields that were actually filled in and created an overview on the same page using jQuery. Rendering this info on the client and on the same page saves you from a server/database call.
We used jQuery serialize() for fetching the filled in input fields and labels and created a JavaScript object with the values so we could render these in an overview. This overview would render in the page when clicking a check form button, then if the user is not satisfied they can go back to the form by cancel or proceed.
You might want to split it up into tasks:
Store relevant form HTML in a variable
Filter out the fields that are empty
If necessary reorder the HTML
Render the HTML for viewing and printing

Save sort order to hidden field with sortable jQuery plugin

I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.
The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.
Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.
The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.
That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an or some other form control so I can parse it with PHP and create the fields properly.
If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an field, and POST it to PHP. But if that's possible, I don't know how to do it.
If there is another (more elegant) way to handle this, I am open to suggestions.

Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the does it already. All you have to do is itterate through it with .each().
And, best of all, I didn't have to use global variables