Show text field & check input using jQuery

n this tutorial, we will discuss about how to display 'text field' by a button click & check input using jQuery.

n this tutorial, we will discuss about how to display 'text field' by a button click & check input using jQuery.

Show text field & check input using jQuery

In this tutorial, we will discuss about how to display 'text field' by a button click & check input using jQuery. In the below example, aIn this tutorial, we will discuss about how to display 'text field' by a button click & check input using jQuery. In the below example, a button is given when we click on it, it will display a text field and a question , if the answer is yes then ,we have to input "y" for "yes". After submitting value , it will show a paragraph for 4000 milliseconds and after it, this line will be changed with another line ,which will be permanently displayed on browser.

jqShowTextField.html

<!DOCTYPE html>
<html>
<head>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button>Click this</button>
<span>Want to move ahead?(Type'y' for yes & hit "Enter") </span>
<div>
<form>

<input type="text" value="y/n"/>
</form>
</div>
<p style="display:none;">It blinks for a while</p>

<script>
function clickIt() {
$("span,div").show("normal");
}
$("button").click(clickIt); // can pass in function name
$("form").submit(function () {
if ($("input").val() == "y") {
$("p").show(4000, function () {
$(this).text("Welcome to final page");
});
}
$("span,div").hide("normal");
return false; // to stop the submit
});

</script>
</body>
</html>

OUTPUT

Before clicking button :

After clicking button :

After submitting value "y" for 'yes' :

Download Source code

Click here to see demo

Ads