Get textbox value in new window using Jquery
I have an array of textboxes each havi开发者_如何学编程ng 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();
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://fancybox.net/
http://colorpowered.com/colorbox/
http://dev.iceburg.net/jquery/jqModal/#
http://jqueryui.com/demos/dialog/
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:
- alert()
- plugin for popup window
- custom popup window
- open a new browser window with that content etc...
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/
http://www.ericmmartin.com/projects/simplemodal/
加载中,请稍侯......
精彩评论