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').valueJavaスクリプトでテキスト値を読み取るために使用する必要があります。

于 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 に答える