javascript - 一个页面两个textarea，取不到第二个的值

Question

在一个页面里面放了两个富文本编辑器(simditor)，但是提交form的时候只能取到第一个的值，取不到第二个的值，邮件问官方，官方说他们自己测试没问题，可以取到两个。又试了其它编辑器，包括bootstrap-wysiwyg,redactor 等，都只能取到第一个，不能取到第二个，但是放两个纯textarea，就没问题，不知道是哪里的原因

问题页面 http://quyi.sinaapp.com/translate.php
用的get，可以看到url里面没有第二个textarea的值

相关代码：

<p class="container">
  <p class="row-fluid">
    <p class="span6">
      <section id="page-demo">
        <form action="get">
        <center>原文题目:<input type="text" name="etitle"></input></center>
      <textarea id="txt-content1" name="txt1" data-autosave="editor-content" autofocus></textarea>
      </section>
    </p>

     <p class="span6">
      <section id="page-demo">
      <center>译文题目:<input type="text" name="ttitle"></input></center>
      <textarea id="txt-content2" name="txt2" data-autosave="editor-content" autofocus></textarea>
      </section>
      <input type="submit"  value="提交" class="btn btn-success" />

      </form>
    </p>

<p id = "translate_word">
</p>

  </p>
</p>
<script type="text/javascript" src="scripts/js/simditor-all.js"></script>
      <script type="text/javascript" src="simditor/lib/simditor-markdown.js"></script>  
      <script type="text/javascript">
        (function() {
  $(function() {
    var editor;
    editor = new Simditor({
      textarea: $('#txt-content1'),
      placeholder: '这里输入文字...',
      pasteImage: true,
      toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
      defaultImage: 'assets/images/image.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    });
    return editor = new Simditor({
      textarea: $('#txt-content2'),
      placeholder: '这里输入文字...',
      pasteImage: true,
      toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
      defaultImage: 'assets/images/image.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    });
  });

}).call(this);
      </script>
<!-- Footer
    ================================================== -->
<footer class="footer">
  <p class="container">
    <p class="row-fluid">
      <p class="span12">
        <center>
          <p class="testimonial">趣译网，最好的翻译和双语阅读平台。即刻提高你的英语</p>
          <p class="name"><b>©Funtranslate 2014</b></p>
        </center>
      </p>
    </p>
    <hr class="soften1">

</footer>
<script>
var di;
var p_id = 'translate_word';
di = document.getElementById(p_id);

// make di
if(!di){
    di = document.createElement("p");
}
di.id = p_id;
di.style.position = 'absolute';
di.style.backgroundColor='white';
document.body.appendChild(di);

var get_selected_word = function(){
    var txt = '';
    //not support ie6 (which can not use this script :P)
    txt = document.getSelection();
    return txt.toString();
}
var ifr = document.createElement('iframe'); 
ifr.id = 'yd_translat_ifr';

var area = document//.getElementById("test")
area.onmouseup = function(e){
    //alert("asdf");
    var txt = get_selected_word();
    sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40;
    var top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
    if(txt){
        top = top + 80;
        di.style.top = top + "px";
        ifr.src = "getmean.php" + get_selected_word();
        ifr.height = 150;
        ifr.width = 200;    
        document.getElementById(di.id).appendChild(ifr);
    }else{
        if(document.getElementById(di.id).firstChild){
            document.getElementById(di.id).removeChild(document.getElementById(di.id).firstChild);
        }   
    }
}
</script>

Answer 1

首先，input 没有 </input> 这种关法。

其次，form 开关位置似乎也不太好，直接把两个<p class="span6">关在里边比较好。

再次，如果用普通的 HTML 来提交的话，是可以拿到两个 textarea 的值的。但你的编辑器是用 JS 插件处理过的，所以我猜测应该是它处理的问题。

用元素查看器查看，插件初始化以后，DOM 结构就和你预期的不一样了，form只包裹了第 1 个 textarea。

Answer 2

按 F12 键。

打开调试面板，切换到 network。

查看请求头。

Answer 3

应该把 <textarea> 包含在同一个 <form> 里