0

I have a textarea in each row of my table. I need to set this textarea to the value of a hidden field associated with it.

The names of the textarea and hidden field look like so: Textarea name:

sc-(Account Name)c

Hidden fields name:

sc-(Account Name)h

An example would be:

Textarea:

sc-usernamec

Hidden field:

sc-usernameh

On submit or while they type the text, I need the hidden field to be updating with what is typed in the textarea. I'm fairly new to jQuery and Javascript, and I'm wondering how I can either a) go through each textarea field setting its content in the associated hidden field or b) set the hidden field to the textarea as they type.

I'm not sure which option I should use, nor how I would go about programming something of this nature.

ComputerLocus
  • 3,448
  • 10
  • 47
  • 96
  • possible duplicate of [Problem jquery and tinymce : textarea value doesn't submit](http://stackoverflow.com/questions/2122085/problem-jquery-and-tinymce-textarea-value-doesnt-submit) – mplungjan Jun 05 '13 at 21:35
  • @mplungjan Actually, not really. I'm trying to implement a solution like one that is answered on that page. My question is not what I should I do to fix an issue with TinyMCE, but a question on how to specifically implement one of the answers, as I had no idea how to accomplish this. – ComputerLocus Jun 05 '13 at 21:49

2 Answers2

1

If the textarea in question is a normal textarea then you can try 

$(function() {
    $(":hidden[name^='sc']").each(function() { // all hidden starting with sc
      var id = this.id.substring(0,this.id.length-1)+"c";
      var hid = $(this);                           
      $("#"+id).on("keyup",function() {
          hid.val($(this).val());
        });
    });
});

Live Demo

All bets are of course off if the textarea is converted to an editor - then you need to read

jQuery and TinyMCE: textarea value doesn't submit

which means

$(function() {
  $("#myForm").on("submit",function() {
    $('#sc_texth').val(tinyMCE.get('sc_textc').getContent());
  });
});

or for more 

$(function() {
  $("#myForm").on("submit",function() {
    $(":hidden[name^='sc']").each(function() { // hidden and starts with sc
      var textareaID = this.id.substring(0,this.id.length-1)+"c";
      $(this).val(tinyMCE.get(textareaID).getContent());
  });
});

Live Demo

Community
  • 1
  • 1
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • I tried placing this into the already existing – ComputerLocus Jun 05 '13 at 19:10
  • I'm no longer at my dev computer, but I will try this when I am and report the results back. But what I am trying to do is essentially what is described on the question you linked to: http://stackoverflow.com/a/2122147/1044984 – ComputerLocus Jun 05 '13 at 21:46
  • Okay, I will try both of these solutions, though TinyMCE may not be the issue. It is not used in every textarea, but it is an included script. – ComputerLocus Jun 05 '13 at 21:53
  • Can you please include as much information as you can when you ask? I now again answered using the information you gave and then you changed that information. I have posted a script that implements the code from the other answer into an onsubmit assuming all the hidden fields beginning with sc has a corresponding editor called the same but with c at the end – mplungjan Jun 05 '13 at 21:59
  • 1
    Yes, I will be sure to next time, sorry for the trouble. I have accepted this answer as you have proved that it should work, I just must implement it correctly! Thanks! – ComputerLocus Jun 05 '13 at 22:26
  • Okay, I'm not able to get this to work. I've created a Fiddle using the exact code you posted, along with an exact example of what the textarea and hidden field would look like http://jsfiddle.net/Fogest/4nuVU/3/ . Any idea what is going wrong? – ComputerLocus Jun 06 '13 at 15:46
  • After some testing it appears I must have an id present, not just the name. – ComputerLocus Jun 06 '13 at 16:06
  • Upon testing on the live version I get the error displayed in this picture: http://i.imgur.com/0n2igyz.png – ComputerLocus Jun 06 '13 at 16:26
  • I upgraded a few versions to 1.7.2 as it seems on() was only introduced in 1.7. The error is now gone, but it still is not working despite it working with the same version of jQuery on fiddle. – ComputerLocus Jun 06 '13 at 16:36
  • It turns out there is some other Javascript breaking the function you have worked out. Take a look at this fiddle to see what I mean: http://jsfiddle.net/Fogest/4nuVU/4/ . Remove the code above your function and then it works. – ComputerLocus Jun 06 '13 at 16:45
  • Your fiddle was completely incomplete. I had to remove all the stuff above, change the init to not load simple and give a button to click (which would be the submit event in a real form) Here is my version http://jsfiddle.net/mplungjan/X93xj/ – mplungjan Jun 06 '13 at 17:25
  • This is just all the Javascript loaded on a page even if it is not used. The TinyMCE editor is not actually used for these textareas, but it is loaded. – ComputerLocus Jun 06 '13 at 17:37
  • Okay, it seems to work now BUT I must open and close the section for the text field to be updated. That is very weird though because I am not clicking the "submit" button at that point yet it updates. The following images show what I mean. Opened field with text typed: http://i.imgur.com/3RENb65.png . I then close the menu and boom the text appears where it should: http://i.imgur.com/U78reRB.png . If I open the menu back up, the text is still there just like when it is open. So for whatever reason opening and closing that fills that field. – ComputerLocus Jun 06 '13 at 18:00
  • I feel like I'm commenting way too much, but that effect is actually do the some existing Javascript, not yours. If you look in the Javascript you commented out there is a part that looks like this : `$('.review tbody td img').live('click', function () ` . This function actually changes it when it is closed. Could this possibly be interfering with what your code is doing? – ComputerLocus Jun 06 '13 at 18:11
  • Quite possibly. I had to comment it out because the lack of the plugin you use in the top of the code break the script immediately. I tested in chrome, so ie may behave differently. – mplungjan Jun 06 '13 at 21:01
0

I think this may help you.

<p><textarea name="sc-username" id="sc-username" ></textarea></p>
<p><textarea name="sc-usernameh" id="sc-usernameh" style="display:none;"></textarea></p>

$(document).ready(function(){  
    $("textarea").on("keyup",function() {  
        var name = $("#"+$(this).attr('name')+"h");  
        if(name)  
          name.val($(this).val());  
    });
});
Manikandan S
  • 902
  • 1
  • 8
  • 18
  • No, I need a hidden field no just a hidden textarea, as the text editor plugin (TinyMCE) is interfering with the ajax submission of the textarea's. It was suggested on another Stackoverflow answer to save the content to a hidden field and use that instead. – ComputerLocus Jun 05 '13 at 19:24