1 
 <!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!

Improve this question

4 Answers 4

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Since you're using jQuery I'd have a look at .serialize(). It's probably the easist way to put form data into a JavaScript array.

https://api.jquery.com/serialize/

Alternatively you could build you're own array, but I think since you're a "beginner", serialize will do all that for you.

Improve this answer

1 Comment

Thank you for your reply, however i wanted to stay away from using jQuery
0

When you are supporting IE10+, you should really look into the FormData-object, which is really cool stuff. It has all the support you missed. Now you can send a custom non-existing form without creating one with jQuery for example like:

var form = new FormData();
form.append( 'uploaded_file', $('input[type=file]')[0].files[0] );
form.append( 'description', 'I am a cool file, you know...' );

$.ajax({
    url: 'http:/whatev.er/',
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(data) {

        alert('I just uploaded a file with an AJAX-call so I do not have to refresh the page! Wooo!');
    }
});
Improve this answer

1 Comment

Thank you for your comment! ill be sure to look into that
0

You can use jQuery's .serializeArray().

This is how you can convert a form's data into array/object:

$("#formid").serializeArray();

And this is how you could put the data back onto the form:

$.each(form_data, function(n, el) {
   // n is just a number identifying it
   $("#testform input[name='"+el.name+"']").val(el.value);
});

Working demo: https://jsfiddle.net/egbar7r5/

Improve this answer

1 Comment

Thank you for your reply, however i wanted to stay away from using jQuery

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.