0

我有一个应用程序，用户必须在表单中输入有关自己的详细信息； 

        <ul class = 'rounded'>

            <li style = "color: #FFFFFF"><input type = "text" placeholder = "Name" name = "name" id = "name" autocapitalize = "on" autocorrect = "off" autocomplete = "off" style="color: #FFFFFF;  background: transparent url(../.png);  border: 0;  font: normal 17px Helvetica;  padding: 0;  display: inline-block;  margin-left: 0px;  width: 100%;  -webkit-appearance: textarea;" /></li>
            <li style = "color: #FFFFFF"><input type = "email" placeholder = "Email" name = "email" id = "email" autocapitalize = "off" autocorrect = "off" autocomplete = "off" style="color: #FFFFFF;  background: transparent url(../.png);  border: 0;  font: normal 17px Helvetica;  padding: 0;  display: inline-block;  margin-left: 0px;  width: 100%;  -webkit-appearance: textarea;" /></li>
            <li style = "color: #FFFFFF"><input type = "text" maxlength = "11" placeholder = "Telephone" name = "telephone" id = "telephone" style="color: #FFFFFF;  background: transparent url(../.png);  border: 0;  font: normal 17px Helvetica;  padding: 0;  display: inline-block;  margin-left: 0px;  width: 100%;  -webkit-appearance: textarea;" /></li><br>

            <li>Notifications<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'notifications' id = 'notifications' /></span></li>
            <li>Preview<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'preview' id = 'preview' /></span></li>

            <li>Set Profession</li>

            <select name = 'job' id = 'job'>
                <option value = 'jobselect'>Select Profession</option>
                <option value = 'job1'>Mechanical Engineer</option>
                <option value = 'job2'>Software Engineer</option>
                <option value = 'jobother'>Other</option>
            </select>

            <p style = 'font-weight: normal; color: white;'>If you chose 'Other', please specify: <input type = "text" placeholder = "Other" name = "other" id = "other" autocapitalize = "on" autocorrect = "off" autocomplete = "off" style="color: #777;  background: transparent url(../.png);  border: 0;  font: normal 17px Helvetica;  padding: 0;  display: inline-block;  margin-left: 0px;  width: 100%;  -webkit-appearance: textarea;"/></p>

        </ul>

    </form>

然后在一个按钮之后提交它。表单链接到一个 .js 文件，编码如下

 var jQT = $.jQTouch({

icon: 'kilo.png',
statusBar: 'black'

});

 $('#settingsForm').submit(function() {

    var formValues = {
        'name' : document.getElementById('#name'),
        'email' : document.getElementById('#email'),
        'telephone' : document.getElementById('#telephone'),
        'notifications' : document.getElementtById('#notifications'),
        'preview' : document.getElementById('#preview'),
        'job' : document.getElementById('#job'),
        'other' : document.getElementById('#other')
    };

    var formValueStr = JSON.stringify(formValues);

    $.cookie('SettingsCookie', formValueStr, { expires: 14 });

});

 $(document).ready(function() {

    var formValueStr = $.cookie('SettingsCookie');

    if (formValueStr != null) {

        var formValues = JSON.parse(formValuesStr);

        write(formValues['#name']);
        write(formValues['#email']);
        write(formValues['#telephone']);
        write(formValues['#notifications']);
        write(formValues['#preview']);
        write(formValues['#job']);
        write(formValues['#other']);

    }

});

但是出了点问题，我不知道是什么。表单没有按应有的方式保存，当我希望它保留时，字段中的信息将被删除。我该如何解决？任何帮助将不胜感激

4

3 回答 3

2

您应该使用document.getElementById('name').value来读取 java 脚本中的文本值。

于 2012-10-03T11:49:29.950 回答
1

你错过了你的开始<form id="settingsForm">标签..

当您使用 JQuery 时，您最好$('#name').val();使用

这是针对选择列表的。您基本上必须循环选择列表的所有元素并检查它们是否被选中。

  <select name="garden" multiple="multiple">

    <option>Flowers</option>
    <option selected="selected">Shrubs</option>
    <option>Trees</option>
    <option selected="selected">Bushes</option>

    <option>Grass</option>
    <option>Dirt</option>
  </select>
  <div></div>
<script>

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');
</script>

和你的例子..

<script>
   var changedValues = [];
   $("select#job option:selected").each(function () {
             changedValues.push($(this).text());
    });

</script>

<select name = 'job' id = 'job'>
                <option value = 'jobselect'>Select Profession</option>
                <option value = 'job1'>Mechanical Engineer</option>
                <option value = 'job2'>Software Engineer</option>
                <option value = 'jobother'>Other</option>
</select>
于 2012-10-03T11:22:30.370 回答
-1

我只是有一个非常相似的问题。我有一个复选框，当其他人使用它时它没有出现，有时在 XP 上使用 IE8 可以，但在 IE9、Windows 7 或 Firefox 上却不行。最终我找到了 name="preview"。如果我将名称更改为“asdpreview”甚至“review”，那很好。

我无法弄清楚为什么会出现问题 - 也许现在保留了“预览”？无论如何更改名称也可能会解决您的问题。

于 2012-10-04T09:23:01.733 回答