I am just starting out teaching myself jQuery (bought the ninja book yesterday) and I’d appreciate any help with this script I’m trying to write…
I want to have a form asking the user for a number and then slide in a message underneath the form based on the number they’ve entered.
Here is my lame failure of an attempt:
<div id="kyss">
<!-- show if javascript is disabled -->
<p id="kyss-ph-msg">Please enable JavaScript for this page to work properly.</p>
</div>
$(document).ready(function() {
$('#kyss-ph-msg').hide();
$('<input type="button" id="kyss-ph-submit" value="go" />').prependTo('#kyss');
$('<input type="text" id="kyss-ph-value" />').prependTo('#kyss');
$('#kyss-ph-submit').click(function() {
ph = Math.abs(parseFloat($('#kyss-ph-value').val()));
ph = ph.toFixed(2);
if (!isNaN(ph)) {
if(ph < 6.3) {
$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Less than 6.3</p>');
}
if(ph >= 6.3 && ph < 7) {
$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 6.3 and less than 7</p>');
}
if(ph >= 7) {
$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 7</p>');
}
}
$('#kyss-ph-msg').slideDown('slow');
});
});
So, the script works, but it doesn’t animate the message. I don’t know why. Any ideas?
Thanks for your help.