提交表格后提交至Textarea
[英]Form submit to Textarea on submit
问题描述
我试图创建一个表单，当单击“提交”到文本区域时，该表单输出输入的数据。
目前，我可以将其提交到表单下方的区域，但是不确定如何在单个文本区域中具有多个ID。
<html> <head> <script> function showInput() { document.getElementById('display').innerHTML = document.getElementById("user_input").value; document.getElementById('name').innerHTML = document.getElementById("user_name").value; document.getElementById('stepsTaken').innerHTML = document.getElementById("user_stepsTaken").value.replace(/(?:\\r\\n|\\r|\\n)/g, '<br />'); document.getElementById('theDate').innerHTML = document.getElementById("user_theDate").value.replace(/(?:\\r\\n|\\r|\\n)/g, '<br />'); } </script> </head> <body> <script type="text/javaScript"> function Qreplace(e) { var textfield = document.getElementById(e); var regex = /#test/gi; textfield.value = textfield.value.replace(regex, "1. test\\n2. test"); var regex = /#report/gi; textfield.value = textfield.value.replace(regex, "1. report\\n2. report"); } </script> <form action="javascript:void(0);"> <p> <label><b>Enter a Message</b></label><p> <input type="text" id="user_input" required><p> <label><b>Enter a name</b></label><p> <input type="text" id="user_name" required><p> <textarea id="user_stepsTaken" onkeyup="Qreplace('user_stepsTaken')" placeholder="Actions taken and notes..." style="height: 91px; max-height: 350px;" required></textarea> <label for="sme">TL/SME Assist*</label> <br> Yes <input required="" type="radio" onclick="javascript:smeCheck();" value="Yes" name="TL/SME" id="yesCheck"> No <input type="radio" onclick="javascript:smeCheck();" value="No" name="TL/SME" id="noCheck"><br> <div id="ifyes" style="display:none"> <input type="text" id="smeAssist" name="smeAssist" placeholder="Name or Initials of the TL/SME that provided assistance"> <!-- Hide/Show SME additonal options based on radio check box --> <script type="text/javascript"> function smeCheck() { if (document.getElementById('yesCheck').checked) { document.getElementById('ifyes').style.display = 'block'; } else document.getElementById('ifyes').style.display = 'none'; } </script> </div> <div style="display:block; margin-left: 0px;"> <label for="dateStarted">Issue Started*</label> <input type="date" id="user_theDate" name="theDate" class="select"> </div> <input type="submit" onclick="showInput();"><br/> </form> <label>Your input: </label> <p><span id='display'></span></p> <p><span id='name'></span></p> <div id='stepsTaken'></div> <div id='theDate'></div> </body> </html>
谢谢您的帮助，我不太熟悉Javascript。
因此，我试图完成的最终结果是让用户输入以以下格式输出到文本区域。
讯息：这里的讯息
名称：此处命名
信息：采取的措施
日期：2018-12-13
2 个解决方案
解决方案1
0 2018-12-14 05:29:44
您应该保持return false； 在showInput（）函数中以表单形式提交，并且没有任何内容可以显示
或输入type =“ button”代替type =“ submit”
解决方案2
0 已采纳 2018-12-18 02:32:18
我使用Jquery找到了解决该问题的方法，如下所示
$('#summary').click(function() { var name = $('#clientName').val() var message = $('#errorMessage').val() var ret = "Name: "+name+" \\n\\rMessage: " + message; console.log(ret) $(".output-container").fadeIn(); $("#output").text(ret); }) $("#copyForm").click(function(){ $("#output").select(); document.execCommand('copy'); $(".success").fadeIn(); });
body {font-family: Helvetica;background-color: #1E365E;} * {box-sizing: border-box;} input[type=text], select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #1E365E; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=button] { background-color: #1E365E; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=radio] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=date] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit]:hover { background-color: #1E365E; } input[type=button]:hover { background-color: #1E365E; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; margin: 5%; } .output-container { display: none; margin-top: 50px; } #output { height: 300px; } .success { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div class="container"> <h2>Testing Copy</h2> <form id="myForm" action="/action_page.php"> <label for="cName">Client Name*</label> <input type="text" id="clientName" name="cName" placeholder="Client Name..."> <label for="errorMessage">Error Message</label> <input type="text" id="errorMessage" name="errorMessage" placeholder="Any error messages?"> </form> <button id="summary">View Summary</button> <div class="output-container"> <textarea id="output"> <h2>Form Content</h2> </textarea> <button id="copyForm">Copy Summary</button> </div><!-- #end output-container --> <p class="success"><strong>Form successfully copied</strong></p> </div>
在textarea中的按键上提交表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.