javascript - How to save and restore multiple values inside a form field (using front-end logic only) -
javascript - How to save and restore multiple values inside a form field (using front-end logic only) -
i looking way save table values multiple <input> form fields, , able restore them. why -- need have way of switching between english language , metric systems, without losing precision during conversion.
so have below code assumes values entered in english language unit system. if user switches metric, the values converted user. switching english language right nothing, because while can reverse conversion, doing lose precision eventually. don't know how approach problem of saving , restoring multiple values, , want form is restore entered values when user switches english. assume first need have way save values upon original entry.
when trying code below, first alter selection english language metric. see values alter converted value. going english language nothing. save , restore buttons nil right well. also, there no differentiation between individual values don't know how encode them. don't want assign unique ids each, unless have to. (so i.e. right entering own values ignored, , first row first cell have impact remaining cells, when conversions, since using class selector cells, , not selecting them each individually)
what need help with:
how address individual values? must generate , assign unique id them? how save these values -- can implicitly upon entry, or explicitly via "save" button how restore values -- can explicitly restored via "restore" button, or implicitly via select box, when changing original scheme of unitsedit mention php:
"add row" nil programmatically here, means more rows added. right done via php -- form post issued server back-end, , page refreshes row. there way utilize php generate of html if need be. in, solution not have front-end only, figure more loosely coupled php , front end ends are, better. if there front-end (js/jquery) solution prefer first, rather hybrid js/php approach, take both.
class="snippet-code-js lang-js prettyprint-override">$("#unit_system").change(function() { if ($('#unit_system').val() == "metric") { $(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h')); } }); function convert(val, from, to) { var conv = []; conv["m3h"] = 1 / 3600; conv["gpm"] = 6.3090196485533854530026767050539e-5; homecoming val * conv[from] / conv[to]; }; class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="my_form"> <select id="unit_system"> <option value="english">english</option> <option value="metric">metric</option> </select> <button id="save_values" type="button">save values</button> <button id="restore_values" type="button">restore values</button> <table id="values"> <tr> <td>row 1</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td>row 2</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td>row 3</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td colspan="3"><button>add row...</button></td> </tr> </table> </form>
you can utilize jquery.data() store , retrieve arbitrary info each input on page. i've created runnable illustration below. take @ handlers created "save" , "restore" buttons @ bottom of code.
edit: saw requirement "add row" button , added event handler well.
class="snippet-code-js lang-js prettyprint-override">$("#unit_system").change(function() { if ($('#unit_system').val() == "metric") { $(".input_gpm").val(convert($(".input_gpm").val(),'gpm','m3h')); } }); function convert(val, from, to) { var conv = []; conv["m3h"] = 1 / 3600; conv["gpm"] = 6.3090196485533854530026767050539e-5; homecoming val * conv[from] / conv[to]; }; $("#save_values").on("click", function() { $("input").each(function() { $(this).data("restore", $(this).val()); }); }); $("#restore_values").on("click", function() { $("input").each(function() { $(this).val($(this).data("restore")); }); }); $("#addnew").on("click", function() { var lastdatarow = $("#values tr:nth-last-of-type(2)"); var newdatarow = lastdatarow.clone(); newdatarow.find("td:first").html("row " + $("#values tr").length); lastdatarow.after(newdatarow); }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="my_form"> <select id="unit_system"> <option value="english">english</option> <option value="metric">metric</option> </select> <button id="save_values" type="button">save values</button> <button id="restore_values" type="button">restore values</button> <table id="values"> <tr> <td>row 1</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td>row 2</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td>row 3</td> <td><input class="input_gpm" type="text" value="4" /></td> <td><input class="input_gpm" type="text" value="4" /></td> </tr> <tr> <td colspan="3"><button id="addnew">add row...</button></td> </tr> </table> </form>
javascript php jquery save restore
Comments
Post a Comment