We help IT Professionals succeed at work.

textarea inside a Popup and after entering value in textarea inside popup should save in main textarea

Medium Priority
702 Views
Last Modified: 2012-05-11
Opening a textarea for each link and Putting its value in another Textarea!

I am almost done with my work, I have a Code, where i click a link, it opens a POPUP just underneath it with the textarea inside it, i enter the value in the textarea nd on the close of the textarea which is in popup i want to make the values enter into the main textarea.

Please note the the main textareas name is dynamic i mean it is nested and name is dynamic,

Trying like this!

Created a Span used its rel attribute and had named it as contact-txtbox,  but the id of the each textarea which is in popup is exacly the same as the mainb textarea, but only the names differ i mean liik ethis

main textarea ID - value_#start#

Nested textarea ID - valuenested_#start#


My try is quite Complex This:

1. Textarea Box above with unique name suppose values_#dynamic#
2. Now here is the link Edit, which has a unique id names as edit_#dynamic# and it is declared inside a Span tag, a Div tag can also be used, but just for sake i used span.
3. Now clicking on the Edit will open a POPUP just underneath the link and values it will start entring, it will 3 buttons, Save will close the popup, value get tranferred to the textarea main one and the popup will close.
4. Other buttons are rest & close which will do a cancel and resting,
5. The structure of the dynamic can be like this


Textarea
   Level 1 Textarea
         Level2 Textarea
               Level3 textarea

and under each textarea, there will be a link, which will open its own popup and fll values inside which will be transferred to the main textarea on its closure, it is dynamic purely
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Could you post your code, please?

And please tell us if by "popup" you mean window.open or simply showing a dialog like jquery ui dialog
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
the question you posted is really vague... do you have any code or test link? which part is working/failing? Do you want us to write all the code :) we are here to help...
CERTIFIED EXPERT

Author

Commented:
I have a Textarea which is linked with each textbox such as:

<cfloop from="1" to="5" index="dynamicvalue">
<input type="text" name="input_#dynamicvalue#" id="input_#dynamicvalue#">
Now a Textarea linked to this
<textarea name="mytextarea_#dynamicvalue#" id="mytextarea_#dynamicvalue#"><br>
<span class="commentBox" id="capture_#dynamicvalue#">Edit</span>

<div class="comment-box">
<textarea name="comment-box" name="input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue#" id="input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue#">
<input type="button" onClick="Close" value="Close>
</div>
</cfloop>

In the above as you see i just wanted to click on the Edit which will be made as a link and onClicking of that link, a POPUP like DIV will open just underneath it and the div will have the textaea inside that like the above

I have named the textresa which will be inside the comment box div as input_here_then_tranfer_to_main_textarea_while_closing_#dynamicvalue# to help you understand experts that value i should enter in the textarea onclose should get tranfer into the main textarea for which the popup like DIV has ben opened!

I had coded a bit and it is quite messy like

var hidden = this.id.replace("input_here_then_tranfer_to_main_textarea_while_closing_","mytextarea_");
capture the hidden and put # against the replace code
var newhidden  ="#" + hidden;
var cvalue = ($newhidden).val();

so this is not a comple code but a start which might help guiding me experts!
CERTIFIED EXPERT

Author

Commented:
i am using common textarea inside the div class="comment-box" with name="box"

as<textarea name="anything" id="box"></textarea>

and using the span ID for fetching the values in every hidden field and tranfer to textarea:

<span class="comment" id="input_here_then_tranfer_to_main_textarea_while_closing_##" rel="see-com">Edit</span>
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Please try this:

http://jqueryui.com/demos/dialog/#modal-form

perhaps without the modal
CERTIFIED EXPERT

Author

Commented:
This is somewhat similar, but

my implementation is like this!

Textarea
edit link - Click on this a Div will open underneath it and the div will have a textarea inside it, its name can be any which can be used later

now i entered some value in the div textarea and then clicked close, the div got closed and value gets tranferred into the textareaabove the edit link!

The same way it should work for every textarea,

the name and id of each main textarea is different from the other
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
will you plan to open multiple dialog or just use one edit dialog or div?
CERTIFIED EXPERT

Author

Commented:
i will open one div for all the links it will handle all the edits of the separate textarea
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
take a look at this sample
is it something close to what you want?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
var ix
function edit(n, a){
  //$("#divEdit").move();
  $("#divEdit").show();
  $("#taEdit").val("");
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
just one piece is missing, which is to move the dialog under edit link!
I passed the link to edit function as parameter and we need to use that parameter to move the dialog under that...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
i just dont understand why you use textarea in another dialog to replace the text in a textarea :) does not make sense... user can change the text directly without clicking edit... do i miss something or you hide something :)
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
ha ha, this was easy to move the div under a :)

$("#divEdit").remove().insertAfter(a);

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
var ix
function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val("");
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
HainKurt: do yourself a favour and change

<a href="#" onClick="edit(1,this)">Edit</a>

to

<a href="#" onClick="return edit(1,this)">Edit</a>

and add
return false
to the end of function edit
CERTIFIED EXPERT

Author

Commented:
well apparently i hide something as this is an requirement
CERTIFIED EXPERT

Author

Commented:
well we are quite near!

1. It should open as a separate div because it is currently making the design distorted.
2. Also adding value startight in textarea [main] should get copied to the child textarea if there is any for the related parent.
3. can we apply count for texts entered and measure it if already entered.

I know i might be asking more than expected but this is a start for a very nice feature i have not seen on google and i really want to learn jquery.

Today i have purchased "Jquery in Action 2nd Book" for Study!

Thanks a Lot for giving me a good start

:)
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
mplungjan, I did not use this format

<a href="javascript:edit()">Edit</a>

but used this format

<a href="#" onClick="edit()">Edit</a>

I could not get it :) page does not go anywhere onClick!
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
2

function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val($("#ta"+n).val());
  ix = n;
}
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
I could not get 3
here is 1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n, a){
  $("#divEdit").remove().insertAfter(a);
  $("#divEdit").show();
  $("#taEdit").val($("#ta"+n).val());
  ix = n;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="edit(5,this)">Edit</a><hr>

<div id=divEdit style="display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit></textarea><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

CERTIFIED EXPERT

Author

Commented:
wow! :)

awesome Dude, appreciating for the stuff you just created, i was banging my head for the last couple of hours on this! really i started doubt on me regarding jquery + javascript!

So powerfiul.

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
oops, just comment out this line

  //$("#divEdit").remove().insertAfter(a);
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
and add background-color to div to remove transparency (could not get why it is transparent :)

...
<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
and give me the points :) then read the book and complete your project :)
CERTIFIED EXPERT

Author

Commented:
well for the 3 we can use the simple javascript function like this:!

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}

and for the div which is opening in the middle of the page

we can use the onkeypress event as

onKeyDown="textCounter(this.form.message,this.form.remLen,125);" onKeyUp="textCounter(this.form.message,this.form.remLen,125);"

<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>

and measure the comment.length of each textarea nd then deduct it from the remainng if it has value otherwise it shows enter 125 characters
Sr. System Analyst
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
HainKurt - please do it anyway. there are browsers that invisibly unloads some of the page.
Always return false onclick of a  link that does not leave the page
CERTIFIED EXPERT

Author

Commented:
Thanks, u are counting the words, i am doing with characters, wel that i can change thanks for the guidence!

Cheers
CERTIFIED EXPERT

Author

Commented:
awesome
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
per request :) return false is added to edit function, word count bug is fixed on opening bla bla bla...


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n){
  $("#divEdit").show();
  var txt = $("#ta"+n).val();
  $("#taEdit").val(txt);
  ix = n;
  setWordCount(txt);
  return false;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});

function wordCount(v){
	return v.split(/[\s\.\?]+/).length;
}

function setWordCount(v){
	$('#total_words').html(wordCount(v));
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="return edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="return edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="return edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="return edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="return edit(5,this)">Edit</a><hr>

<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit onKeyPress="setWordCount(this.value)"></textarea><br>
Total words: <span id="total_words"></span><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
and with char count
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this; 
};
	
var ix;
function edit(n){
  $("#divEdit").show();
  var txt = $("#ta"+n).val();
  $("#taEdit").val(txt);
  ix = n;
  setCount(txt);
  return false;
}

function save(){
  $("#ta"+ix).val($("#taEdit").val());
  $("#divEdit").hide();
}

function cancel(){
  $("#divEdit").hide();
}

$(document).ready(function() {
	$("#divEdit").center();
});

function wordCount(v){
	return v.split(/[\s\.\?]+/).length;
}

function charCount(v){
	return v.length;
}

function setCount(v){
	//$('#total_words').html(wordCount(v));
	$('#total_words').html(charCount(v));
}
</script>

<textarea id=ta1></textarea><br><a href="#" onClick="return edit(1,this)">Edit</a><hr>
<textarea id=ta2></textarea><br><a href="#" onClick="return edit(2,this)">Edit</a><hr>
<textarea id=ta3></textarea><br><a href="#" onClick="return edit(3,this)">Edit</a><hr>
<textarea id=ta4></textarea><br><a href="#" onClick="return edit(4,this)">Edit</a><hr>
<textarea id=ta5></textarea><br><a href="#" onClick="return edit(5,this)">Edit</a><hr>

<div id=divEdit style="background-color:white;display:none;border:3px solid silver;padding:10px;width:200px;position:absolute;">
<textarea id=taEdit onKeyPress="setCount(this.value)"></textarea><br>
Total words: <span id="total_words"></span><br>
<button id=btnSave onClick="save()">Save</button>&nbsp;<button id=btnCancel onclick="cancel()">Cancel</button>&nbsp;
</div>

Open in new window

CERTIFIED EXPERT

Author

Commented:
ok, this function

$.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ($(window).height() - this.height()) /16+$(window).scrollTop() + "px");
        this.css("left", ($(window).width() - this.width()) /16+$(window).scrollLeft() + "px");
        alert(this);
   return this;
};

how to make it work to appear the textbox just under each link [edit]
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.