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.

Deep 3015 · Accepted Answer · 2017-01-17 17:42:37Z

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>

Adrian Bratu · Accepted Answer · 2017-01-17 17:34:21Z

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>

edited Jan 17, 2017 at 17:34

answered Jan 17, 2017 at 17:13

Adrian Bratu

5083 silver badges9 bronze badges

5 Comments

Ashonko Over a year ago

Sorry, I'm actually hoping for a auto generated paragraph on the bottom of the form, based on the selection of the form above.

Adrian Bratu Over a year ago

try now.. the paragraph for absent will show on no selection... let me know if you want the change events for the user typing the code as well

Ashonko Over a year ago

That would be really helpful. Like when someone selects 'Yes' and the 'Place' and 'Time'.

Adrian Bratu Over a year ago

try the updated answer with all the event handlers and everything.. press enter after you update the input fields

Ashonko Over a year ago

Thank you very much. This is exactly what I have been looking for. I really appreciate your effort.

Collectives™ on Stack Overflow

Automatically generate paragraph based on the elements on the web form

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related