| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Get control of your email attachments. Connect all your Gmail accounts and in less than 2 minutes, Dokkio will automatically organize your file attachments. You can also connect Dokkio to Drive, Dropbox, and Slack. Sign up for free.

View
 

Lecture - JavaScript - Processing URL and Query String

Page history last edited by diravix@... 6 years, 3 months ago

 Processing URL and Query String

 

 

Prerequisites

 

Lecture - Form Validation in Javascript

 

Summary

 

Topics covered:

Using the location object

Processing form input

 

Video 

 

 

http://online1.daytonastate.edu/player2.php?id=780965ae22ea6aee11935f3fb73da841 

 

Reference Materials

 

HTMLForm.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Form</title>
    <link rel="stylesheet" type="text/css" href="/styles.css">
<script>
 function validateForm()
 {
    var fname = document.forms["myForm"]["name"].value;
    return validateNotBlank(fname, "Name");
 }
 
 function validateNotBlank(value, label)
 {
   if (value==null || value=="")
     {
     alert("Please enter a value for " + label);
     return false;
     }
  return true;     
 }
</script>
  </head>
  <body>

<form name="myForm" onsubmit="return validateForm()" action="HTMLFormRequest.html" >
<p>
<label>Enter Name (Javascript): <input type="text" name="name"></label><br/>
<label>Color(HTML5): <input type="color" name="color"/></label><br/> 
<label>Date HTML5): <input type="date" name="date" /></label><br/>
<label>E-Mail(HTML5): <input type="email" placeholder="name@domain.com" name="email" /></label><br/>
<label>Number(HTML5): <input type="number" min="0" max="10" name="number"/></label><br/>
<label>Range(HTML5): <input type="range" min="0" max="10" value="5" name="range"/></label><br/>
</p>
<input type="submit" value="Submit" />
</form>
  </body>
</html> 

 

 

HTMLFormRequest.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Form Process</title>
    <link rel="stylesheet" type="text/css" href="/styles.css">
<script>
function setup()
{
  document.writeln("<p> location: " + location + "</p>");
  document.writeln("<p> location.search: " + location.search + "</p>");
  document.writeln("<p> location.search (URI Decoded): " + decodeURIComponent(location.search) + "</p>");
  var sl = location.search.split("&");
  document.writeln("<p> split string: " + sl + "</p>");
  document.writeln("<p> First element: " + sl[0] + "</p>");
  document.writeln("<p> Length: " + sl.length + "</p>");
  var split1=sl[0].split("=");
  document.writeln("<p> First element Name: " + split1[0] + "</p>");
  document.writeln("<p> First element Value: " + split1[1] + "</p>");
}
</script>
  </head>
  <body onload="setup();">
  </body>
</html> 

 

 

Additional Information

 

JavaScript location object - http://www.w3schools.com/jsref/obj_location.asp 

JavaScript split method - http://www.w3schools.com/jsref/jsref_split.asp 

JavaScript onload event - http://www.w3schools.com/jsref/event_body_onload.asp 

JavaScript arrays - http://www.w3schools.com/js/js_obj_array.asp 

 

 

COP 4813 Lectures

Comments (0)

You don't have permission to comment on this page.