Question

I have an app where the user must input details about themselves in a form;

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

and then after a button to submit it. the form is linked to a .js file coded as below

 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']);

    }

});

but something had gone wrong and i can’t figure out what. the form isn’t dsaved as it is supposed to be and the information in the fields is deleted when i want it to stay. how can i fix it? any help would be greatly appreciated

Answer 1

you are missing your opening <form id="settingsForm"> tag..

as you are working with JQuery you better use $('#name').val(); instead

This is for the select list.. you basicly have to loop all the elements of the select list and check them if they are selected or not.

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

and on your example..

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