CODEWITHSUNDEEP
javascriptjquerycookiescheckboxmodal-dialog
dave
dave

Reputation: 23

Modal box + checkbox + cookie

I would like to achieve the following:

I've been getting somewhere with this:

http://dev.iceburg.net/jquery/jqModal

In that I can get the modal box displaying on page load, but I can't work out how to get the form to make the checkbox mandatory and close the box. I also don't know where to start when setting a cookie.

Any pointers would be much appreciated.

Thanks

EDIT: to include code:

Index.html - to display modal box on page load

$().ready(function() {
  $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });

    setTimeout($('#ex2').jqmShow(),2000); 

});

2.html - modal box content loaded via ajax

function validate(frm) {
        if (frm.checkbox.checked==false)
    {
        alert("Please agree to our Terms and Conditions.");
        return false;
    }
}


<form action="" method="POST" onSubmit="return validate(form);" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>

Upvotes: 2

Views: 4556

Answers (3)

random it
random it

Reputation: 21

It works, finally! I was missing the callback when the cookie exists and these tics '' around the value of the cookie. Here is how it looks like. Please, let me know if there is some obvious mistake. (many thanks for your support)

function confirm(msg,callback) {
  $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
      .html(msg)
    .end()
    .find(':submit:visible')
      .click(function(){
        if(this.value == 'Proceed'){
           $.cookie("agreed_to_terms", '1', { expires : 1, path: '/' }); //set cookie, expires in 365 days
           (typeof callback == 'string') ?
            window.location.href = callback :
            callback();
        }
        $('#confirm').jqmHide();
      });
}


$().ready(function() {
  $('#confirm').jqm({overlay: 88, modal: 'true', trigger: false});

  // trigger a confirm whenever links of class alert are pressed.
  $('a.confirm').click(function() { 
    if ($.cookie('agreed_to_terms') == '1'){window.location.href = callback =
            callback()
       //they already have cookie set
    }else{
       confirm('About to visit: '+this.href+' !',this.href); 
    }
    return false;
  });
});// JavaScript Document

Upvotes: 1

adamJLev
adamJLev

Reputation: 14031

Load the jquery cookie plugin to allow to set/read cookies: http://plugins.jquery.com/project/cookie then.. something like this below. Untested, but you get the idea

index.html:

$().ready(function() {
    if (!$.cookie('agreed_to_terms'))
    {
        $('#ex2').jqm({modal: 'true', ajax: '2.html', trigger: 'a.ex2trigger' });
        $('#ex2').jqmShow();    
    }
});

2.html:

$().ready(function()
{
    $('#agreeFrm').submit(function(e)
    {
        e.preventDefault();

        if ($(this).find('input[name=checkbox]').is(':checked'))
        {
            $.cookie('agreed_to_terms', '1', { path: '/', expires: 999999 });
            $('#ex2').jqmHide(); 
        }
    });
});

<form id="agreeFrm" action="" method="POST" name="form">
<input type="checkbox" name="checkbox" id="checkbox" value="1">&nbsp;I hereby agree to all Terms and Conditions</a>
<input type="submit" value="Submit">
</form>

Upvotes: 2

Scott
Scott

Reputation: 1228

I used a JQuery plugin not long ago called SimpleModal

I was very impressed with how easy it was. On the modal I had multiple checkboxes and to carried the values of the checkboxes back to the page the modal was on after a submit button was hit.

All the info and demos are on the SimpleModal homepage

Upvotes: 1

Related Questions