4

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

<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 的一部分。

感谢您的任何建议。

4

3 回答 3

5

如果你想获取 #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 。

于 2013-03-17T20:09:42.750 回答
0

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

例子.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

于 2014-09-02T16:25:41.657 回答
0

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

于 2013-02-20T20:59:35.287 回答