Submitting textarea content from outside a form

Question

I'm trying to save the content from my TinyMCE text area upon submission of my form.

The body of my page has the textarea and when I hit save, there is a modal pop up with a small form of extra data to submit. When I submit though, it says the index'fulltext' is undefined. I have this assigned to the post of the name fullText which is assigned to my textarea but the problem is I'm not actually posting that form.

My text area is higher on the page:

<form id="form-data3" method="post">
    <textarea name="fullText" id="mytextarea3"></textarea>
        <input type="submit" value="Save Page" style="float:right;" data-toggle="modal" data-target="#savePageModal">
</form>

So I fill that out and I hit a save button that prompts my modal with a form that asks for a few values before submitting. Once filled out, I hit submit which triggers addPage.php but my debugging gives me the undefined indexfor 'fullText' coming from this first line:

$content = $_POST['fullText'];
$addContent = "
INSERT INTO content(content)
VALUES('$content');
";

Obviously the issue is that my text area is in a separate form from the one posting, but even if I remove the form tags from my textarea, how can I pass that tinyMCE content of the textarea so that when I submit the form in the modal, it submits this text content as well

UPDATE:

2nd form:

<form action="addPage.php" method="post">
<input type="hidden" value="/from previous textarea">
</form>

*"Obviously the issue is that my text area is in a separate form from the one posting"* - Your form has no "action". — Funk Forty Niner, Jul 18 '18 at 11:42
*"but my debugging gives me the undefined variable for $fullText"* - I don't see that variable's assignment. — Funk Forty Niner, Jul 18 '18 at 11:43
The form in my modal that does the actual submission does have the action ="addPage.php", but when I submit that form I want to be able to include the content from the textarea. Almost like a hidden input but I don't know how I would do that for this case — Geoff_S, Jul 18 '18 at 11:44
Shoot sorry I just realized, it's giving me undefined index for 'fullText' — Geoff_S, Jul 18 '18 at 11:45
Your posted code suggests that you're probably using JS somewhere; am I right? I'd try and use an `if(!empty($var)){...}` and try it again. — Funk Forty Niner, Jul 18 '18 at 11:46
@FunkFortyNiner sorry about that, I edited my question accordingly — Geoff_S, Jul 18 '18 at 11:46
How about passing the first form info to the second form as hidden inputs, then submit the second form as a whole. — FoxyFish, Jul 18 '18 at 11:46
@FoxyFish I'm familiar with using hidden inputs in general but how would that work in this case? Would I have to POST the textarea in the first from somewhere to assign it as a hidden input? — Geoff_S, Jul 18 '18 at 11:47
Have the hidden inputs value on the second form as the post data from your first form textarea. — FoxyFish, Jul 18 '18 at 11:48
In addition to the above comment, you can also try using sessions and checking if it is set/not empty. — Funk Forty Niner, Jul 18 '18 at 11:52
Or use javascript to pass the value to a hidden input on your second form — Dimitris Filippou, Jul 18 '18 at 11:57
I think thats my issue. I set my first save button to trigger the modal but because it's type ```submit``` it reloads the page. So I need the button to simply trigger the modal AND pass the textarea content as a hidden input. I'm updating my code to see if I'm on the right path — Geoff_S, Jul 18 '18 at 11:58
Can any of you see with my new updates where I'm going wrong? Would I need to change the input type from submit? or add an action to that first button that simply loads the modal and saves the textarea to a hidden input — Geoff_S, Jul 18 '18 at 12:01
So do you have your button as a javascript/jquery click event? — FoxyFish, Jul 18 '18 at 12:02
No it's currently just an input type of submit with no JS attached — Geoff_S, Jul 18 '18 at 12:03
So what exactly triggers the modal to popup with the second form? — FoxyFish, Jul 18 '18 at 12:05
I'm using bootstrap, so you can see in my updated code I assign it a data-toggle and data-target — Geoff_S, Jul 18 '18 at 12:06
In that case you need to pass the input from your first form via JavaScript to to the modal form using a function that fires as the modal opens. — FoxyFish, Jul 18 '18 at 12:21
@FoxyFish thank you I'll start working toward that now, if you need to construct any of your comments into an 'answer' format I'll gladly accept it since it is the right path — Geoff_S, Jul 18 '18 at 12:48

score 1 · Accepted Answer · answered Jul 18 '18 at 13:05

1

This is along the lines of what i was thinking.

HTML

<p><a href="#my_modal" data-toggle="modal">Open</a></p>

<div class="modal" id="my_modal">
      <div class="modal-body">
        <textarea class="second"></textarea>
      </div>
</div>

<p><textarea class="first">First Textarea</textarea></p>

JQUERY

$('#my_modal').on('show.bs.modal', function() {
    var first = $(".first").val();
    $(".second").val(first);
});

View this on a jsfiddle

answered Jul 18 '18 at 13:05

FoxyFish

874
1
12
21

Thank you this makes more sense now after using that fiddle. – Geoff_S Jul 18 '18 at 13:29
So can I make the second textarea hidden I guess, since I don't want it to actually show in the modal form? – Geoff_S Jul 18 '18 at 13:31
No problem, obviously you'd need hidden input but I used a second textarea for visual representation. – FoxyFish Jul 18 '18 at 13:31
Yeah swap it out for a hidden input. – FoxyFish Jul 18 '18 at 13:33
http://jsfiddle.net/923xkvLe/9/ Does that look like I'm setting the value properly though? (sorry I'm horrible with JS and AJAX) – Geoff_S Jul 18 '18 at 13:40
There is no need to close input tags, your `` is redundant. – FoxyFish Jul 18 '18 at 14:56
I can remove that now. I just want to make sure this would actually be populating value=" " though – Geoff_S Jul 18 '18 at 15:03
This code won't work directly, you need to build it around your own modal/second form. It's just an example of how to do so. – FoxyFish Jul 18 '18 at 15:21

Neethu · Answer 2 · 2018-07-18T13:03:34.023

0

Make button type button or you can prevent the default action
On button click event load the model

Loaded model's button click event submit the form using jquery ajax

jQuery.ajax({
   url: "submit.php",
   data: $('#myForm').serialize() + "&textfield=" + textfieldvalue,
   type: "POST",
   success: function(data){
   // do what ever you want
   },
});

edited Jul 18 '18 at 13:03

answered Jul 18 '18 at 12:58

Neethu

284
2
4

So, to understand: This makes the first button pass the text area to the 2nd form modal? Then how do I make it populate a hidden input? – Geoff_S Jul 18 '18 at 13:03
According to what you explained input is hidden it's not necessary to populate it. Instead just take the data and append to the form data in ajax. That will be the more feasible solution in case you have more form elements too. – Neethu Jul 19 '18 at 06:30

score 0 · Answer 3 · answered Jul 18 '18 at 13:07

0

you can use ajax, and to get content of your textarea is

var content =  tinyMCE.getContent('mytextarea3');

now you can post to anywhere you want.

answered Jul 18 '18 at 13:07

M Usman Nadeem

415
2
13

So I would just put that variable in the hidden input then? – Geoff_S Jul 18 '18 at 13:08
when user click on save/submit button you need to use javascript ajax method, below is the url having example. https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get – M Usman Nadeem Jul 18 '18 at 13:10

Submitting textarea content from outside a form

3 Answers3