Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/04"
From Publication Station
(Created page with "=Examples - using Javascript and jQuery= ==user input== We can receive text user input from the user, using HTML forms and jQuery [https://api.jquery.com/submit/ .submit() li...") |
|||
| Line 1: | Line 1: | ||
=Examples - using Javascript and jQuery= | =Examples - using Javascript and jQuery= | ||
==user input== | ==user text input== | ||
We can receive text user input from the user, using HTML forms and jQuery [https://api.jquery.com/submit/ .submit() listener] | We can receive text user input from the user, using HTML forms and jQuery [https://api.jquery.com/submit/ .submit() listener] | ||
| Line 17: | Line 17: | ||
input[type="submit"]{font-weight: bold; width: auto; } | input[type="submit"]{font-weight: bold; width: auto; } | ||
input[type="submit"]:focus{ color: yellow; background-color: rgba(0, 0, 0, 0.75);} | input[type="submit"]:focus{ color: yellow; background-color: rgba(0, 0, 0, 0.75);} | ||
#instruction{display: none; } | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<h1>Tell me you name...</h1> | <h1 id="question">Tell me you name...</h1> | ||
<form id="greeting"> | <form id="greeting"> | ||
<input name="firstName" id="firstName" required="" placeholder="Your first name" type="text"><br> | <input name="firstName" id="firstName" required="" placeholder="Your first name" type="text"><br> | ||
<input value="Send" type="submit"> | <input value="Send" type="submit"> | ||
</form> | </form> | ||
<h2 id="instruction">Now <span class="userName"></span>, I want you to walk 10 steps away from where you are now.</h2> | |||
| Line 30: | Line 32: | ||
var firstName; // variable that will store user name | var firstName; // variable that will store user name | ||
$("form#greeting").submit(function(event){ | $("form#greeting").submit(function(event){ | ||
console.log( $('#firstName').val() ); | |||
firstName = $('#firstName').val(); | firstName = $('#firstName').val(); | ||
event.preventDefault(); | event.preventDefault(); | ||
$("#firstName").val(''); // | $("#firstName").val(''); //clean input#firstName | ||
$('form, #question').css('display', 'none'); //hide form | |||
$('#instruction').css('display', 'block'); //show instruction | |||
$('span.userName').text(firstName); //Add name to span.userName | |||
}) | }) | ||
</script> | </script> | ||
</body></html> | </body></html> | ||
</source> | </source> | ||
Revision as of 12:48, 6 December 2015
Examples - using Javascript and jQuery
user text input
We can receive text user input from the user, using HTML forms and jQuery .submit() listener
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
form{width: 50%;}
input{padding: 6px; width:50%; border: 2px solid #ccc; margin-top: 1em; color: #000;}
input:focus{border: 2px solid yellow; background-color: rgba(0, 0, 0, 0.75); color: white; font-weight: bold;}
input[type="submit"]{font-weight: bold; width: auto; }
input[type="submit"]:focus{ color: yellow; background-color: rgba(0, 0, 0, 0.75);}
#instruction{display: none; }
</style>
</head>
<body>
<h1 id="question">Tell me you name...</h1>
<form id="greeting">
<input name="firstName" id="firstName" required="" placeholder="Your first name" type="text"><br>
<input value="Send" type="submit">
</form>
<h2 id="instruction">Now <span class="userName"></span>, I want you to walk 10 steps away from where you are now.</h2>
<script>
var firstName; // variable that will store user name
$("form#greeting").submit(function(event){
console.log( $('#firstName').val() );
firstName = $('#firstName').val();
event.preventDefault();
$("#firstName").val(''); //clean input#firstName
$('form, #question').css('display', 'none'); //hide form
$('#instruction').css('display', 'block'); //show instruction
$('span.userName').text(firstName); //Add name to span.userName
})
</script>
</body></html>
What can we do by getting the user's text input?
- address him/her by name.
- ask him/her other questions. E.g. where are you?
- store his/her answers
