How Can I Split this form in two values

Question

How can i end up with two values after submit okay i was wondering how can i have the hidden value and another value containing the div text?? the reason why it because im going to insert both of those values in different variables to insert into a mysql query

html code:

<form action="" method="POST" onsubmit="return insert_value()">
    <input id="hidden_data" name="data" type="hidden" value="<?php $user_id ?>"/>
        <div id="showing_data" class="commenttext" contenteditable="true"></div>
    <input type="submit" value="Submit" id="submitthis" />
</form>

Javascript CODE:

function insert_value()
{
  var values = [];
    values.push(document.getElementById('hidden_data').value);
    values.push(document.getElementById('showing_data').textContent);
    console.log(values);
  return true;
}

Why don't you just make a `textarea` instead of `div` with `contenteditable`? If you absolutely want it this way, you could just create another hidden input, no need to place both values in one input. — Colandus, Oct 10 '13 at 09:02
i dont use textarea because people can use the bottom right hand corner to drag it down and i dont want that to happen — , Oct 10 '13 at 09:05
@Colandus What if i place the value from field 1 ?? how would i fetch the 2nd value???????????? — , Oct 10 '13 at 09:16
Make another hidden input and place the html from the div inside of it in your submit callback. I will update my post with an example — Colandus, Oct 10 '13 at 09:20

Colandus · Accepted Answer · 2013-10-10T09:24:30.410

1

Replace div with textarea and to disable resizing use css:

textarea {
    resize: none;
}

To answer your real question, but slightly modifying it; instead of merging them both in one input create another hidden input.

in HTML add this line:

<input type="hidden" name="data_result" id="data_result" />

And your javascript code:

function insert_value()
{
    var html = document.getElementById('showing_data').textContent;
    document.getElementById('data_result').value = html;
    return true;
}

edited Oct 10 '13 at 09:24

answered Oct 10 '13 at 09:07

Colandus

1,634
13
21

but when i type and say i indent i want it to auto height, get taller – Oct 10 '13 at 09:09
There are several ways to make the `textarea` auto resize, check http://stackoverflow.com/questions/17772260/textarea-auto-height – Colandus Oct 10 '13 at 09:11

score 0 · Answer 2 · answered Oct 10 '13 at 09:05

just replace the div with textarea and add style = "resize:none" to the text area

<form action="" method="POST" onsubmit="return insert_value()">
        <input id="hidden_data" name="data" type="hidden" value="<?php $user_id ?>"/>
            <textarea style = "resize:none" id="showing_data" class="commenttext" contenteditable="true"></textarea >
        <input type="submit" value="Submit" id="submitthis" />
    </form>

and change following line in the javascript

document.getElementById('showing_data').value;

Its draggable idont want it to be draggable – Oct 10 '13 at 09:06 — , Oct 10 '13 at 09:06

score 0 · Answer 3 · answered Oct 10 '13 at 09:08

0

you can make it textarea and you can have hidden value of that.

    <textarea id="showing_data"  rows="4" cols="50">

and if you dont want to be draggable just use this in css

 textarea
{
 resize: none;
}

answered Oct 10 '13 at 09:08

echo_Me

37,078
5
58
78

How Can I Split this form in two values

3 Answers3