|
|
| (14 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| =Examples - using Javascript and jQuery=
| |
|
| |
|
| ==user text input==
| |
| We can receive text user input from the user, using HTML forms and jQuery [https://api.jquery.com/submit/ .submit() listener]
| |
|
| |
|
| |
| <source lang="html4strict">
| |
| <!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>
| |
|
| |
| </source>
| |
|
| |
| 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
| |
| *
| |
|
| |
| <source lang="html4strict">
| |
| </source>
| |
|
| |
|
| |
| <source lang="html4strict">
| |
| </source>
| |
