如何在不使用数据库的情况下使用 jquery 将表单的最后一个输入设置为默认值


How to set the last input of my form to be the default value using jquery without using a database?

我只是symfony框架的新手,仍在研究如何将表单中的最后一个输入(例如,strength:79)设置为进度条的默认值,而无需在刷新页面后使用数据库。

这是我代码的一部分:index.html.twig

<form>
    <fieldset>
        <legend>Set chest targets</legend>
        <div class="clear"></div>
        <div class="responsivelabel aligninline" >
        <label>Strength:</label>
        </div>
        <div class="responsiveelement aligninline" >
        goal: 
        <input type="text" size="3" id="strength_goal" />
        <div class="clear"></div>
        <div class="responsivelabel aligninline" >
            <label>&nbsp;</label>
        </div>
        <div class="responsiveelement aligninline" >
            <p class = "clean-gray">Save Changes</p>
        </div>
    </fieldset>
</form>

这是我代码的一部分:index.html.twig

<script type="text/javascript">
    $(document).ready(function(){
        $("p.clean-gray").on('click', function(){
            var str = $("#strength_goal").val();
            var mov = $("#movement_goal").val();
            $("div.strength").css("width", str+'%')
            $("div.movement").css("width", mov+'%');
        });
    });
</script>

代码的某些部分:index.html.twig

strength
<div class="prog-barwrap mini">
    <div class="prog-bar strength" style="width:0%" ></div>
</div>  
movement
<div class="prog-barwrap mini">
    <div class="prog-bar movement" style="width:0%"></div>
</div>

请告诉我该怎么做。其他人说我应该使用session,但我不知道如何在symfony中做到这一点。提前谢谢。我目前使用的是 2.3 版本。

我尝试访问w3school:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_defaultvalue3它告诉我如何设置默认值,但是是否可以将我输入到表单中的最后一个数据作为新的默认值?

听起来您正在尝试在本地存储用户输入的最后值。

如果是这样,这是我必须经常做的事情,这是我使用的方法。

只需包含下面的javascript,然后在执行html时,将data-local-key="someKeyName"添加到要存储其最后一个值的任何元素中(您可以在其中命名某些KeyName,不要使用空格)。当用户输入数据并单击离开时,将保存该值。当页面加载时,它将自动搜索存储的值并重新输入它们。添加任意数量的元素,无需额外的 js 代码。

这是一个工作的小提琴

<input type="text" id="test" data-local-key="someKeyName" value="some initial value">

javascript:

/**
 * Feature detect + local reference for simple use of local storage
 * Use like:
 * if (storage) {
 *    storage.setItem('key', 'value');
 *    storage.getItem('key');
 * }
 *
 */
var storage;
var fail;
var uid;
try {
  uid = new Date;
  (storage = window.localStorage).setItem(uid, uid);
  fail = storage.getItem(uid) != uid;
  storage.removeItem(uid);
  fail && (storage = false);
} catch (exception) {}
// using the feature
$(function() {
  $(document).on('blur', '[data-local-key]', function() {
    var $this = $(this);
    if (storage) {
      storage.setItem($this.data('local-key'), $this.val());
    }
  });
  if (storage) {
    $('[data-local-key]').each(function() {
      var $this = $(this);
      var storedVal = storage.getItem($this.data('local-key'));
      if(storedVal) $this.val(storedVal);
    });
  }
});

如果您只是尝试存储一些任意数据,只需使用上面的第一部分并像这样调用它:

存储值:

if (storage) {
   storage.setItem('key', 'value');
}

检索值:

if (storage) {
    storage.getItem('key');
}