jQuery to carry over a form data to a new page

Question

Situation: I have two identical forms, on two seperate pages.

• Page 1: The form on this page has a select field and on submission is supposed to take you to the second page and set the other identical form to the same selection

• Page 2: This page has a form with a select field(no submit button). When the selections is changed I use jquery to get the contents of the option and show a div with a corrsponding class. Using the Code Below:

  $('.result').hide();
  $('#servicearea').change(function() {   
      $('.result').hide();
  
      var optionValue = $ (this).attr('value');
      $('#'+optionValue).show('fast');
  
  });
  

The Problem:

• How can I select form data,
• Link to Page 2,
• and Inject the form data into an existing form

I'm a novice when it comes to jQuery so I don't know where to start with this one. Please be nice. Thx!

Answer 1

You can try transfering data with localStorage.. think that should be what you're looking for (if you don't want to use php, or something similar..).

enter link description here

Quick example:

// first page
<script>
$('#submit').on('click', function (e) {
e.preventDefault();
var val1 = $('#val1').val();
var val2 = $('#val2').val();
var action = $('#form').attr('action'); // next page

window.localStorage.setItem('formData', JSON.stringify({
val1: val1,
val2: val2
}))
});

window.open(action, '_self');
</script>

// second page
<script>
$(window).on('load', function() {
var storage = window.localStorage.getItem('formData');

if (storage) {
storage = JSON.parse(storage);

$('#val1').val(storage.val1);
$('#val2').val(storage.val2)
}
})
</script>

This should grab fields (just change to yours), store in localStorage then open next page (should be action attr on form). On next page, we're looking in localStorage for values and populating the form.

• edit: i wrote this from phone so pardon typos...

Answer 2

Personally, I use the QueryParser() constructor found here.

This has the following advantage over the gup() function posted by Matthew Nie :

• Parses the query string once and stores all parameters as properties of an object.

It also allows :

• Stored parameters to be changed or cleared
• New parameters to be added
• A new query query string to be built from the currently stored parameters
• Links to be built with href containing a query string built from the currently stored parameters.

In conjunction with jQuery, use QueryParser() as follows :

Page 1

• Submit the form as described by Maksym Kozlenko.

Page 2

• Install jQuery and QueryParser() on the page
• For each form field, $("#formID [name='fieldName']").val($q.fieldName).

Or to save having to hand-code each form field individually :

$.each($("#myform")[0].elements, function(index, element) {
    $(element).val($q[element.name]);
});

Thus, the form on the page 2 will be populated with the values entered/selected on page 1.

DEMO

Answer 3

Using the idea @Maksym Kozlenko proposed of using a plain old HTML form for page one and submitting to the second page with the GET method. You can then use javascript to get the GET data you sent over using this function, I've been using this for a while and I found it on this site.

    function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

Answer 4

Why not to make things very simple with plain old HTML?

<form action="/second_page_url" method="GET">
   ... form fields ...
   <input type="submit" />
</form>

• Set action attribute to second page URL. Submit form using submit button or Java Script.
• If form uses GET method all field values will be available in window.location (you can parse URL parameter string into JS object) or process form POST data on server and add to the page
• Set second page controls with data provided

It's also possible to use cookies, HTML5 local storage, but you should take into account that user can have more than one widnow/tab open.

You can also serialize form values using jQuery's serialize() method, but I don't see any reason doing this unless you send your data using AJAX request.