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中编写一个函数，它将显示您在onClick上选择的内容。我为你写了一个示例代码

<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

Answer 2

我认为这种功能可以通过使用JavaScript来实现，因为它可以查找DOM事件。例如，当用户没有专注于元素时，它会存储在一个变量中，然后在页面中使用，以填充您需要的内容。

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

2 个答案: