设置变量后在FORM中加载占位符标签

Question

I have a simple user settings form written in HTML5 which commits user defined settings to local storage. 我有一个用HTML5编写的简单用户设置表单，该表单将用户定义的设置提交到本地存储。

I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings. 我想要这样，以便如果有人再次访问设置页面，并且定义了用户设置，则占位符和/或值将使用这些设置预填充表单。

I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. 我尝试在开始和结尾处使用window.load，document.ready，但是如果单击“重新加载”，我只能获得加载该值的表单。 I need these value to prefil if the page is visited. 如果访问了页面，我需要这些值进行预过滤。

Here is my version of the form which loads the values if you RELOAD the page 这是我的表单版本，如果您重新加载页面，它将加载值

Script first 脚本优先

function loadUserSettings() {
    $("#full_name").attr("placeholder", db_user.full_name);
    $("#mobile_number").attr("placeholder", db_user.mobile_number);
    $("#email_address").attr("placeholder", db_user.email_address);

    $("#full_name").attr("value", db_user.full_name);
    $("#mobile_number").attr("value", db_user.mobile_number);
    $("#email_address").attr("value", db_user.email_address);
}

and now the form 现在是表格

<body>

  <div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
      <div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
          <a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
              Back
          </a>
          <a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
              Help
          </a>
          <h3 class="global_header">
              Settings
          </h3>
      </div>
      <div data-role="content" style="padding: 1%">
          <form id="postSettings" action="" class="global_form">
              <div data-role="fieldcontain" data-controltype="textinput" class="full_name">
                  <label for="full_name">
                      Name
                  </label>
                  <input name="full_name" id="full_name" type="text" data-mini="true"/>
              </div>
              <div data-role="fieldcontain" data-controltype="textinput" class="email_address">
                  <label for="email_address">
                      Email Address
                  </label>
                  <input name="email_address" id="email_address" type="email" data-mini="true"/>
              </div>
              <div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
                  <label for="mobile_number">
                      Mobile Number
                  </label>
                  <input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
              </div>
              <input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
          </form>
      </div>
  </div>
</body>

<script language="JavaScript">
    document.ready = loadUserSettings();
</script>

I have managed a workaround using a function that I attach to my settings buttons which basically 我使用附加到设置按钮上的功能来管理变通方法，基本上

function loadSettingsPage() {
    window.location.href = "settings.html";
}

and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function. 每次预填充占位符/值都没问题，但是我使用的是“ FLIP”的数据转换链接，而使用上述函数会丢失该链接。

SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition. 因此，理想情况下，我想在单击正常链接时修复占位符的注入（我怀疑这只是一个不会循环的页面刷新类型选项），或者使我的loadSettingsPage使用JQuery翻转转换。

Thanks in advance for any assistance. 在此先感谢您的协助。

Answer 1

OK, I was able to get around the issue with some custom functions. 好的，我可以通过一些自定义功能解决该问题。 I had to lose the flip effect, and move to a simple fade but I ended up using 我必须失去翻转效果，然后转到简单的淡入淡出，但最终还是使用了

function fadeIn() {
    $("body").hide();
    $("body").fadeIn(500);
}

function loadPageSettings(urlvar) {
    $("body").fadeOut(500, function(){ window.location.href = urlvar; });
}

for the custom functions 用于自定义功能

All hyperlinks used something like this 所有超链接都使用了这样的内容

<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>

and at the footer of every page I just had 在每页的页脚处

<script language="javascript">
    window.onload = fadeIn();
</script>

So now I have pages loading properly with all dynamic content an a consistent fading effect. 因此，现在我可以正确加载所有动态内容的页面，并具有一致的褪色效果。

设置变量后在FORM中加载占位符标签

问题描述

1 个解决方案

解决方案1
0 2014-07-28 12:14:33

设置变量后在FORM中加载占位符标签

问题描述

1 个解决方案

解决方案1 0 2014-07-28 12:14:33

解决方案1
0 2014-07-28 12:14:33