Home » Php » php – How do I process a <div> as a form <input>

php – How do I process a <div> as a form <input>

Posted by: admin July 12, 2020 Leave a comment

Questions:

What I’ve done is:

HTML

<form>
    <div id="textBox" contenteditable="true" name="textBox"><?php echo $storyText; ?>
    </div>
    <textarea id="hiddeninput" name="hiddeninput"></textarea>
    <input type="submit" id="save" name="save" value="Submit"/>
</form>

Javascript

$('#save').click(function () {
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
    $('#hiddeninput').append(mysave);
    alert($('#hiddeninput').val());
});

So both the alert and the append display the correct information, but it won’t save #hiddeninput as a php variable when I submit. Originally I had this as an hidden input method, but I’m trying to show that it won’t post no matter what I do,

How to&Answers:

Your code is working almost as it is.
But I’d rather use normal <input type="hidden"> and you don’t need to trigger submit for your form in your case just put the value in a hidden field.

Given your markup, with slight modifications

<form action="showrequest.php">
<div id="textBox" contenteditable="true" name="textBox" style="width:300px;height:100px;">
</div>
<textarea id="hiddeninput" name="hiddeninput"></textarea>
<input type="submit" id="save" name="save" value="Submit"/>
</form>

js

$(function(){
    $('#save').click(function () {
        var mysave = $('#textBox').html();
        $('#hiddeninput').val(mysave);
    });
});

var_dump($_REQUEST) on php side gives

array(2) {
  ["hiddeninput"]=>
  string(4) "test"
  ["save"]=>
  string(6) "Submit"
}

Answer:

Try binding the submit event instead of the click event. What might be happending is the form is submitting before the value of your textarea is set.

$('form').submit(function(){
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
});

I tested this example with method=”get” and got the html from the div to show up in the URL.

Answer:

I believe your form is being submitted before your js code has a chance to run. Since you’re submitting manually from jQuery, try preventing the default event of the button (which also submits the form):

$('#save').click(function(e) {
    e.preventDefault();
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
});

Answer:

Speaking only from experience, you can’t submit a div value in a form POST.

You can change it to a textarea, and if you want to restrict users from editing it, set it to disabled.

Alternatively, you can use javascript to submit the form, and pull the value from #hiddeninput that way.

Answer:

Here’s a generic way to submit any div content elements you want (see notes below):

<form method="post" id="f">
<div id="txt" addToForm="f" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
></div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#btnGo").click(function(){
        $("div[addToForm]").each(function(){
            var tId=$(this).prop("id");
            $(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
            $("#hdn"+tId).val($(this).html());
        });
        ("#f").submit();
    });
});
</script>

Note 1) using <input type="hidden"> preserves any formatting (IE11 allows more than FF). If you’d rather strip all formatting out, including CFLFs (i.e., <br>‘s) from users hitting Enter/Return, use <textarea style="display:none;"></textarea> instead.
Note 2) be sure validation is successfully complete first or you will end up with multiple inputs with the same names.