<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>body{padding-top:50px;}.starter-template{padding:40px 15px;text-align:center;}</style>
<link rel="stylesheet" type="text/css" href="createdesign.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Newsfeed.html">NPSS Announcements</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="Newsfeed.html">Newsfeed</a></li>
<li><a href="Create.html">Create</a></li>
<li><a href="Calender.html">Calender</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div><!--.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>Create A New Announcement</h1>
<form action="action_page.php">
Announcement Title: <input type="text" name="ATitle" size="50">
<br>
Descritption:<br>
<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female" checked>Female
<br>
When is the Meeting?<input type="datetime-local" name="Awhen" </input>
<br>
Where is the Meeting<input type="text" name="Awhere"></input>
</form>
</body>
</html>
I'm trying to put all the information from the , like the Announment Title, Description, Gender and time into an array(JS), so I can retrieve them later and display the information else where. I'm a beginner programmer so please explain! I appreciate the Help!
The basic you need to understand is that you can access these elements and get their values. Then you can put them in to an array. Here is how you get the value of a single element and put it in to an array.
var myFormData = []; //declare an array
var value1 = document.getElementById("myTextInput").value; //get the value of an element by it's id
myFormData.push(value1); //put to the array
Next, there are shortcuts to perform this on multiple elements at once.
You can add some class, lets say myInputs to all your form fields and use a query selector to get them all at once to an array-like-list.
Here is how you select multiple elements by their class.
var myFormInputs = document.getElementsByClassName("myInputs")
Now myFormInputs is an array-like-list.
You can call filter function on myFormInputs and get their values.
var myFormData = Array.prototype.filter.call(myFormInputs, function(anElement) {
return anElement.value;
})
The inner function is called per element - so we can return the value of it. myFormData array is now created with all these values.
There are lot of shorter methods to do it. You can use some elegant libraries like JQuery for fast development and shorter code. But above are the building blocks of all.
Don't forget to learn about JS Objects too.