I have 3 search forms that have been jQuery tabified using the plugin in the UI. I'm having issues with creating cookies for each of these search forms so that when a user returns to the submission page the form values are kept for each form.
The forms are supplied by a third party and are a package holiday search, flight search and hotel search. Each of these forms have common controls (inputs) in them that have the same name e.g. the departure date input is call 'depdate-day' across each form. I cannot change this as the functionality of the search form will break.
What I'm trying to achieve is that regardless of what form a user fills in, those form values are remembered.
Here's my 'get' and 'set' code for the cookie (this may not be the most elegant code!!!):
function setFormCookie()
{
jQuery.cookie('formOptions','country='+document.getElementById("country").value+',destair='+document.getElementById("destair").value+',resort='+document.getElementById("resort").value+',depair='+document.getElementById("depair").value+',depdate-day='+document.getElementById("depdate-day").value+',depdate-month='+document.getElementById("depdate-month").value+',depdate-year='+document.getElementById("depdate-year").value+',rating='+document.getElementById("rating").value+',board='+document.getElementById("board").value+',wantedname='+document.getElementById("wantedname").value+',roomcount='+document.getElementById("roomcount").value+',nights='+document.getElementById("nights").value+',adults-1='+document.getElementById("adults-1").value+',adults-2='+document.getElementById("adults-2").value+',adults-3='+document.getElementById("adults-3").value+',children-1='+document.getElementById("children-1").value+',children-2='+document.getElementById("children-2").value+',children-3='+document.getElementById("children-3").value+',childage-1-1='+document.getElementById("childage-1-1").value+',childage-1-2='+document.getElementById("childage-1-2").value+',childage-1-3='+document.getElementById("childage-1-3").value+',childage-1-4='+document.getElementById("childage-1-4").value+',childage-1-5='+document.getElementById("childage-1-5").value+',childage-2-1='+document.getElementById("childage-2-1").value+',childage-2-2='+document.getElementById("childage-2-2").value+',childage-2-3='+document.getElementById("childage-2-3").value+',childage-2-4='+document.getElementById("childage-2-4").value+',childage-2-5='+document.getElementById("childage-2-5").value+',childage-3-1='+document.getElementById("childage-3-1").value+',childage-3-2='+document.getElementById("childage-3-2").value+',childage-3-3='+document.getElementById("childage-3-3").value+',childage-3-4='+document.getElementById("childage-3-4").value+',childage-3-5='+document.getElementById("childage-3-5").value+'');
}
function getFormCookie()
{
var cookieData = jQuery.cookie('formOptions')
if (cookieData != null)
{
var splitData = cookieData.split(",")
var resort = ''
for (var i=0; i<splitData.length; i++)
{
var formValue = splitData[i].split("=")
document.getElementById(formValue[0]).value = formValue[1];
if
(formValue[0] == "country")
{
dpchangecountry();
}
else if (formValue[0] == "destair")
{
dpchangedestination();
}
else if (formValue[0] == "depair")
{
//dpchangedepair();
}
else if (formValue[0] == "roomcount")
{
roomchange();
}
}
}
}
I can get this to work when there's only one form on the page but how can I extend this code to work across all three forms when they share common input ids?