javascript - setting/getting/checking multiple cookies generated by user-input (textboxes) in one go -
i'm bashing head against wall , hoping can help. i've got include 3 text boxes users enter values following cookies: name, city, , hobby. need use single button onclick event call function create 3 cookies (with values). need further function check existence of each cookie when page accessed. if 1 or more of cookies not set, alert box should notify user set unset cookie(s). if 3 cookies set, alert box should display contents of each cookie.
where hung (i think) on how pass value textbox , corresponding key arguments generic setcookie function. w3schools gives code template creating, getting , checking cookies (below) i've no idea how implement setting cookies via user-input or setting 3 @ once! thick brick, seems.
my html textboxes , submit button:
please enter name: <input type = "text" name = "name" id = "name"> <br> please enter city: <input type = "text" name = "city" id = "school"><br> please enter hobby: <input type = "text" name = "hobby" id = "hobby"><br> <button id = "btn12" onclick = "createcookies()">create cookies</button></p> </form>
w3schools cookie template:
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; } 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 checkcookie() { var user = getcookie("username"); if (user != "") { alert("welcome again " + user); } else { user = prompt("please enter name:", ""); if (user != "" && user != null) { setcookie("username", user, 365); } } }
any appreciated! i've googled can find on setting cookies in javascript , can't make heads or tails of it.
this possible. made example using html above. it's bit long i'll include here stackoverflow expects.
html:
<p> please enter name: <input type="text" name="name" id="name"> <br> please enter city: <input type="text" name="city" id="city"> <br> please enter hobby: <input type="text" name="hobby" id="hobby"> <br> <button id="btn12">create cookies</button> </p>
javascript:
document.getelementbyid('btn12').addeventlistener('click', createcookies); // jsfiddle runs code after page loads -- in other environments // run on page load document.getelementbyid("name").value = getcookie("name"); document.getelementbyid("city").value = getcookie("city"); document.getelementbyid("hobby").value = getcookie("hobby"); function createcookies(evt) { evt.preventdefault(); setcookie('name', document.getelementbyid("name").value); setcookie('city', document.getelementbyid("city").value); setcookie('hobby', document.getelementbyid("hobby").value); } function setcookie(cname, cvalue, exdays) { var d = new date(); exdays = exdays || 30; // default 30 days d.settime(d.gettime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toutcstring(); document.cookie = cname + "=" + cvalue + "; " + expires; } function getcookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); (var = 0; < 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 ""; }
you can add values in inputs, click on 'create cookies' button , reload page , inputs should have values entered before.
how work? need set input values on load. there code -- these lines:
document.getelementbyid("name").value = getcookie("name"); document.getelementbyid("city").value = getcookie("city"); document.getelementbyid("hobby").value = getcookie("hobby");
if there no value, input set nothing no problem there.
on click, run code:
function createcookies(evt) { evt.preventdefault(); setcookie('name', document.getelementbyid("name").value); setcookie('city', document.getelementbyid("city").value); setcookie('hobby', document.getelementbyid("hobby").value); }
that calls through setcookie
function -- modified defaults 30 days (the 3rd parameter) make things bit easier.
jsfiddle: https://jsfiddle.net/z7ayebpr/
Comments
Post a Comment