Get data from form and write to cookie with jQuery

Question

bit of a jQuery noob but learning quickly thanks to StackOverflow.

Can anyone give me code that will get data from a form and write it out to a cookie (not a session cookie) using jQuery. I am loading the jQuery cookie plugin from here:

https://github.com/carhartl/jquery-cookie

I'd also like to know if I have to load my code when the DOM is ready as previously with php I loaded cookies first thing. Can't get my head round the DOM yet.

Thanks in advance.

OK here is the current code, thanks to reply below. I can't get the cookie working though but the alert works fine when uncommented:

           <form id="myform">
              <fieldset>
                <h3>Search</h3>
                <p>
                  <label>Your search *</label>
                  <input type="text" id="mysearch" pattern="[a-zA-Z ]{5,}" maxlength="30" />
                </p>
                <fieldset>
                    <input type="range" id="range" min="1" max="30" value="10"  />
                    <input type="range" id="range2" min="30" max="9000" value="2000"  />
                 </fieldset>

                <button id="subbtn" type="submit">Submit form</button>
                <button type="reset">Reset</button>
              </fieldset>
            </form>


        $(function() {
        // initialize tooltip
        $(".imgwrap").tooltip({ 
        //$(".tooltip").tooltip({ effect: 'slide'});
           // tweak the position
           offset: [10, 2],

           // use the "slide" effect
           effect: 'slide'

        // add dynamic plugin with optional configuration for bottom edge
        }).dynamic({ bottom: { direction: 'down', bounce: true } });
        });

        //this one loads the form validator
        $("#myform").validator();

        //this one for the slider
        $(":range").rangeinput();

    $("#subbtn").on("click", function () {
    // alert("Cookie!");
        $.cookie('Searchitem', $("#mysearch").val(), { expires: 365 });
    });

Any ideas why my cookie is not setting? Browser is set to accept and I'm debugging with Firebug.

Slippery Pete · Accepted Answer · 2012-11-05T19:32:08.930

1

A persistent cookie is the same as a session cookie except it has an expiration date so it hangs around.

This will write the value of the text input to a cookie that expires in 365 days:

    <input id="txt" type="text" value="foo" />
    <input id="btn" type="button" value="write cookie" />

...

    $(document).ready(function () {
        $("#btn").on("click", function () {
            $.cookie('myCookie', $("#txt").val(), { expires: 365 });
        });
    });

EDIT

New code per updated question:

    $(function () {

        // initialize tooltip
        $(".imgwrap").tooltip({
            //$(".tooltip").tooltip({ effect: 'slide'});
            // tweak the position
            offset: [10, 2],

            // use the "slide" effect
            effect: 'slide'

            // add dynamic plugin with optional configuration for bottom edge
        }).dynamic({ bottom: { direction: 'down', bounce: true} });

        //this one loads the form validator
        $("#myform").validator();

        //this one for the slider
        $(":range").rangeinput();

        $("#subbtn").on("click", function () {
            // alert("Cookie!");
            $.cookie('Searchitem', $("#mysearch").val(), { expires: 365 });
        });

    });

edited Nov 05 '12 at 19:32

answered Nov 02 '12 at 20:17

Slippery Pete

3,051
1
13
15

Used your code Pete and added to the original post. Still can't set the cookie, any ideas? – Sara44 Nov 03 '12 at 18:36
Make sure all your code is wrapped in $(document).ready(). That got your example working for me. See my updated answer. – Slippery Pete Nov 05 '12 at 13:45
I'll try this thanks. I thought that using $(function () { was the same as using $(document).ready() so had I got a mis-placed bracket or is there something I'm not getting here? – Sara44 Nov 05 '12 at 19:22
Yes, they are equivalent. Updated my answer to use $(function() {..}). I think the problem in the code posted in your question is that you close the encapsulating function before the validator line, so the validator, rangeinput, and click handler are run before the DOM is ready, and therefore don't work. – Slippery Pete Nov 05 '12 at 19:34

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

I'm assuming from your tagging you want to submit the form using GET. You could use the method described here to extract the URL string value.

Then it's just a matter of setting the value to the cookie:

$.cookie('mycookie', getParameterByName('varname'), {expires: 100});

You can check the value of the cookie like so:

console.log($.cookie('mycookie'));

edited May 23 '17 at 11:48

Community

1
1

answered Nov 02 '12 at 20:16

koosa

2,966
3
31
46

Thanks Mark, will look at the method you link to. – Sara44 Nov 03 '12 at 18:37

Get data from form and write to cookie with jQuery

Thanks in advance.

2 Answers2