can reload current page without losing form data? used..
window.location = window.location.href; and
window.location.reload(true); but these 2 things can't earlier form datas me. wrong ? when refresh browser manually, fine (i don't lose form data). please guide me how figure out.
here full code...
<div class="form-actions"> <form> <table cellpadding = "5" cellspacing ="10"> <tr class="control-group"> <td style="width: 100px;"> <div>name: <font color="red">(*)</font></div> </td> <td> <input type="text" id="inputname" placeholder="name" required> </td> </tr> <tr class="control-group"> <td> <div>email: <font color="red">(*)</font></div> </td> <td> <input class="span3" placeholder="user@gmail.com" id= "inputemail" type="email" required> </td> </tr> <tr class="control-group"> <td> <div>phone: </div> </td> <td> <input type="text" id="inputphone" placeholder="phone number"> </td> </tr> <tr class="control-group"> <td> <div>subject: <font color="red">(*)</font></div> </td> <td> <input type="text" id="inputsubject" placeholder="subject" required> </td> </tr> <tr class="control-group"> <td colspan ="2"> <div> <div>detail: </div> <div class="controls"> <textarea id="inputdetail"></textarea> </div> </td> </tr> <tr> <td colspan="2"> <div> <label style="font-weight: bold;" class="checkbox"> <input id="confirmcheck" value="" type="checkbox"> agree personal information handling policy </label> </div> <div id = "alert_placeholder"></div> <div class="acceptment"> [personal information handling policy]<br> <br> </div> </td> </tr> <tr> <td colspan="2"> <div align="center"> <button id="btnconfirm" class="btn btn-primary">confirm</button> <input type="reset" style="width: 65px; height: 27px;" id="btnreset" class="btn"> </div> </td> </tr> </table> </form> </div> and @ js file..
function bind() { $('#btnconfirm').click(function(e) { if ($('#confirmcheck').is(":checked")) { getconfirmationforsendfaq(); } else { e.preventdefault(); showalert("you should accept \"personal information policy\" !", "alert-error"); } });};function getconfirmationforsendfaq() { var name = $('#inputname').val(); var email = $('#inputemail').val(); var phone = $('#inputphone').val(); var subject = $('#inputsubject').val(); var detail = $('#inputdetail').val(); $('.form-actions').empty(); html = []; html.push("<table cellpadding ='8' class = 'submitinfo'"); html.push("<tr>"); html.push("<td class = 'title'>name:</div>"); html.push("<td class = 'value'>"+ name +"</td>"); html.push("</tr>"); html.push("<tr>"); html.push("<td class = 'title'>email address:</div>"); html.push("<td class = 'value'>"+ email +"</td>"); html.push("</tr>"); if (phone.trim().length > 0) { html.push("<tr>"); html.push("<td class = 'title'>phone no:</div>"); html.push("<td class = 'value'>"+ phone +"</td>"); html.push("</tr>"); } html.push("<tr>"); html.push("<td class = 'title'>subject:</div>"); html.push("<td class = 'value'>"+ subject +"</td>"); html.push("</tr>"); html.push("<tr>"); html.push("<td class = 'title'>detail info:</div>"); html.push("<td class = 'value'>"+ detail +"</td>"); html.push("</tr>"); html.push("<tr>"); html.push("<td colspan='2'><div align = 'center'>"); html.push("<button id='btnsend' class='btn btn-primary' style='width: 65px;'>send</button>"); html.push("<button id='btnreturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>return</button>"); html.push("</div></td></tr>"); html.push("</table>"); $('.form-actions').append(html.join('')); $('#btnreturn').click(function(e) { // here want know how do..... }); $('#btnsend').click(function(e) { alert("doom"); });}
you can use various local storage mechanisms store data in browser such web storage, indexeddb, websql (deprecated) , file api (deprecated , available in chrome) (and userdata ie).
the simplest , supported webstorage have persistent storage (localstorage) or session based (sessionstorage) in memory until close browser. both share same api.
you can example (simplified) when page reload:
window.onbeforeunload = function() { localstorage.setitem(name, $('#inputname').val()); localstorage.setitem(email, $('#inputemail').val()); localstorage.setitem(phone, $('#inputphone').val()); localstorage.setitem(subject, $('#inputsubject').val()); localstorage.setitem(detail, $('#inputdetail').val()); // ... } web storage works synchronously may work here. optionally can store data each blur event on elements data entered.
at page load can check:
window.onload = function() { var name = localstorage.getitem(name); if (name !== null) $('#inputname').val(name); // ... } getitem returns null if data not exist.
use sessionstorage instead of localstorage if want store temporary.
Comments
Post a Comment