Javascript: Need form to disappear from all site pages after submit
0
This form exists in all the site pages. It should disappear after the first submit.
I want a new version of this code using a basic feature of browsers
$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>javascript html ajax
edited Nov 22 at 22:33
Dacre Denny
9,8214929
asked Nov 22 at 22:13
Jeff75
166
add a comment |
0
This form exists in all the site pages. It should disappear after the first submit.
I want a new version of this code using a basic feature of browsers
$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>javascript html ajax
edited Nov 22 at 22:33
Dacre Denny
9,8214929
asked Nov 22 at 22:13
Jeff75
166
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
1
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26
add a comment |
0
0
0
This form exists in all the site pages. It should disappear after the first submit.
I want a new version of this code using a basic feature of browsers
$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>javascript html ajax
edited Nov 22 at 22:33
Dacre Denny
9,8214929
asked Nov 22 at 22:13
Jeff75
166
This form exists in all the site pages. It should disappear after the first submit.
I want a new version of this code using a basic feature of browsers
$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>$.ajax({
url: 'subscribe.php',
type: 'post',
data: {
email : $("#inputemail").val()
}
success: function() {
alert('Merci!')
}
});
$("close").click(function(){
$("#subscribe").hide();
});<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>javascript html ajax
javascript html ajax
edited Nov 22 at 22:33
Dacre Denny
9,8214929
asked Nov 22 at 22:13
Jeff75
166
edited Nov 22 at 22:33
Dacre Denny
9,8214929
asked Nov 22 at 22:13
Jeff75
166
edited Nov 22 at 22:33
Dacre Denny
9,8214929
edited Nov 22 at 22:33
Dacre Denny
9,8214929
edited Nov 22 at 22:33
Dacre Denny
9,8214929
9,8214929
asked Nov 22 at 22:13
Jeff75
166
asked Nov 22 at 22:13
Jeff75
166
asked Nov 22 at 22:13
Jeff75
166
166
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
1
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26
add a comment |
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
1
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
1
1
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26
add a comment |
1 Answer
1
active
oldest
votes
1
If I understand your question correctly, then one approach to this would be to use the XMLHttpRequest object as an alternative to jQuerys .ajax() method. Using the configuration for XMLHttpRequest as shown below, you should find this script behaves the same way as your current jQuery dependant script.
Also, on a successful response (ie status === 200), this script will remove the <div /> element that encloses your field/button from the document to achieve the desired "hiding" behaviour.
Although the newer fetch() API is generally preferred nowadays, the XMLHttpRequest object is used here to increase compatibility with older/basic browsers (as seems to be your requirement):
var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>answered Nov 22 at 22:26
Dacre Denny
9,8214929
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeingstyle="display:block"suggests to me the form is initially shown, and perhaps there is not much control over this.
– Dacre Denny
Nov 22 at 23:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438538%2fjavascript-need-form-to-disappear-from-all-site-pages-after-submit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
If I understand your question correctly, then one approach to this would be to use the XMLHttpRequest object as an alternative to jQuerys .ajax() method. Using the configuration for XMLHttpRequest as shown below, you should find this script behaves the same way as your current jQuery dependant script.
Also, on a successful response (ie status === 200), this script will remove the <div /> element that encloses your field/button from the document to achieve the desired "hiding" behaviour.
Although the newer fetch() API is generally preferred nowadays, the XMLHttpRequest object is used here to increase compatibility with older/basic browsers (as seems to be your requirement):
var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>answered Nov 22 at 22:26
Dacre Denny
9,8214929
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeingstyle="display:block"suggests to me the form is initially shown, and perhaps there is not much control over this.
– Dacre Denny
Nov 22 at 23:11
add a comment |
1
If I understand your question correctly, then one approach to this would be to use the XMLHttpRequest object as an alternative to jQuerys .ajax() method. Using the configuration for XMLHttpRequest as shown below, you should find this script behaves the same way as your current jQuery dependant script.
Also, on a successful response (ie status === 200), this script will remove the <div /> element that encloses your field/button from the document to achieve the desired "hiding" behaviour.
Although the newer fetch() API is generally preferred nowadays, the XMLHttpRequest object is used here to increase compatibility with older/basic browsers (as seems to be your requirement):
var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>answered Nov 22 at 22:26
Dacre Denny
9,8214929
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeingstyle="display:block"suggests to me the form is initially shown, and perhaps there is not much control over this.
– Dacre Denny
Nov 22 at 23:11
add a comment |
1
1
1
If I understand your question correctly, then one approach to this would be to use the XMLHttpRequest object as an alternative to jQuerys .ajax() method. Using the configuration for XMLHttpRequest as shown below, you should find this script behaves the same way as your current jQuery dependant script.
Also, on a successful response (ie status === 200), this script will remove the <div /> element that encloses your field/button from the document to achieve the desired "hiding" behaviour.
Although the newer fetch() API is generally preferred nowadays, the XMLHttpRequest object is used here to increase compatibility with older/basic browsers (as seems to be your requirement):
var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>answered Nov 22 at 22:26
Dacre Denny
9,8214929
If I understand your question correctly, then one approach to this would be to use the XMLHttpRequest object as an alternative to jQuerys .ajax() method. Using the configuration for XMLHttpRequest as shown below, you should find this script behaves the same way as your current jQuery dependant script.
Also, on a successful response (ie status === 200), this script will remove the <div /> element that encloses your field/button from the document to achieve the desired "hiding" behaviour.
Although the newer fetch() API is generally preferred nowadays, the XMLHttpRequest object is used here to increase compatibility with older/basic browsers (as seems to be your requirement):
var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');
if(getCookie('hasSubmit')) {
div.remove();
}
submit.addEventListener('click', function(event) {
event.preventDefault();
// Use xhr request for maximum compatbility with basic browsers
var xhr = new XMLHttpRequest();
xhr.open("POST", 'subscribe.php', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
// If the post is successful
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// then remove (hide) the div
div.remove();
setCookie('hasSubmit', 'true', 365);
}
}
// Send the post request
xhr.send("email=" + email.value);
});
close.addEventListener('click', function(event) {
div.remove();
});
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input id="submit" type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>answered Nov 22 at 22:26
Dacre Denny
9,8214929
edited Nov 22 at 22:48
answered Nov 22 at 22:26
Dacre Denny
9,8214929
answered Nov 22 at 22:26
Dacre Denny
9,8214929
answered Nov 22 at 22:26
Dacre Denny
9,8214929
9,8214929
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeingstyle="display:block"suggests to me the form is initially shown, and perhaps there is not much control over this.
– Dacre Denny
Nov 22 at 23:11
add a comment |
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeingstyle="display:block"suggests to me the form is initially shown, and perhaps there is not much control over this.
– Dacre Denny
Nov 22 at 23:11
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
I will just add that he probably needs to store the fact that the form was submitted in either a cookie or localStorage because the form will reappear on refresh or navigating to another page :)
– Arber Sylejmani
Nov 22 at 22:44
1
1
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
@ArberSylejmani good point - just updated answer (though in sandbox mode, access to cookies appears to be disabled)
– Dacre Denny
Nov 22 at 22:49
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
I don't know how much control he has over his code, but if it was me I would rather do the opposite, show the form only if the cookie was missing instead of having to div.remove() on every refresh.
– Arber Sylejmani
Nov 22 at 23:09
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeing
style="display:block" suggests to me the form is initially shown, and perhaps there is not much control over this.– Dacre Denny
Nov 22 at 23:11
@ArberSylejmani yes I agree - I had wondered about a "hidden by default" approach, but seeing
style="display:block" suggests to me the form is initially shown, and perhaps there is not much control over this.– Dacre Denny
Nov 22 at 23:11
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438538%2fjavascript-need-form-to-disappear-from-all-site-pages-after-submit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
to confirm, you're wanting to achieve this without jQuery?
– Dacre Denny
Nov 22 at 22:14
yes, using a basic browser's functionality
– Jeff75
Nov 22 at 22:16
by basic browser, do you mean, you need a solution with maximum support (ie for older browsers)?
– Dacre Denny
Nov 22 at 22:19
1
Or, to phrase it differently: Why would you want to do it without jquery?
– cars10m
Nov 22 at 22:19
no, there is a basic feature of browsers that allows me to do the same work
– Jeff75
Nov 22 at 22:26