Loading Placeholder tag in FORM when variables are set

Question

I have a simple user settings form written in HTML5 which commits user defined settings to local storage.

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. 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.

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.

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.

Loading Placeholder tag in FORM when variables are set

Question

1 answers

solution1
0 2014-07-28 12:14:33

Loading Placeholder tag in FORM when variables are set

Question

1 answers

solution1 0 2014-07-28 12:14:33

solution1
0 2014-07-28 12:14:33