JQuery - Pass value from an input box to a input box in another page

Question

quick question here.

Normally, using JQuery, if I want to pass the value from an input box to another one on the same page, I`d just do something like this :

    <script type="text/javascript">

    $('#postalCodeBtn').live('click', function(){
    var text = $('#from1').val();
    $('#from').val(text);
    });

</script>

But now assuming the input "from1" is on a page called detail, and "from" is on another page called maps.

How can I pass the value between both pages ?

Thanks !

By submitting the form, then using a server side language to retrieve the data and populate the form on generation, maybe? — Shef
– Shef, Commented Jul 27, 2011 at 13:51
Does maps open from a link within detail (or vice versa)? Or are they just two totally separate pages? — Town
– Town, Commented Jul 27, 2011 at 13:51
My button looks like this. <a href="./maps.page"><button type="button" id="postalCodeBtn" data-theme="z">Find in Store</button></a> — JFFF
– JFFF, Commented Jul 27, 2011 at 13:54

Philip Ramirez · Accepted Answer · 2011-07-27 14:37:42Z

If it's not being loaded via AJAX, you're going to have to send it to the server and use a server side language (php, python, etc.) to add it into maps. I suppose you could also save it to a cookie if you REALLY wanted to and then check for it on the "maps" page. You could also send it via GET (modify the link, if there is one) and then use JS to parse it but if it's a form field that's being POSTed, server side language it is.

Edit: Well, without knowing more, this is the best I can do for you.

<script type="text/javascript">

function buildValue(sValue) {
    if (/^\s*$/.test(sValue)) { return(null); }
    if (/^(true|false)$/i.test(sValue)) { return(sValue.toLowerCase() === "true"); }
    if (isFinite(sValue)) { return(parseFloat(sValue)); }
    if (isFinite(Date.parse(sValue))) { return(new Date(sValue)); }
    return(sValue);
}

function getVars() {
    var oGetVars = {}
    if (window.location.search.length > 1) {
        var iCouple, aCouples = window.location.search.substr(1).split("&");
        for (var iCouplId = 0; iCouplId < aCouples.length; iCouplId++) {
            iCouple = aCouples[iCouplId].split("=");
            oGetVars[unescape(iCouple[0])] = iCouple.length > 1 ? buildValue(unescape(iCouple[1])) : null;
        }
    }
    return oGetVars;
}

$(function() {
    // The name of the parameter we're interested in
    var param = "postalCode";

    // Gets the params from the URL
    getParams = getVars();
    // If the parameter we want is in the URL AND the #from element is found...
    if (getParams[param] && $("#from").length) {
        // Set the value of the #from element to the value of the parameter
        $("#from").val(getParams[param])
    }

    // Store the postalBtn in a variable for easy access
    var postalBtn = $("postalCodeBtn");

    // If the postalBtn is on this page
    if (postalBtn.length) {
        // Create a flag to track modification of anchor
        var modifiedAnchor = false

        // Adds the GET parameter to the parent anchor on button click
        postalBtn.click(function() {
            // In case the user gets click happy
            if (modifiedAnchor) return;

            // Get the parent anchor DOM element
            var anchor = $(this).parent('a')[0]

            // Append the GET parameter to the anchor's href
            // (this assumes the anchor HREF doesn't have GET parameters already)
            anchor.href += "?" + param + "=" + encodeURIComponent($("#form1").val())

            // Set our modifiedAnchor flag to true
            modifiedAnchor = true
        }
    }
})
</script>

I believe it is being loaded via ajax. I'm relatively new to web development, I'm at school right now. I think the right way to do this would be something called a GET method but I have no idea how to accomplish that.
Wow. That's awesome. Thanks a lot for the help I'll check this out and see how all of this works. Thanks again !

ctrlShiftBryan · Accepted Answer · 2011-07-27 13:55:34Z

0

You cannot use JavaScript alone to pass values between pages.

You will need to use another method like a parameter with a Post/Get, a cookie or server side code.

answered Jul 27, 2011 at 13:55

ctrlShiftBryan

27.9k26 gold badges76 silver badges78 bronze badges

Collectives™ on Stack Overflow

JQuery - Pass value from an input box to a input box in another page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related