Question

如果表格已经完成，如何在标志为真的cookie中存储标志？

我有一个侧边栏包含一个表单，该表单在成功提交后淡出表单并使用其中一个用户输入显示消息。

此侧边栏表格显示在网站上的多个页面上。为了确定表单是否已在另一页上完成，我相信我可以使用标志变量来定义这是真还是假，然后根据存储的值显示表单或消息。

我从未使用过Cookie作为存储值的媒介，也不知道它们的正确语法。我可以在formubmit成功时简单地制作cookie。并且在每个页面上都有一个标题中的脚本，然后将被读取以显示表单。

这是最好的方法吗？什么是格式和正确的语法来识别这样的东西？

HTML

<div id="sidebarf">
<form id="sidebarform" onsubmit="return false" method="post" name="myForm" autocomplete="off" >
    <input type="text" name="name" id="username" placeholder="Name (eg. Rob James)" value="" required><br><br>
    <input type="text" name="location" id="userlocation" placeholder="Location (eg. Wacol)" value="" required><br><br>
    <input type="text" name="postcode" id="userpc" pattern="[0-9]{4}" placeholder="Postcode (eg. 4076)" maxlength="4" value="" required> <br><br>
    <input type="email" name="email" id="useremail" placeholder="Email Address (eg. someone@yourdomain.com" value="" required> <br><br>
    <input type="tel" name="phone" id="userphone" placeholder="Phone Number (eg. 0412345678)" maxlength="10" minlength="6" value="" required> <br><br>
    <textarea rows="4" cols="20" id="usercomment" placeholder="Comment/Question" value="" required></textarea><br><br>

    <input type="submit" id="sidebarformsubmit" value="Submit">
 </form> 
 </div>

JAVASCRIPT

$("#sidebarform").on("submit", function() {
    if ($("#username").val() == "") {
        return false;


}

$("#sidebarform").fadeOut("slow", function(){
      $("#sidebarf").html("Thankyou for your inquiry " + $("#username").val() + ". We will call or email you with further details within 3 business days." );
});

return false; 

/////////////////Is this the flag?/Correct Location?//////////////
//////var completed = true 
//////document.cookie=completed;
///////////

});
</script>

然后我会在页面加载时调用这样的东西吗？

///////////////////DOES NOT WORK/////////////////
 <script>
   function checkCookie()
 {
 var display=getCookie("completed");
if (complete!="true")
  {
  $("#sidebarf").html("Thankyou for your inquiry " + $("#username").val() + ". We will call or email you with further details within 3 business days." );
  }
else
  {
  $("#sidebarf").html //(Don't know what to put here!)
  }
}

在上述代码之后，我也有这个用于自定义有效性。但这不应该发挥作用。

 $(document).ready(function () {
    $('#username').on({
       invalid: function (e) {
        e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
            e.target.setCustomValidity("Please enter a name.");
         }
        },
         input: function(e) {
        e.target.setCustomValidity("");
       }
    });

正如我所说的，我真的不知道cookie的使用，所以代码就是我在网上搜索的内容。

Answer 1

如果您使用this jQuery cookie plugin，则可以大大简化您的代码。以下代码应在页面加载时检查cookie。如果找到cookie，则会立即隐藏表单而不进行动画处理。否则，在提交表单时，会设置cookie，以便在下一页加载时隐藏表单。

$(function() {
    var completed = $.cookie( 'completed' ),
        form = $('#sidebarform'),
        msg = $('#sidebarf');
    if( ( completed != undefined ) && ( completed == 'done' ) ) {
        form.hide();
        msg.html( 'Form already completed.' );
    }
    form.on("submit", function( e ) {
        e.preventDefault();
        if ( $("#username").val() == "" ) {
            return false;
        }

        $(this).fadeOut("slow", function() {
            msg.html("Thank you for your inquiry " + $("#username").val() + ". We will call or email you with further details within 3 business days." );
            form.submit();
            //or submit form via ajax ---> YOUR CHOICE
            $.cookie( 'completed', 'done' );
        });
    });
});

JS FIDDLE DEMO

如果表单已经完成，如何在标志为true的cookie中存储标志？

1 个答案: