unable to get value from textbox used inside a facebox [duplicate]
I am using the following code:
<div class="example">
<p> <a href="#info" rel="facebox">View Facebox</a> </p>
<p> <input id="Button1" type="button" value="button" onclick="Get_Value();"/></p>
</div>
<div id="info" style="display:none;">
<p><input id="text1" name="text1" type="text" value="abc"/></p>
<p> <input id="Button2" type="button" value="button" onclick="Get_Value();$.facebox.close(); return;"/> </p>
<script type="text/javascript">
function Get_Value()
{
alert($('#text1').val());
var myTextField = document.getElementById('text1');
alert("You entered: " + myTextField.value)
}
</script>
The problem is that, in my alert statements, I am always getting the initial value 'abc' for the textbox text1; but not any value that is entered by the user when it is opened inside a facebox. Can anybody please help me out?
Hmm, using jQuery 1.3.2 your example doesn't seem to display the FaceBox area when clicking on the link (it stays invisible). I modified your example slightly with the following View Facebox link and now the FaceBox shows properly, as well as having the dialog display the current information (in both Safari and Firefox). Does this help?
<a href="#" onClick="javascript:$('#info').show(); return false;" rel="facebox">View Facebox</a>
Try with alert($('.content #text1').val());, this is because facebox is creating a "copy" of your dive in a table to display its "box" and keep the same ids (you can see that happening with Firebug)
Edit: working Firefox, Chrome and IE7 example:
<html>
<head>
<title>unable to get value from textbox used inside a facebox</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="facebox/facebox.js"></script>
<link rel="stylesheet" src="facebox/facebox.css"/>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
});
function Get_Value() {
alert($('#facebox input:first').val());
}
</script>
</head>
<body>
<div class="example">
<p><a href="#info" rel="facebox">View Facebox</a></p>
<p><input id="Button1" type="button" value="button"
onclick="Get_Value();"/></p>
</div>
<div id="info" style="display:none;">
<form>
<input name="text1" type="text" />
<input type="button" value="button"
onclick="Get_Value();$.facebox.close();"/>
</form>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论