[英]Automatically generate paragraph based on the elements on the web form
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' X 先生将于上午 8 点出现在“伦敦”
and if 'No' is selected, then this will appear:如果选择“否”,则会出现以下内容:
Mr. X will be absent X先生将缺席
Thanks in advance for helping.提前感谢您的帮助。
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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.