Question

我试图创建一个表单，当单击“提交”到文本区域时，该表单输出输入的数据。

目前，我可以将其提交到表单下方的区域，但是不确定如何在单个文本区域中具有多个ID。

Instead of two collections, Take advantage of mongodb's  embedded collection(document).

    country :  [{
           name: France,
           number: 001,
           cities : [{
                     name: Paris,
                     number: P001
                   },{
                     name: Lyon,
                     number : P002,
                    }]

    },{
           name: Germany,
           number: 002,
           cities : [{
                     name: Berlin,
                     number: G001
                   },{
                     name: Hamburg,
                     number : G002,
                    }]

    }]

Schema - 

    var mongoose  = require('mongoose'),
        Schema    = mongoose.Schema;

    var Country= new Schema({
      name: String,
      number: Number,
      cities : [{
               name : String,`enter code here`
               number : String
               }]
    });

mongoose.model('Country', Country);

Query - 
 var obj = {
           name : "Hamburg",
           number : "G002"
          };
 country.update({name: "France"},
                { $push :  { cities: obj}},
                function(err,result){})

Hope this helps

谢谢您的帮助，我不熟悉Javascript。

因此，我要完成的最终结果是让用户输入以以下格式输出到文本区域。

消息：消息在这里

名称：在这里命名

信息：已采取的行动

日期：2018-12-13

Answer 1

您应该保持return false；在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

2 个答案: