javascript - 在提交之前实时显示所选的单选按钮和复选框

Question

我有一个表单，人们可以在其中从单选按钮和复选框中进行选择...问题是我需要在他们放置邮件并提交之前在页面的一部分中显示所选数据!

我需要在不刷新的情况下完成此操作，因此我无法使用 php 来完成该部分!如何在单击单选按钮/复选框后立即显示所选数据？

html:

<section id="superior">
                <form action="higuera.php" method="post" name="form" id="form">
                    <div>
                        <p><span>1.</span><i>Elegí tu abono MENSUAL:</i></p>
                        <input type='radio' name='abono' value="cinco clases" id="cinco-clases"/><label for="cinco-clases"></label>
                        <input type='radio' name='abono' value="nueve clases" id="nueve-clases"/><label for="nueve-clases"></label>
                        <input type='radio' name='abono' value="abono libre" id="abono-libre"/><label for="abono-libre"></label>
                        <input type='radio' name='abono' value="clase suelta" id="clase-suelta"/><label for="clase-suelta"></label>
                        <input type='radio' name='abono' value="clases grupales" id="clases-grupales"/><label for="clases-grupales"></label>
                        <br/>

                        <p><span>2.</span><i>Elegí los horarios de las clases según tu abono.</i></p>

                    </div>
            </section>

            <aside id="aside">
                <!-- HERE I SHOULD DISPLAY THE PREVIEW -->
            </aside>

这只是一部分!然后将所选数据存储在 php 变量中。

Answer 1

您可以使用 JavaScript 来执行此操作。用 JavaScript 编写一个函数，该函数将显示您在单击时选择的内容。我已经为您编写了示例代码

<form>
    <input type='radio' name='abono-radio' value="cinco clases radio" id="cinco-clases-radio" onclick="displaySelectedRadio(this)" />
    <label for="cinco-clases-radio">cinco clases radio</label>
    <input type='radio' name='abono-radio' value="nueve clases radio" id="nueve-clases-radio" onclick="displaySelectedRadio(this)" />
    <label for="nueve-clases-radio">nueve clases radio</label>
    <br />
    <input type='checkbox' name='abono' value="cinco clases" id="cinco-clases" onclick="displaySelectedCheckBox(this)" />
    <label for="cinco-clases">cinco clases</label>
    <input type='checkbox' name='abono' value="nueve clases" id="nueve-clases" onclick="displaySelectedCheckBox(this)" />
    <label for="nueve-clases">nueve clases</label>
    <br />
</form>
<div id="displayHere">
    <div id="dispSelectedRadio"></div>
</div>

JavaScript函数

function displaySelectedRadio(id) {
    document.getElementById("dispSelectedRadio").innerHTML = id.value;
}

function displaySelectedCheckBox(id) {
    if (id.checked) {
        if (document.getElementById(id.value + "-disp")) {
            document.getElementById(id.value + "-disp").innerHTML = id.value;
        } else {
            document.getElementById("displayHere").innerHTML = document.getElementById("displayHere").innerHTML + '<p id="' + id.value + '-disp" >' + id.value + '</p>';
        }
    } else {
        document.getElementById(id.value + "-disp").innerHTML = "";
    }
}

现场演示 here