input - 从 "div contenteditable"提交文本

Question

我试图找到一个可行的解决方案，但目前没有任何用处。我有以下表格:

<form id="searchform" action="/search" onsubmit="putText()">
<div class="section" >
<div class="edit"><div ContentEditable = "true" id="text"></div></div>
<div class="control" onclick="sbmt()"></div>
</div>
<input id="s" name="q" class="submit" type="submit" value="Send">
</form> 

使用以下js:

$(window).load(function(){
$(document).ready(function() {
 $('.edit').keydown(function(e) {
     if(e.which == 13) {
         //debugger;
        $(this).blur().next().focus();
        return false;
      }
 });
 })
});


function ElementInit() {
  new SectionalElement({
    sectionalNodeClassName: 'section',
    controlNodeClassName: 'control',
    background: '#f4fa58'
  }, 'sectional_element');
  return true;
}

function putText() {
  document.getElementById('s').value = document.getElementById('text').textContent;  
  return true;
}

function sbmt() {
document.getElementById("searchform").submit();
}

(我也使用 jquery-1.8.3.js)
查询应类似于“mysite.com/search?q=”。
我所需要的只是使用 div class="control"作为提交按钮而不是简单的输入(只需用 div 替换输入按钮)。当我按下输入按钮时一切正常，但是当我使用 DIV class="control"时提交不起作用 - 表单提交，但没有查询文本。我不能只使用输入，因为提交 div 是第三方 api 的一部分。

感谢任何建议。

Answer 1

如果要获取#text div 中的数据，可以使用jQuery 从div 中获取数据:

function sbmt() {
  var param = '';

  // jQuery
  param = $('#text').text();

  // or you could use pure javascript
  param = document.getElementById('text').innerHTML;

  // Now that you have these values you should add them to your form as an input
  // input fields are how you send data through forms to wherever you are posting them
  // build the input field
  param = "<input type='text' name'param1' value='" + param + "'/>";

  // append it to the form
  $('#searchform').append(param);

  // finally submit the form.
  document.getElementById("searchform").submit();
}

然后，您将能够根据 name 访问您提交的参数。您在输入字段中分配了它(在本例中为 param1 )

试试这个 jsfiddle如果你想锻炼正在发生的事情。