表单在提交时提交到 Textarea

Question

我正在尝试创建一个表单，当点击 "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

Answer 1

你应该保持 return 为假；在函数 showInput() 中作为表单被提交并且没有任何内容可以显示

或输入 type="button" 而不是 type="submit"

Answer 2

我使用 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

Form submit to Textarea on submit

html

javascript

textarea