非常简单。

当用户单击“提交”时,我需要将表单序列化,并将JSON数据显示在类“调试”中。

如何使用当前的Javascript执行此操作?

无法使用jQuery。无法编辑HTML。只有纯Javascript。

谢谢!

的HTML

<ol class="household"></ol>
    <form>
        <div>
            <label>Age
                <input type="text" name="age">
            </label>
        </div>
        <div>
            <label>Relationship
                <select name="rel">
                    <option value="">---</option>
                    <option value="self">Self</option>
                    <option value="spouse">Spouse</option>
                    <option value="child">Child</option>
                    <option value="parent">Parent</option>
                    <option value="grandparent">Grandparent</option>
                    <option value="other">Other</option>
                </select>
            </label>
        </div>
        <div>
            <label>Smoker?
                <input type="checkbox" name="smoker">
            </label>
        </div>
        <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>
</div>
<pre class="debug"></pre>

JS
function validate(form) {
        fail = validateAge(form.age.value)
        fail += validateRel(form.rel.value)

        if (fail == "") return true
        else {
            alert(fail);
            return false
        }
    }

    function validateAge(field) {
        if (isNaN(field)) return "No age was entered. \n"
        else if (field < 1 || field > 200)
            return "Age must be greater than 0. \n"
        return ""
    }

    function validateRel(field) {
        if (field == "") return "Please select a relationship \n"
        return ""
    }

    document.querySelector("form").onsubmit = function() {
        return validate(this)
    }

    document.querySelector(".add").onclick = function(event) {
        event.preventDefault();
        createinput()
    }

    count = 0;
    function createinput() {
        field_area = document.querySelector('.household')
        var li = document.createElement("li");
        var p1 = document.createElement("p");
        var p2 = document.createElement("p");
        var p3 = document.createElement("p");
        var x = document.getElementsByName("age")[0].value;
        var y = document.getElementsByName("rel")[0].value;
        var z = document.getElementsByName("smoker")[0].checked;
        if (!z) {
            z = "Non smoker \n";
        } else {
            z = "Smoker \n";
        }
        p1.innerHTML = x;
        p2.innerHTML = y;
        p3.innerHTML = z;
        li.appendChild(p1);
        li.appendChild(p2);
        li.appendChild(p3);
        field_area.appendChild(li);
        //removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

    // serialize form
    var data = {};
    var inputs = [].slice.call(e.target.querySelector('form'));
    inputs.forEach(input => {
        data[input.name] = input.value;
    });

最佳答案

当我申请相同的职位时,我对这种形式非常了解。这是您使用纯js的答案!

var peopleList = [];
var addButton = document.querySelector('button.add');
var submitButton = document.querySelector('button[type=submit]');
var debug = document.querySelector('pre.debug');
var mainForm = document.forms[0];
var ageFormField = mainForm.age;
var relationshipFormField = mainForm.rel;
var smokerFormField = mainForm.smoker;
var positionFormField=mainForm.position;

//Taken from https://www.inventpartners.com/open-source/free-web-software/javascript_is_int
function is_int(value) {
    if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
        return true;
    } else {
        return false;
    }
}

function formIsValid() {
    return ageFormField.value != '' && is_int(ageFormField.value) && relationshipFormField.selectedIndex != 0 && positionFormField.value !='';
}

function updateDebug() {
    if (peopleList.length != 0) {
        debug.innerText = JSON.stringify(peopleList);
        debug.setAttribute('style', 'display: block');
        submitButton.disabled = false;
    } else {
        debug.innerText = '';
        debug.removeAttribute('style');
        submitButton.disabled = true;
    }
}

function addEventClick(event) {
    event.preventDefault();
    if (formIsValid()) {
        peopleList.push({
            'age': ageFormField.value,
            'position':positionFormField.value,
            'relationship': relationshipFormField.options[relationshipFormField.selectedIndex].value,
            'isSmoker': smokerFormField.checked,

        });
        updateDebug();
        ageFormField.value = '';
        positionFormField.value='';
        relationshipFormField.selectedIndex = 0;
        smokerFormField.checked = false;

    } else {
        var errors = '';
        if (ageFormField.value == '') {
            errors += 'Please enter your age!';
        } else if (!is_int(ageFormField.value)) {
            errors += 'Age must be a numeric value!';
        }
        if (relationshipFormField.selectedIndex == 0) {
            if (errors != '') {
                errors += '\n';
            }
            errors += 'Please select your relationship status!';
        }

        if (positionFormField.value == '') {
            if (errors != '') {
                errors += '\n';
            }
            errors += 'Please enter your position!';
        }
        if (errors != '') {
            alert(errors);
            errors = '';
        }
         else if (
            errors != '') {
                alert(errors);
                errors = '';
        }
    }
}

function submitEventClick(event) {
    event.preventDefault();
    if (peopleList.length != 0) {
        var http = new XMLHttpRequest();
        var url = "savePeopleList.php";
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
            if (http.readyState == 4) {
                if (http.status == 200) {
                    peopleList = [];
                    updateDebug();
                    alert('All of the changes were saved to the server!');
                } else {
                    alert('An error occured while sending the data to the server!');
                }
            }
        };
        http.send(JSON.stringify(peopleList));
    }
}

addButton.addEventListener('click', addEventClick, false);
submitButton.addEventListener('click', submitEventClick, false);
updateDebug();
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Household builder</title>
        <style>
            .debug {
                font-family: monospace;
                border: 1px solid black;
                padding: 10px;
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>Household builder</h1>
        <div class="builder">
            <ol class="household"></ol>
            <form>
                <div>
                    <label>Age
                        <input type="text" name="age">
                    </label>
                </div>
                <div>
                    <label>Position
                        <input type="text" name="position">
                    </label>
                </div>
                <div>
                    <label>Relationship
                        <select name="rel">
                            <option value="">---</option>
                            <option value="self">Self</option>
                            <option value="spouse">Spouse</option>
                            <option value="child">Child</option>
                            <option value="parent">Parent</option>
                            <option value="grandparent">Grandparent</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
                </div>
                <div>
                    <label>Smoker?
                        <input type="checkbox" name="smoker">
                    </label>
                </div>
                <div>
                    <button class="add">add</button>
                </div>
                <div>
                    <button type="submit">submit</button>
                </div>
            </form>
        </div>
        <pre class="debug"></pre>
        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>

10-05 20:35
查看更多