Automatically generate paragraph based on the elements on the web form

Question

I'm trying to create a real time preview of a paragraph based on the selections of a form both on the same page. I have been working with this code.

    <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>

The result I'm wising is that there will be a pre-prepared paragraph and that will appear at the bottom of the form and will be changed based on the selection of the above options. Like, if 'Yes' is selected then this will appear:

Mr. X will be present in 'London' at '8am'

and if 'No' is selected, then this will appear:

Mr. X will be absent

Thanks in advance for helping.

Answer 1

Try the following:

<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

I hope this this is your requirement

 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>

Automatically generate paragraph based on the elements on the web form

Question

2 answers

solution1
1 2017-01-17 17:13:18

solution2
0 ACCPTED 2017-01-17 17:42:37

Automatically generate paragraph based on the elements on the web form

Question

2 answers

solution1 1 2017-01-17 17:13:18

solution2 0 ACCPTED 2017-01-17 17:42:37

solution1
1 2017-01-17 17:13:18

solution2
0 ACCPTED 2017-01-17 17:42:37