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”作为Submit按钮而不是简单的输入（只需用div替换输入按钮）。当我按下输入按钮时一切正常，但是当我使用DIV class =“control”时，submision不起作用 - 表单提交，但没有查询文本。我不能只使用输入，因为提交div是第三方api的一部分。

Thanx任何建议。

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进行游戏。

Answer 2

您正尝试在非表单元素上使用表单操作。改为使用输入元素。

Answer 3

contenteditable.coffee

$('[contenteditable_form]').on 'submit', (e) -> 
  $form = $ e.target
  $form.find("[data-hidden-input]").each (i, e) ->
    $contenteditable = $ e
    attr = $contenteditable.data('hiddenInput')

    hidden_input = $form.find "[#{attr}]"

    value = $contenteditable.html()

    $(hidden_input).val value

example.html的

<input class="hidden" hidden_description name="some_name" type="hidden"> 
<div contenteditable="true" data-hidden-input="hidden_description"></div>

来源：https://gist.github.com/dapi/eb737f5a7a7461cb548e

提交“div contenteditable”中的文字

3 个答案:

contenteditable.coffee

example.html的