Home/ Questions/Q 8562815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T16:48:50+00:00

This is the only example of a form submission using IndexedDB that a could

  • 0

This is the only example of a form submission using IndexedDB that a could find but it only works on chrome because of the old setVersion function, I have been trying to get it to work but I´m new to Javascript and IndexedDB. Could somebody give me a hand in reverting it to work in Firefox too?
Thanks!

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=iso-8859-1>
<script>
var DB_NAME = 'DBforms';
var STORE_NAME = 'Form';    
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB    || window.msIndexedDB;

if (window.indexedDb) {
} else if (window.webkitIndexedDB) {
    window.indexedDB = window.webkitIndexedDB;
    window.IDBTransaction = window.webkitIDBTransaction;
} else if (window.mozIndexedDB) {
    window.indexedDB = window.mozIndexedDB;
} else {
   alert("Browser does not suport HTML5´s IndexedDB!");
}       

function onUnexpectedError(e) { alert('An error as occured: ' + e.value); }

function openStore(db, callback) {
    var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
    var store = transaction.objectStore(STORE_NAME);
    callback(store);
        function saveRow(store, row) {
    var key = new Date().getTime();
    var request = store.put(row, key);
    request.onsuccess = function() {
        alert('Form was saved');
    };
    request.onerror = onUnexpectedError;
}

function isOthergender() {
    return document.form.gender.selectedIndex == document.form.gender.length-1;
}

function saveRecord() {
    // get parameters from the form to build the record
    var gender, name, lastname, email, phone, observations, username;
    if (isOthergender())
        gender = document.form.other.value;
    else
gender = document.form.gender.options[document.form.gender.selectedIndex].value;
    name = document.form.name.value;
    lastname = document.form.lastname.value;
    email = document.form.email.value;
    phone = document.form.phone.value;
    observations = document.form.observations.value;
    username = document.form.username.value;
    var record = {'gender': gender, 'name': name, 'lastname': lastname, 'email': email, 'phone': phone, 'observations': observations, 'username': username};

**// This is what needs to be changed**
//----------------------------------------------------------------------------- 
// open db
var openDbRequest = indexedDB.open(DB_NAME);
openDbRequest.onsuccess = function (e) {
   var db = e.target.result;
   db.onerror = onUnexpectedError;

   if (!db.objectStoreNames.contains(STORE_NAME)) {     


   function createStore(db, callback) {
      var request = db.setVersion('1.0'); // setVersion tx req'd to createObjectStore

      request.onsuccess = function() {
             var store = db.createObjectStore(STORE_NAME);
         callback(store); // this executes in the setVersion tx
       };
       request.onerror = onUnexpectedError;
    }       

      // create db store and save form as row keyed by date
      createStore(db, saveRowCallback);
    } else {
     // open db store and save form as row keyed by date
     openStore(db, saveRowCallback);
    }


    function saveRowCallback(store) {
    saveRow(store, record);
    };

};

openDbRequest.onerror = function () {
alert('Allow access to IndexedDB for this webpage!');
};      
}

//--------------------------------------------------------------------

function enableOther() {
    if (isOthergender()) {
        document.form.other.disabled = false;
        document.form.other.value = 'what other?';
    } else {
        document.form.other.disabled = true;
        document.form.other.value = '';
    }
}


</script>
</head>
<body>
<form name="form">
    <table>
        <tr><td>
        <label>Gender</label>
        <select name="gender" onchange="enableOther()">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Bot">Bot</option>
            <option value="Other">Other</option>
        </select>
        </td></tr>
        <tr><td><input name="other" disabled="true"/></td></tr>
<tr><td><label>Name</label><input name="name" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Last Name</label><input name="lastname" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Email</label><input name="email" value="" size="10" maxlength="20"/></td></tr>
<tr><td><label>Phone number</label><input name="phone"/></td></tr><tr/>
<tr><td><label>Observations</label></td></tr><textarea name="observations" rows="3" cols="25" wrap="soft"></textarea></td></tr>
<tr><td><label>UserName</label><input name="username" value="" size="10" maxlength="20"/></td></tr>
    </table>
    <input type="button" name="save" value="Save" onclick="saveRecord()"/>
    <input type="reset" value="Reset"/>
</form>     
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To see the console.log messages in firefox, use the firebug extension. Then this should at least get you started:

    Get rid of function openStore.

    var openDbRequest = indexedDB.open(DB_NAME, 1);
openDbRequest.onerror = function (e) { console.log("error " + e); }
openDbRequest.onblocked = function (e) { console.log("blocked " + e); }
openDbRequest.onupgradeneeded = function (e) {
  var db = e.target.result;
  db.createObjectStore(STORE_NAME);
  var transaction = e.target.transaction;
  transaction.oncomplete = transaction.onabort = function(e) { console.log("transaction result: " + e); }
}
openDbRequest.onsuccess = function (e) {
  var db = e.target.result;
  if (!db.objectStoreNames.contains(STORE_NAME))
    console.log(STORE_NAME + " didn't exist, weird");
  var transaction = db.transaction(STORE_NAME, IDBTransaction.READ_WRITE);
  var store = transaction.objectStore(STORE_NAME);
  var key = new Date().getTime();
  var request = store.put(row, key);
  request.onsuccess = function(e) { console.log("onsuccess"); }
  request.onerror = function(e) { console.log("onerror"); }
  transaction.oncomplete = function(e) { console.log("oncomplete"); }
  transaction.onabort = function(e) { console.log("onabort"); }
};
    • 0