Save and retrieve user input from database with javascript?

Question

I'm working on a small, temporary site that will be used for collecting some names.

The idea is that people fill in the number of their class and their name and once they press a button, these two values are added to the page and can be viewed by everyone who visits the site.

I've already made a concept of this using javascript: www.googledrive.com/host/0B_eZKT0Ni3-tOXF5OVVQeWZRRjQ

The only problem is that the items aren't really stored on the site. As far as I know, you can only accomplish this using a database, but I have no experience with linking a database to a webpage.

Can someone help me with this or does someone know a source where I can find a solution for this? My searches turned up nothing.

I'm sorry if I'm sounding like a "help vampire". I only turned to you guys for a solution because I can't find it anywhere else.

HTML:

<body>
<div id="wrapper">
    <div id="header">
        <h2 id="title">Italiëreis 2015: opdiening tijdens quiz</h2>
    </div>  
    <div id="content">
        <!-- eerste ploeg -->
        <div class="L">
            <p id="kop">Ploeg 1</p>
            <p class="klas"><input type="text" id="klas1" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam1" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText1()" value="Schrijf in" class="button" />
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst1"></ol>
            </div>
        </div>
        <!-- tweede ploeg -->
        <div class="L">
            <p id="kop">Ploeg 2</p>
            <p class="klas"><input type="text" id="klas2" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam2" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText2()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst2"></ol>
            </div>
         </div>
        <!-- derde ploeg -->
        <div class="L">
            <p id="kop">Ploeg 3</p>
            <p class="klas"><input type="text" id="klas3" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam3" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText3()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst3"></ol>
            </div>
        </div>
        <!-- vierde ploeg -->
        <div class="L">
            <p id="kop">Ploeg 4</p>
            <p class="klas"><input type="text" id="klas4" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam4" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText4()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst4"></ol>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="credits">Code geschreven door Bert-Jan van Dronkelaar - 6E</div>
    </div>
</div>

CSS is irrelevant.

Javascript:

        //eerste ploeg
    function changeText1() {
        var klas1 = document.getElementById('klas1').value;
        var naam1 = document.getElementById('naam1').value;
        if (document.getElementById('klas1').value != "" && document.getElementById('naam1').value != "") {
            var node = document.createElement("LI");
            var textnode1 = document.createTextNode(klas1 + " " + naam1);
            node.appendChild(textnode1);
            document.getElementById("lijst1").appendChild(node);
        }
    }
    //tweede ploeg
    function changeText2() {
        var klas2 = document.getElementById('klas2').value;
        var naam2 = document.getElementById('naam2').value;
        if (document.getElementById('klas2').value != "" && document.getElementById('naam2').value != "") {
            var node = document.createElement("LI");
            var textnode2 = document.createTextNode(klas2 + " " + naam2);
            node.appendChild(textnode2);
            document.getElementById("lijst2").appendChild(node);
        }
    }
    //derde ploeg
    function changeText3() {
        var klas3 = document.getElementById('klas3').value;
        var naam3 = document.getElementById('naam3').value;
        if (document.getElementById('klas3').value != "" && document.getElementById('naam3').value != "") {
            var node = document.createElement("LI");
            var textnode3 = document.createTextNode(klas3 + " " + naam3);
            node.appendChild(textnode3);
            document.getElementById("lijst3").appendChild(node);
        }
    }
    //vierde ploeg
    function changeText4() {
        var klas4 = document.getElementById('klas4').value;
        var naam4 = document.getElementById('naam4').value;
        if (document.getElementById('klas4').value != "" && document.getElementById('naam4').value != "") {
            var node = document.createElement("LI");
            var textnode4 = document.createTextNode(klas4 + " " + naam4);
            node.appendChild(textnode4);
            document.getElementById("lijst4").appendChild(node);
        }
    }

I recommenced looking up PHP and MySQL. PHP is a server-sided lanugage, which are used to interact with the server and database. While MySQL is a relation DB management system. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jan 10, 2015 at 21:39

Wesley Smith · Accepted Answer · 2015-11-01 04:47:17Z

2

@SpencerWieczorek is not wrong, PHP and MySql will work for what you need. However, there is a bit of a learning curve there.

For a beginner, I'd recommend using Parse. It's free and it makes saving and retrieving data trivial. Below is simple app that lets the user input a class year and their name and saves them so others can see them on the same page.

The snippet here wont work due to SO restrictions...

...but here is a working jsfiddle

This is accomplished with plain ole javascript BTW

To get this going on your own you'll need to:

You'll need to go to https://www.parse.com/#signup and create an account with them
Go to https://www.parse.com/apps/new and create an app
add this in your html's head tag <script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
Go to https://www.parse.com/apps/quickstart#parse_data/web/new, select your app from the dropdow (top-ish right) the Parse.initialize() function will be shown here with your app's Application ID and JavaScript key, copy this line for later
Replace the Parse.initialize() function in my example with the one you copied in step 4
Read up on the their javascript guide here to see what all you can do with parse
for a more indepth look, check out the Parse JavaScript SDK & Cloud Code Reference

You can also interact with parse with other scripting languages if you'd like.

Parse is free up to a certain amount of usage. I have one app that's used daily by 100+ users and doesn't come anywhere near having to pay anything.

Parse.initialize("Application ID", "JavaScript key");

function saveInput(){
        //get our new values 
        var klassYear = document.getElementById('klassYear').value.trim();
        var studentName = document.getElementById('studentName').value.trim();
  
        
       // dont continue if either value is blank
       if(klassYear=="" ||studentName=="" ){
           alert ('Please fill in both fields.') ;
           return; 
       }
       
   
        // create the `Parse` object
        var Klass = Parse.Object.extend("Klass");
		var _klass = new Klass();
		
        // set the object's values to our input values
		_klass.set("klassYear", klassYear);
		_klass.set("studentName", studentName);
		
        // save the object
		_klass.save(null, {
		  success: function(_klass) {
            // if the save succeeded, add the new info to our page
            retrieveSavedInputs()
            
		  },
		  error: function(_klass, error) {
            // save failed, do error handeling here
			console.log('Failed to create new object, with error code: ' + error.message);
		  }
	    });
  }


function retrieveSavedInputs(){
     
      // create a query to search for  our `Klass` items
      var Klass = Parse.Object.extend("Klass");
      var query = new Parse.Query(Klass);
          query.find({
			success: function(results) {
            
              // get our table's `tbody`  and clear it
              var myTbl = document.getElementById('mytbl');
              myTbl.innerHTML='';
              
              // `results` is an array of all the matches
              // loop through each
              for(var i =0; i < results.length; i++){
                
                  // get the values from the saved object
                  // note that `klassYear` and `studentName` 
                  // are not available within the scope of the `success` function
                  var k = results[i].get("klassYear")
                  var s = results[i].get("studentName")
            
                  // create a table row with the info and add it at the top of `contents`
                 myTbl.innerHTML = '<tr><td>'+k+'</td><td>'+s+'</td></tr>' + myTbl.innerHTML;
                  
                              
              }
			},
			error: function(error) {
			console.log("Error: " + error.code + " " + error.message);
			}
      });
}

// load all previously saved items
window.onload = retrieveSavedInputs(); 

//clcik handeler for the btn
document.getElementById("myBtn").addEventListener('click', saveInput , false);

table{
  margin-top:50px;
  }

 Class Year: <input type="text" id="klassYear"  value=""/> <br>
 Name: <input type="text" id="studentName" value=""/> <br>


 <input type="button" id="myBtn" value="Submit" class="button" />
<br> Add a ame and year above and see it added to the list below
    
<div id="myDiv"></div>


<table  width="400" border="1">
   <thead>    
       <tr>
          <th scope="col">Class Year</th>
          <th scope="col">Student Name</th>
       </tr>
  </thead>     
  <tbody id="mytbl">
  </tbody>
</table> Class Year: <input type="text" id="klassYear"  value=""/> <br>
 Name: <input type="text" id="studentName" value=""/> <br>


 <input type="button" id="myBtn" value="Submit" class="button" />
<br> Add a ame and year above and see it added to the list below
    
<div id="myDiv"></div>


<table  width="400" border="1">
   <thead>    
       <tr>
          <th scope="col">Class Year</th>
          <th scope="col">Student Name</th>
       </tr>
  </thead>     
  <tbody id="mytbl">
  </tbody>
</table>

edited Nov 1, 2015 at 4:47

answered Jan 10, 2015 at 23:39

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

13 Comments

BBelgiumJ Over a year ago

I can work with this. The only problem is that I can't get it to run in my browser using this code, stored in a local file.The jsfiddle link works but when I copy it to a html file, nothing happens when I run it.

Wesley Smith Over a year ago

I updated my answer with step by step instructions explaining how to set it up on your own, let me know if you need any help from there :)

Wesley Smith Over a year ago

@BBelgiumJ consider changing your question's title to something like "save and retrieve user input from database with javascript". That may make this easier to find for people having the same issue in the future

BBelgiumJ Over a year ago

Everything works so far :) The good thing is that I don't have to change too much code. I'll let you know when everything is done. Thank you :D

BBelgiumJ Over a year ago

Hey, one last question? Is it possible to add more objects with items in the same app using this code? If tried to include two apps in one file with the same code (only vars were different) but it overrides the other app (read: when you use two apps in one page, the last overrides the first, rendering it useless) Something like this: jsfiddle.net/BBelgiumJ/am8023ny

|

Collectives™ on Stack Overflow

Save and retrieve user input from database with javascript?

1 Answer 1

The snippet here wont work due to SO restrictions...

...but here is a working jsfiddle

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The snippet here wont work due to SO restrictions...

...but here is a working jsfiddle

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related