I have an array of textboxes each having button on right side which when pressed the text should be displayed on new window using Jquery. For demo, you might have seen jquery lightbox plugin which shows the images in the new window. I want exactly same but instead of images i want to show the text value of the text box when its button is pressed.
Please tell me how can i do that?
You can do it like this:
var win = window.open();
var doc = win.document;
doc.write($('#textbox_id').val());
doc.close();
testopen.html:
<html>
<head></head>
<body>
<div id="field1"></div>
<div id="field2"></div>
</body>
</html>
testopener.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<input id="field1" />
<input id="field2" />
<button id="opentest">test</button>
</form>
</body>
<script type="text/javascript">
$(function(){
var winopen = null;
$("#opentest").bind("click", function(){
if (winopen == null || winopen.closed){
winopen = window.open("testopen.html","", "left=100,top=100,width=250,height=150");
}
var field1 = $("#field1").val(),
field2 = $("#field2").val(),
ntry = 3,
sendMsg = function(){
if (winopen.document.readyState != "complete"){
if (ntry >= 0)
setTimeout(sendMsg, 1000);
ntry--;
return;
}
$(winopen.document.body).find("#field1").html(field1);
$(winopen.document.body).find("#field2").html(field2);
}
sendMsg();
});
});
</script>
links
http://jquery.com/demo/thickbox/
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
If you would like to show ony texts, I strongly suggest to use dialog instead of the plugin.
There are lots of plugin out there to achieve this,which supports to show both images and texts.
http://colorpowered.com/colorbox/
You can do something like this:
$('input#mybutton').click(function() {
var text = $('textarea#mytextarea').val();
});
So, when the button is clicked, the content from textarea will be collected to a variable. After, you just need to inject that variables content on your destination: