hovering problems!
hovering problems!
hi
I created an html page and wrote javascript which uses jquery's hover() method.It converts a textfield into a span when mouse leaves the textfield and converts the span back to textfield when mouse enters the span.
Also,I created a button ,which when clicked executes a function that takes the val() of element with id='title' and shows it in an alert.
I encountered two problems
1.This works fine as long as the text field contains default text. But if I leave the textfield blank by default ,the hover method can't detect the span and will not convert it to textfield.Is there some way I can create the textfield blank and yet make hover() work?
2.After I place mouse over the span and enters some value in the textfield,I move the mouse cursor onto the button and clicks it.At this moment ,the span has a an id='title' and so $("#title").val() should get the entered text.However ,the alert shows empty string of length=0
I tried this ,without moving the mouse cursor out of textfield and clicked the button using TAB-Enter
This time the alert shows the correct entered text
Why is this happening?Shouldn't the $("#title") be able to get the span element with id=title and .val() retrieve its text?I am a beginner in jquery/javascript.If anyone can explain this ,it would be a great help
harry
the html is
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
...
<script type="text/javascript" src="../includes/jquery-1.4.2.js" </script>
<script type="text/javascript" src= "../includes/sample.js" </script>
</head>
<body>
<label for="title">Title:</label>
<input type="text" name="mytitle" id="title" value="some def txt">
<br/>
<button type="button" id='submitbtn'>
</button>
</body>
</html>
and the javascript in sample.js is
$(document).ready( function(){
var enter_fld = function() {
var title = $("#title");
var input = $('<input type="text" name="mytitle" id="title" value="'+title.text()+'">');
input.hover(function() {}, leave_fld);
title.replaceWith(input);
}
var leave_fld = function() {
var title = $("#title");
var span = $('<span id="title"><em>'+title.val()+'</em></span>');
span.hover(enter_fld,function() {});
title.replaceWith(span);
alert('you left the textfield');
}
var processit=function(){
var title = $("#title");
var title_entry=title.val();
alert('you entered:'+title_entry+'of length='+title_entry.length);
};
leave_fld();
$("#submitbtn").click(processit);
}
);