set cookie in jquery dialog and show selected value on page after submit with postcode

问题

i'm making a page where people have to fill in their postcode so they can search factories in a near area.

i used the jquery modal dialog where people have to enter their postcode and click submit. then i want a cookie to be set so when the user enters the site for a second time, the postcode is still set. so he can search for factories directly.

i have this popup:

the people have to fill in their postcode there and then click opslaan (save)

Here you can see the mainpage with the search function. people can search on different kilometers.

I want a label or something with the filled in postcode so people can search with their postcode.

EDIT:

my jquery dialog code:

$(function() {

$( "#dialog" ).dialog(
{ 
show: "slow",
modal: "true",
width: 600,
show: "fold",
hide: "fade",
resizable: false,
draggable: false,
buttons: [ { id: "go", text: "Opslaan", click: function() { $( this ).dialog( "close" ); } } ],
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide();  }});
$(".ui-widget-overlay").css({background: "#000", opacity: 0.8});
});

When i put this code:

<input type="text" id="postcode" value="" name="search"/>
<button id="go">Opslaan</button>

In the div for the jquery dialog. it does not work.

<div id="dialog" title="Welkom bij OostWestRegioBest.nl">
  <p>Vul hier uw postcode in en druk op opslaan:</p>
  <br />


</div>

回答1:

I recommend jquery cookie here: https://github.com/carhartl/jquery-cookie

You would then do

$.cookie('postcode', $('#postcode').val());

to set it, and this to read it:

if(typeof $.cookie('postcode') !== 'undefined'){
    $('#postcode').val($.cookie('postcode'));
}

So, for example, if you have the following HTML:

<input type="text" id="postcode">
<button id="go">Go!</button>

Then your JS would look like so:

$(document).ready(function(){
    //story the cookie on button press
    $('#go').click(function(){
            $.cookie('postcode', $('#postcode').val());        
    });

    //retrieve the cookie on load if it's not undefined
    if(typeof $.cookie('postcode') !== 'undefined'){
            $('#postcode').val($.cookie('postcode'));
    }
});

Here is a functioning example: http://tinker.io/38617/4

回答2:

function setCookie(sName, sValue) {

    if(getCookie(sName)==null) {
        if(isValidUsrURL(path)) {
            document.cookie = sName + "=" + escape(sValue) + "; " +
                "path=/; ";
        } else {
            domainname='.example.com';
            document.cookie = sName + "=" + escape(sValue) + "; " +
                "path=/; domain=" + domainname + "; ";
        }
    }


}

function getCookie(sName) {

    // cookies are separated by semicolons
    var aCookie = document.cookie.split("; ");
    for (var i=0; i < aCookie.length; i++) {
        // a name/value pair (a crumb) is separated by an equal sign
        var aCrumb = aCookie[i].split("=");
        if (sName == aCrumb[0]) {
            return unescape(aCrumb[1]);
        }
    }
    // a cookie with the requested name does not exist
    return null;

}

function deleteCookie(sName) {
    document.cookie = sName + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
}


//EG usage : 
//deleteCookie('brochTabURL', '/', '.example.com');
//setCookie('brochTabURL', document.location.href );
//setCookie("COOKIE_CHECK","YES");
//var loginId = getCookie("COOKIE_CHECK");

来源：https://stackoverflow.com/questions/15225225/set-cookie-in-jquery-dialog-and-show-selected-value-on-page-after-submit-with-po

标签

php

javascript

jquery

codeigniter