how do I pass Jquery value to a different page?

Question

I'm trying to pass an input value to a different page after the new page loads. Is this possible with just HTML and jQuery?

here is my code:

<input id='search' type="text" size="100"/>
<button id='search-button'><p>G</p><img src='img/search.png' alt="GO"/></button>
<h1 class="show-result">Results for</h1>



//Jquery//
 $('#search-button').click(function() {

var search = $('#search').val();

  window.location.href = 'result.html';

$('.show-result').append( ' "' + search + '"');
return false;
});

You could pass it as a get, then on your next page you could have javascript get the URL and splice it to find the value. — ntgCleaner, Mar 18 '14 at 17:17

score 1 · Answer 1 · edited May 23 '17 at 11:56

No. You cannot access elements in one page from another page using jQuery. But pass information as query parameters and then retrieve on load of page. Try this:

$('#search-button').click(function() {
   var search = $('#search').val();
   window.location.href = 'result.html?search='+search;
});

Click on below link for solution to get query parameters from url:

jQuery: How to get parameters of a url? add code in this link to get search value and append it in your results.html.

score 1 · Accepted Answer · answered Mar 18 '14 at 17:21

Your first page would read something like :

$('#search-button').click(function() {
    var search = $('#search').val();
    window.location.href = 'result.html?search=' + search; //This line is edited
    $('.show-result').append( ' "' + search + '"');
    return false;
});

Your second page could read something like:

function getUrlVars() { // create a cool little function
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
});
return vars;
}

var search = getUrlVars()["search"]; //use that function
alert(search); //this is just one way to show the GET parameter

Credit belongs here: http://papermashup.com/read-url-get-variables-withjavascript/

This worked for me and looks exactly the way I imagined! I replaced the alert(search); with $('.show-result').append( ' "' + search + '"'); and it worked! Thanks man! — user2793657, Mar 18 '14 at 17:46
Great! I'm glad it worked out. Good luck with the rest of your project! — ntgCleaner, Mar 18 '14 at 17:52

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Try this, You can pass the value as Query string parameter as like shown in below. in result.html page, you can used to get the search parameter using jQuery: How to get parameters of a url?

var search = $('#search').val();
window.location.href = 'result.html?search='+search;

edited May 23 '17 at 11:43

Community

1
1

answered Mar 18 '14 at 17:17

Krish R

22,583
7
50
59

You should probably be a little more verbose and explain why this works and show an example of accessing the search string. – Metagrapher Mar 18 '14 at 17:19

how do I pass Jquery value to a different page?

3 Answers3

Linked