javascript - PouchDB:单选按钮值未保存到数据库

Question

我有一个带有单选按钮的表单，用于将数据保存到 PouchDB 实例。文本字段正在保存到 PouchDB。

单选按钮值未保存到 PouchDB。当我重新加载我的数据时，我点击输入的值没有显示。

(还添加了 viewnote 功能，以防它们无法正确显示。)

JavaScript

    PouchNotesObj.prototype.savenote = function () {
        'use strict';
        var o = {}, that = this;

        if (!this.formobject._id.value) {
            o._id = new Date().getTime() + '';
        } else {
            o._id = this.formobject._id.value;
        }

        if (this.formobject._rev.value) {
            o._rev = this.formobject._rev.value;
        }

        o.preferred      = (this.formobject.preferred.value == '') ? '' : this.formobject.preferred.value;
        o.application_access      = (this.formobject.application_access.value == '') ? '' : this.formobject.application_access.value;
        o.modified  = new Date().getTime();

        this.pdb.put(o, function (error, response) {
            if(error){
                that.showerror(error);
            }

            if(response && response.ok){

                that.viewnoteset();
                that.formobject.reset();

                that.show(that.formobject.dataset.show);
                that.hide(that.formobject.dataset.hide);

                viewnotes.dispatchEvent(new MouseEvent('click'));
            }
        });

        this.resethash();
    };

PouchNotesObj.prototype.viewnote = function (noteid) {
    'use strict';

    var that = this, noteform = this.formobject;

    this.pdb.get(noteid, {attachments:true}, function (error, response) {
        var fields = Object.keys(response), o, link, attachments, li;

        if (error) {
            this.showerror();
            return;
        } else {

            fields.map( function (f) {
                if (noteform[f] !== undefined && noteform[f].type != 'file') {
                    noteform[f].value = response[f];
                }


            // fill in form fields with response data.
            that.show('#addnote');
            that.hide('section:not(#addnote)');
            that.show('#attachments');
        }
    });

CSS

.radio-container ul{
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.radio-container ul li{
  display: block;
  position: relative;
}

.radio-container ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.radio-container ul li label{
  display: block;
  position: relative;
  font-weight: 400;
  padding: 5px 25px 5px 80px;
  margin: 10px auto;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}


.radio-container ul li .check {
  display: block;
  position: absolute;  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 5px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #D10373;
}

.radio-container ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

HTML

    <div>
        <label class="radiogroup-label text-label">Preferred means of contact:</label>
        <radiogroup>
        <div class="radio-container">
            <ul>
                <li><input type="radio" name="preferred" id="no_pref" value="No preference" checked="true"> <label class="radio-label" for="no_pref">No preference</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_mobile1" value="Mobile 1"> <label class="radio-label" for="by_mobile1">Mobile 1</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_mobile2" value="mobile 2"> <label class="radio-label" for="by_mobile2">Mobile 2</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_home_landline" value="Home landline"> <label class="radio-label" for="by_home_landline">Home landline</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_work_landline" value="Work landline"> <label class="radio-label" for="by_work_landline">Work landline</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_home_email" value="Home email"> <label class="radio-label" for="by_home_email">Home email</label> <div class="check"></div></li>
                <li><input type="radio" name="preferred" id="by_work_email" value="Work email"> <label class="radio-label" for="by_work_email">Work email</label> <div class="check"></div></li>
            </ul>
        </div>
        </radiogroup>
    </div>
    <p>&nbsp;</p>
    <div>
        <label class="radiogroup-label text-label">Can edit <br/>directory entries:</label>
        <radiogroup>
        <div class="radio-container">
            <ul>
                <li><input type="radio" name="application_access" id="is_admin" value="Admin"> <label class="radio-label" for="is_admin">Yes</label> <div class="check"></div></li>
                <li><input type="radio" name="application_access" id="is_user" value="User" checked="checked"> <label class="radio-label" for="is_user">No</label> <div class="check"></div></li>
            </ul>
        </div>
        </radiogroup>
    </div>

Answer 1

单选按钮选择的值没有保存到数据库中，因为 JavaScript 没有获取它。

需要指向选中的input的值。

var selectedPref = document.querySelector('input[name="preferred"]:checked').value;
o.preferred      = (selectedPref == '') ? '' : selectedPref;
var selectedAppAccess = document.querySelector('input[name="application_access"]:checked').value;
o.application_access      = (selectedAppAccess == '') ? '' : selectedAppAccess;