Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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,

like image 670
Jeight Avatar asked Mar 21 '13 02:03

Jeight


People also ask

Can I put div into form?

It is completely acceptable to use a DIV inside a <form> tag. If you look at the default CSS 2.1 stylesheet, div and p are both in the display: block category.

How do you create an input form in HTML?

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the registration form. Step 2: Now, we have to place the cursor at that point where we want to create a form between the starting and closing of <body> tag in the Html document.

Should I use form or div?

<form> is what you use to create a form for people to fill in. Div is used to divide sections of the web page up.


3 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"
}
like image 67
peterm Avatar answered Oct 10 '22 03:10

peterm


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.

like image 24
Jesse Lee Avatar answered Oct 10 '22 03:10

Jesse Lee


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();
});
like image 37
bfavaretto Avatar answered Oct 10 '22 03:10

bfavaretto