mercredi 26 août 2015

Show Sqlite Column data in drop down Javascript or Jquery

am trying to load all the data of the sqlite column name Phone to a dropdown so what ever the data is inserted into the database the same data after insert the when the row data is presented the on same the the data is to be filled in the dropdown as a option am not able to present the "Phone" Column data into drop down

JS Fiddle Demo

HTML:

<input type="hidden" id="id" />First name:
<input type="text" id="firstName" />
<br/>Last name:
<input type="text" id="lastName" />
<br/>Phone:
<input type="text" id="phone" />
<br/>
<button class="insert">Insert</button>
<div id="results"></div>
<form>
    <select id="Phonenumberdd">
        <option value="select Phone number">select Phone number</option>
    </select>
</form>

JS:

var results = $('#results')[0];
var id = $('#id')[0];
var firstName = $('#firstName')[0];
var lastName = $('#lastName')[0];
var phone = $('#phone')[0];

var createStatement = "CREATE TABLE IF NOT EXISTS Contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT, phone TEXT)";
var selectAllStatement = "SELECT * FROM Contacts";
var insertStatement = "INSERT INTO Contacts (firstName, lastName, phone) VALUES (?, ?, ?)";


var db = openDatabase("AddressBook", "1.0", "Address Book", 200000);
var dataset;
createTable();

function onError(tx, error) {
    alert(error.message);
}

function showRecords() {
    results.innerHTML = '';
    db.transaction(function(tx) {
        tx.executeSql(selectAllStatement, [], function(tx, result) {
            dataset = result.rows;
            for (var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                results.innerHTML += '<li> ' + item['firstName'] + ' -   ' + item['lastName']  + '</li>';
            }
        });
    });
}

function createTable() {
    db.transaction(function(tx) {
        tx.executeSql(createStatement, [], showRecords, onError);
    });
}

function insertRecord() {
    db.transaction(function(tx) {
        tx.executeSql(insertStatement, [firstName.value, lastName.value, phone.value], loadAndReset, onError);
    });
}



function loadAndReset() {
    resetForm();
    showRecords();
}

function resetForm() {
    firstName.value = '';
    lastName.value = '';
    phone.value = '';
    id.value = '';
}


$('.insert').on('click', insertRecord);

Aucun commentaire:

Enregistrer un commentaire