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!

Are you against using PHP? It's much easier to transfer data from one page to the next using PHP than it is with jQuery. With jQuery I would think that it may be easier to use the same page, hiding the "page 1" form, reveal/show the new form and inject the values from the first form to the second — JT Smith, May 04 '12 at 01:11
Look into [serialize](http://api.jquery.com/serialize/) and [ajax/post](http://api.jquery.com/jQuery.post/) — JT Smith, May 04 '12 at 01:16
Single-page scheme may well be easier. Instead of submitting the form, adjust to page (with jQuery) to convert "page 1" into "page 2". Thus the form, complete with its user entries, is retained and you need do only minor adjustments (hide the submit button). — Beetroot-Beetroot, May 04 '12 at 02:18

score 1 · Answer 1 · answered Sep 30 '19 at 11:02

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...

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

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.

edited May 23 '17 at 12:20

Community

1
1

answered May 04 '12 at 02:20

Maksym Kozlenko

10,273
2
66
55

wow, I would have never considered this. What do you mean but 'window-location'? – patrick May 04 '12 at 02:29
window.location.href returns current page URL with parameters. Parse fucntion converts it into JS object with parameter name as a key and value – Maksym Kozlenko May 04 '12 at 02:32
So if I understand correctly 1) Submit via HTML 2)Parse Via JS 3)send via? 4) Retrieve via? 5)Inject with jQuery. – patrick May 04 '12 at 02:38
What is the parse function @Maksym Kozlenko? – Beetroot-Beetroot May 04 '12 at 02:41
@Beetroot-Beetroot: check Matthew Nie answer or go to http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript/901144#901144 – Maksym Kozlenko May 04 '12 at 04:04
@patrick: on step two you already have your form data in JS object. So it's up to you how do you want to use it – Maksym Kozlenko May 04 '12 at 04:07
@marksym. Now that it is in JS object it will be stored while the new page loads? If yes, I just want to extract it from the object at this point and inject it into an existing form option value. – patrick May 04 '12 at 04:27

score 0 · Answer 3 · answered May 04 '12 at 03:11

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];
}

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

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

jQuery to carry over a form data to a new page

4 Answers4

Page 1

Page 2