Save and retrieve user input from database with javascript?

javascript html database

11,697

@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>

11,697

Author by

BBelgiumJ

Updated on June 04, 2022

Comments

BBelgiumJ almost 2 years

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);
        }
    }

BBelgiumJ over 9 years

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 9 years

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 9 years

@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 9 years

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
Wesley Smith over 9 years

Dont forget to mark the answer correct if it solved your problem :)
BBelgiumJ over 9 years

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
Wesley Smith over 9 years

So you have multiple name and class inputs on the page, is that right?
Wesley Smith over 9 years

If that is the case will each in put have it's on list displaying them like groups?
Wesley Smith over 9 years

Ok I just looked at your example from your original question. I get it, just a sec
Wesley Smith over 9 years

Can you use jquery? if so it will significantly shorten the code needed
BBelgiumJ over 9 years

I can use it to some extent but I can always learn. This project in itself was already a very useful source of knowledge. So yes, use as much jquery as you please.
Wesley Smith over 9 years

Here is a jsfiddle showing how you can make it work with multiple lists jsfiddle.net/p7zt374t/14 . It uses jquery, so dont forget to import it by putting <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jqu‌ery.min.js"></script‌> in your <head> tag
BBelgiumJ over 9 years

Only one problem: it shows only one item in every list (it does save all the items). Other than that I'll have to modify it so it can work with the tables I've added www.googledrive.com/host/0B_eZKT0Ni3-teGdjcExXaVdZSmM
Wesley Smith over 9 years

My bad, line 90 should have been $('.list:eq('+g+')').append( '<li>' + n + ', ' + k + '</li>' ); not $('.list:eq('+g+')').html( '<li>' + n + ', ' + k + '</li>' ); updated at jsfiddle.net/p7zt374t/16 :)