Forms with Spans

Forms with Span tags

More form practice, now with spans. Mastering forms is very useful for web developers.

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/example.css">
    <script src="scripts/jquery-1.11.3.js"></script>
    <script src="scripts/myscript.js"></script>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="message">Message</label>
        <input type="text" class="form-control" id="message" placeholder="Message">
      </div>
      <div class="form-group">
        <label for="from">From</label>
        <input type="text" class="form-control" id="from" placeholder="From">
      </div>
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" class="form-control" id="phone" placeholder="Phone">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <p>Message: <span class="message"></span> from: <span class="from"></span> Phone: <span class="phone"></span></p>
  </body>  
</html>

myscript.js

$(document).ready(function(){
  $("form").on("submit", function(event){
    event.preventDefault();

    var message = $("input#message").val();
    var from = $("input#from").val();
    var phone = $("input#phone").val();

    $(".message").text(message);
    $(".from").text(from);
    $(".phone").text(phone);
  })
})

Try the following:

Make a new form with spans.