Waardes behouden na verzenden van dynamisch formulier

Na het verzenden én vervolgens op de “vorige knop” geklikt te hebben zijn alle ingevulde waardes van een dynamisch formulier verdwenen. Ofwel, een formulier waarbij met Javascript elementen toegevoegd worden. Om dit op te lossen zijn er meerdere mogelijkheden:

• Formulier middels Ajax verzenden, zodat de pagina niet opnieuw geladen hoeft te worden
• De waardes middels Ajax opslaan en opnieuw inladen
• De gegevens lokaal opslaan, dit voor het verzenden

Ik heb recent gekozen voor de laatste optie. Voordat ik de oplossing hiervoor laat zien, eerst wat materiaal om mee te werken. Laten we een eenvoudig formulier nemen:

<form action="" method="POST">
	<table>
		<tr id="eerste-regel">
			<td><input type="text" name="name[]" placeholder="Naam..."></td>
			<td><input type="text" name="number[]" placeholder="Nummer..."></td>
		</tr>
	</table>
	<a href="#" id="regel-toevoegen">Regel toevoegen</a> <input type="submit" value="Verzenden!">
</form>

Het volgende stukje Javascript in samenwerking met jQuery zorgt ervoor dat wanneer er op “Regel toevoegen” geklikt wordt er een nieuwe regel bij komt:

// Regel toevoegen geklikt?
$('#regel-toevoegen').click(function()
{
	// Eerste regel ophalen
	var regel = $('#eerste-regel').clone();

	// ID verwijderen
	regel.removeAttr('id');

	// Ingevulde waardes verwijderen
	regel.find('input').val('');

	// Nieuwe regel toevoegen en het ID en de ingevulde waardes verwijderen
	$('table').append( regel );

	// False terug sturen zodat de pagina niet verspringt
	return false;
});

Hier kunnen we op verder bouwen! Want wanneer je meerdere regels toevoegt, deze invult en na het klikken op “Verzenden!” terug gaat; is al je kostbare werk verloren gegaan. Om de gegevens voordat deze verzonden worden op te slaan, dienen we dit af te vangen waarna we deze gestructureerd op kunnen slaan. Zie het volgende stukje code:

// Form versturen?
$('form').submit(function()
{
	// Object met array's maken
	var array           = {};
	array['name']       = [];
	array['number']		= [];
	array['counter']    = 0;

	// Door alle tabel regels loopen
	$('tr').each(function()
	{
		array['name'].push( $(this).find('input[name="name[]"]').val() );
		array['number'].push( $(this).find('input[name="number[]"]').val() );
		array['counter']++;
	});

	// Opslaan in session storage
	sessionStorage.setItem('input', JSON.stringify(array));
});

Eerst vangen we de “submit” af, hierna bouwen we een object op met array’s gevolgd door alle ingevulde waardes hierin te zetten. Tevens draait er een tellertje mee om het aantal velden te bepalen. Als laatste worden de gegevens opgeslagen in “Session Storage”. In cookies kan je weinig kwijt en “Local Storage” bewaard de gegevens ook nadat het browser venster gesloten is, vandaar deze keuze. Let daarbij wel op dat je geen object of array in session of local storage kan opslaan. Hiervoor dient deze eerst omgezet te worden naar een “string”, vandaar de “stringify” functie. Hartstikke mooi dat het opgeslagen is, maar het moet er ook weer uit natuurlijk! Zie:

// Iets in session storage aanwezig?
if(sessionStorage.getItem('input'))
{
	// Gegevens ophalen
	var array = JSON.parse( sessionStorage.getItem('input') );

	// Nieuwe regels toevoegen, minus de al aanwezige
	for (var n = 0; n < (array['counter'] - 1); ++ n)
	{
		$('#regel-toevoegen').click();
	}

	// Door alle tabel regels loopen
	$('tr').each(function(index,value)
	{
		// Waarde plaatsen
		$(this).find('input[name="name[]"]').val( array['name'][index] );
		$(this).find('input[name="number[]"]').val( array['number'][index] );
	});

	// Waardes weer verwijderen
	sessionStorage.removeItem('input');
}

Eerst maar kijken of er iets aanwezig is, wanneer dat het geval is de gegevens ophalen en van de “string” weer een object met array’s maken. De teller laten lopen en elke keer even op de “Regel toevoegen” knop klikken. Vervolgens het zelfde stukje als bij het opslaan, enkel plaatsen we nu de gegevens terug in plaats van dat we deze uitlezen. Als toetje de gegevens nog even verwijderen en klaar!

Klik hier voor een online demo