Geek Answers Handbook

Send text from "div contenteditable"

I am trying to find a working solution, but at the moment there is nothing useful. 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(); }

(I also use jquery-1.8.3.js) The query should look like this: "mysite.com/search?q=". All I need to do is use div class = "control" as the submit button instead of just typing (just replace the enter button with a div). When I press the enter button, everything is fine, but when I use DIV class = "control", the selection does not work - the form is submitted, but without the request text. I can not use only input because the submit div is part of a third-party api.

Thanx for any suggestions.

+4
source share
3 answers

If you want to get data inside a div #text, you can use jQuery to get data from a 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 can access the specified parameter based on the name that you assigned to it in the input field (in this case, param1 )

You have a game with this jsfiddle if you want to train what happens.

+4
source

You are trying to use form actions for elements other than the form. Use input elements instead.

0
source

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

0
source

More articles:


All Articles