CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Gjert
Gjert

Reputation: 1067

Div with contentEditable wont post into form using Javascript

Okai, so I have this div:

// DESCRIPTION AREA
$body_html .= "<div id='seq-desc-".$seq_id_d."' contenteditable='true' data-text='Det som skal skje...'>";
$body_html .= $seq_desc_d;
$body_html .= "</div>&nbsp;";

and this textarea:

$body_html .= "<textarea id='seq-desc-area-".$seq_id_d."' name='deta-".$seq_id_d."' style='display: none;'></textarea></td>";

In my form I use the following code to activate my Javascript code:

"<form action='planner_seq_save.php' id='save-".$seq_id_d."' name='save-".$seq_id_d."' method='POST' onsubmit='return getContent".$seq_id_d."'>";

getContent is defined like this:

function getContent'.$seq_id_d.'(){
    document.getElementById("seq-desc-area-'.$seq_id_d.'").value = document.getElementById("seq-desc-'.$seq_id_d.'").innerHTML;
}

How come I get an empty return in my database when using POST? I use $_POST['deta-(the id)'] to fetch my post.

Also I save my form using this code on a standard button. Could this make onsubmit not work?

onclick='document.forms['save-".$seq_id_d."'].submit();'

Been trying to find out what the problem is for a while now, and I really need someone elses opinion.

UPDATE:

Using console.log() I get no return within the function. So the function isn't running.

Full code can be found here

Upvotes: 4

Views: 550

Answers (2)

skip405
skip405

Reputation: 6279

It looks like the submit event is not triggered when triggering the submit() method, therefore the onsubmit handler is not called. See another question for more info.

So you can try removing the onsubmit handler and trigger the getContent function from the onclick's one:

onclick='submitForm(id)'

function submitForm(id){
    getContent(id);

    document.forms(id).submit();
}

Upvotes: 1

Max P.
Max P.

Reputation: 5679

  • rename function getContent-'.$seq_id_d.'() to getContent_'.$seq_id_d.'()
  • correct textarea id in function document.getElementById("seq-desc-area-'.$seq_id_d.'").value to document.getElementById("seq-deta-area-'.$seq_id_d.'").value
  • correct function call in onsubmit onsubmit='return getContent-".$seq_id_d."' to onsubmit='return getContent_".$seq_id_d."()'

suppose that is all :)

full code

<?php
$seq_id_d = 1;
var_dump($_REQUEST);
?>
<div id='seq-desc-<?php echo $seq_id_d; ?>' contenteditable='true' data-text='Det som skal skje...'>werwerwqrewrqwer</div>
<form id='save-<?php echo $seq_id_d; ?>' name='save-<?php echo $seq_id_d; ?>' method='POST' onsubmit='return getContent_<?php echo $seq_id_d; ?>()'>
<textarea id='seq-deta-area-<?php echo $seq_id_d; ?>' name='deta-<?php echo $seq_id_d; ?>' style='display: none;'></textarea>
<input type="submit" value="ok">
</form>
<script>
function getContent_<?php echo $seq_id_d; ?>(){
document.getElementById("seq-deta-area-<?php echo $seq_id_d; ?>").value = document.getElementById("seq-desc-<?php echo $seq_id_d; ?>").innerHTML;
}
</script>

Upvotes: 0

Related Questions