0

I'm trying to send data from an editable paragraph and header so I can echo the data on a different page.

 <form id="Form" action="submit.php" method="post">
    <h2 id="heading" contenteditable="true">Your name here</h2>
    <p id="content" contenteditable="true">Your bio here</p>
  <input type="submit">
 </form

I can send data from a textarea/input but I'd really like to learn how to send it from contenteditable.

Any suggestions?

PS

I am trying to avoid styling inputs

Steve Gates
  • 195
  • 1
  • 12
  • u need to add a `name` tag to them, thats how it will be recognised in the receiving php page... – Ahs N Sep 03 '15 at 08:30
  • I cannot understand if you talking about getting the value from JS or from PHP, that's not the same. – michelem Sep 03 '15 at 08:37
  • I think you need to use Javascript/AJAX to process contentedtiable divs, though I may be wrong – frosty Sep 03 '15 at 08:37
  • possible duplicate of [How to save and retrieve contenteditable data](http://stackoverflow.com/questions/25790268/how-to-save-and-retrieve-contenteditable-data) – Kristiyan Sep 03 '15 at 08:39
  • **Kristiyan**, how could it be a duplicate if the solution to that question doesn't work with my problem? **Michelem** I cannot understand you. **Ahs N**, so adding a name is all that's required? Are you sure? **frosty** Trying to do that atm but not working out so great – Steve Gates Sep 03 '15 at 08:52

3 Answers3

1

Try using Selector...

var contenteditable = document.querySelector('[contenteditable]'),
    text = contenteditable.textContent;

OR

console.log(jQuery('p[contenteditable="true"]').text());
console.log(jQuery('p[contenteditable="true"]').text() == ' ');
console.log(jQuery('p[contenteditable="true"]').text().charCodeAt(0));

But I would suggest just to change the paragraph and header tags to input tags. Or refer here.

Community
  • 1
  • 1
J Kenneth
  • 96
  • 4
1
document.getElementById("form").onsubmit = function(e){
    e.preventDefault();
    var el = document.createElement("input");
    el.type = "hidden";
    el.value = document.getElementById("content").innerHTML;
    document.getElementById("form").appendChild(el);
    document.getElementById("form").submit();
}

This will sumbmit the contenteditable field. You could as well so something similar with jQuery, addEventListener/attachEvent e.t.c.

E.g.:

var on = function(el, event, fn){
    if(el.addEventListener){
        el.addEventListener(event, fn, false);
    } else if(el.attachEvent){
        el.attachEvent("on"+event, fn);
    } else {
        el["on"+event] = fn;
    }
},

get = function(el){
    if(typeof el === "string")
        return document.querySelector(el);
    else
        return el;
};

on(get("#form"), "submit", function(e){
    e.preventDefault();
    var el = document.createElement("input");
    el.type = "hidden";
    el.value = get("#content").innerHTML;
    get("#form").appendChild(el);
    get("#form").submit();
});

I hope I could help someways...

0

you could change the p and h2 into inputs and style them as if they were not input, and you need also to put the tag 'name' to pass them to the php.

I've never tried to put the tag 'name' onto a p element inside a form and check if its passed to the php

gamera_the_beast
  • 34
  • 1
  • 6