CODEWITHSUNDEEP
javascriptphphtml
Al Hennessey
Al Hennessey

Reputation: 2445

Send value of div on form submit

I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.

Here is the "textarea":

<div id="dash_new_shout_textarea" name="dash_new_shout_textarea" 
     class="dash_new_shout_textarea" contenteditable="true" 
     placeholder="Write your shout..." name="dash_new_shout_textarea" 
     value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
     $_POST['dash_new_shout_textarea'] : '' ?>"></div>

The form is just a normal form with method=post.

Here is the php:

$newShoutTextarea = $_POST['dash_new_shout_textarea'];

Thanks for the help

Upvotes: 6

Views: 12020

Answers (5)

scribblemaniac
scribblemaniac

Reputation: 6859

I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.

HTML

<form onsubmit="prepareDiv()">
    <div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
    <input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>

Javascript

function prepareDiv() {
    document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}

Your PHP remains the same.

Upvotes: 5

sensei
sensei

Reputation: 7562

What you can do is use jQuery for this.

DEMO HERE Proper scenario would be:

*Get value from div and save it into hidden field. *

This has to be done when you submit form:

$(function () {
    $("#send").on("click", function () {
        $("#hiddenfield").val($("#dash_new_shout_textarea").text());

        alert($("#hiddenfield").val());

        $("form#formID").submit();
    });
});

Upvotes: 0

Zerium
Zerium

Reputation: 17333

What you can do is this:

<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
  document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>

Upvotes: 1

hrnnvcnt
hrnnvcnt

Reputation: 944

You can add a hidden input to your form and update it with jquery

<div id="dash_new_shout_textarea" name="dash_new_shout_textarea" 
 class="dash_new_shout_textarea" contenteditable="true" 
 placeholder="Write your shout..." name="dash_new_shout_textarea" 
 value="></div>

<form id="target" method="post" action="destination.php">
  <input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
  <input type="submit" value="Submit">
</form>

script

$("#target").click(function() {
  $("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});

Upvotes: 0

Vickel
Vickel

Reputation: 7997

the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable

Upvotes: 0

Related Questions