submit text from "div contenteditable"

Question

I'm trying to find a working solution, but there is nothing useful at the moment. I have the following form:

<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>

with the following 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();
}

(also I use jquery-1.8.3.js) The query should look like "mysite.com/search?q=". All that I need is to use div class="control" as Submit button instead of simple input (just replace the input button with div). When I press input button everything is ok, but when I use DIV class="control" submision doesn't work - form submits, but without text of query. I can't use just input, because the submit div is part of third party api.

Thanx for any suggestions.

Are you trying to submit the text within the #text div? And also where are you trying to submit it to? — Lyuben Todorov, Mar 17 '13 at 18:50
Yes, I'm trying to submit #text div content. I need to submit it as a search query. — John Johansen, Mar 17 '13 at 19:14

score 5 · Accepted Answer · answered Mar 17 '13 at 20:09

If you want to get the data inside the #text div you could use jQuery to get the data from the 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();
}

Then you will be able to access your submited parameter based on the name you assigned it in the input field (in this case param1)

Have a play-around with this jsfiddle if you want to workout what is happening.

Thanx! People told me that it is imposible)) But I believed that it could work some how =) — John Johansen, Mar 17 '13 at 20:32

score 0 · Answer 2 · answered Feb 20 '13 at 20:59

0

You're trying to use form actions on non-form elements. Use input elements instead.

answered Feb 20 '13 at 20:59

theaccordance

889
5
13

But form submits by the div, I just need to grab a text from "contenteditable" field with ?q= . – John Johansen Feb 20 '13 at 21:46
That doesn't matter, forms are not designed to send all of the information nested within the form element tags, but rather the values specified within controls, and Divs are not a supported control type. http://www.w3.org/TR/html401/interact/forms.html#h-17.1 – theaccordance Feb 20 '13 at 22:12
2

he sure has reasons to ask, maybe he made a rich-text-editor in the DIV like me or whatever and needs a fallback for non-AJAX-submits. So I'd just recommend to copy the contents of the DIV to a input per JS just before submission and everything is fine. – Raphael Jeger Jun 18 '13 at 06:55

score 0 · Answer 3 · answered Sep 02 '14 at 16:25

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>

Source: https://gist.github.com/dapi/eb737f5a7a7461cb548e

submit text from "div contenteditable"

3 Answers3

contenteditable.coffee

example.html