根據網頁表單上的元素自動生成段落

Question

我正在嘗試根據同一頁面上的表單選擇來創建段落的實時預覽。 我一直在使用此代碼。

    <script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    }
    else document.getElementById('ifYes').style.display = 'none';

}

</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
    <div id="ifYes" style="display:none">
        If yes, where: <input type='text' id='yes' name='yes'><br>
        When?  <input type='text' id='acc' name='acc'>
    </div>

我很明智的結果是會有一個預先准備好的段落，它將出現在表單的底部，並將根據上述選項的選擇進行更改。 例如，如果選擇“是”，則會出現以下信息：

X 先生將於上午 8 點出現在“倫敦”

如果選擇“否”，則會出現以下內容：

X先生將缺席

提前感謝您的幫助。

Answer 1

請嘗試以下操作：

<html>
        <head>
        </head>
        <body>
            Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"><br>
        <div id="ifYes" style="display:none">
            If yes, where: <input type='text' onchange="onLocationChange();" id='yes' name='yes'><br>
            When?  <input type='text' id='acc' onchange="onTimeChange();" name='acc'>

            <div>
                Mr. X will be present 
                <span id="location" style="display: none;"></span>
                <span id="time" style="display: none;"></span>
            </div>
        </div>
        <div id="ifNo" style="display:none">
           Mr. X will be absent
        </div>

        <script>
        function onLocationChange(){
            var value = document.getElementById('yes').value;
            if (value) {
                document.getElementById('location').style.display = 'inline';
                document.getElementById('location').innerHTML = ' in ' + value; 
            }
            else {
                document.getElementById('location').style.display = 'none';
            }

        }

        function onTimeChange(){
            var value = document.getElementById('acc').value;

            if (value) {
                document.getElementById('time').style.display = 'inline';
                document.getElementById('time').innerHTML = ' at ' + value;
            }
            else {
                document.getElementById('time').style.display = 'none';
            }

        }
        function yesnoCheck() {

            if (document.getElementById('yesCheck').checked) {
                document.getElementById('ifYes').style.display = 'block';
                document.getElementById('ifNo').style.display = 'none';
            }
            else {
                document.getElementById('ifYes').style.display = 'none';
                document.getElementById('ifNo').style.display = 'block';
            }


        }
        </script>
        </body>
    </html>

Answer 2

我希望這是你的要求

 function yesnoCheck() { if (document.getElementById('yesCheck').checked) { document.getElementById('ifYes').style.display = 'block'; document.getElementById('targetDiv').innerHTML="" } else { document.getElementById('targetDiv').innerHTML="Mr. X will be absent"; document.getElementById('ifYes').style.display = 'none'; document.getElementById('yes').value="" document.getElementById('acc').value="" } } function showResult(){ var yes=document.getElementById('yes').value var acc=document.getElementById('acc').value if(yes!="" && acc!="" ){ document.getElementById('targetDiv').innerHTML="Mr. X will be present in '"+yes+"' at '"+acc+"'" } else{ alert("Input are blank") } }

 <!DOCTYPE html> <html> <body> Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br> <div id="ifYes" style="display:none"> If yes, where: <input type='text' id='yes' name='yes'><br> When? <input type='text' id='acc' name='acc'> <button type="button" onclick="showResult()">Show Result</button> </div> <div id="targetDiv"></div> </body> </html>

根據網頁表單上的元素自動生成段落

問題描述

2 個解決方案

解決方案1
1 2017-01-17 17:13:18

解決方案2
0 已采納 2017-01-17 17:42:37

根據網頁表單上的元素自動生成段落

問題描述

2 個解決方案

解決方案1 1 2017-01-17 17:13:18

解決方案2 0 已采納 2017-01-17 17:42:37

解決方案1
1 2017-01-17 17:13:18

解決方案2
0 已采納 2017-01-17 17:42:37