JavaScript function not triggering

Question

I have 2 main functions which are near enough exactly the same except variable names and the table it is using.

I am using phonegap, html, javascript, JQuery Mobile.

function eventSoccer is being reached as the first alert is appearing, however the data input is not being stored and instead the page just refreshes.

function registerUser works perfectly fine, to which the sql query is displayed and the alert 'user has been registered' appears and the data is in the database.

Can anyone identify why function eventSoccer doesn't seem be working? As the two functions are nearly immaculate.

eventSoccer -

function eventSoccer() {
    alert("eventSoccer hit");
    var TitleT = document.getElementById("txttitle").value;
    var LocationL = document.getElementById("txtlocation").value;
    var PeopleP = document.getElementById("txtpeople").value;
    var DateD = document.getElementById("txtdate").value;
    var DescriptionD = document.getElementById("txtdesc").value;

    db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
    db.transaction(function(tx) {
        NewSoccer(tx, TitleT, LocationL, PeopleP, DateD, DescriptionD);
    }, errorEvent, successEvent);
}

function NewSoccer(tx, TitleT, LocationL, PeopleP, DateD, DescriptionD) {
    var _Query = ("INSERT INTO SoccerEvents(Title, Location, NoPeople, Date, Description) values ('" + TitleT + "','" + LocationL + "','" + PeopleP + "','" + DateD + "', '" + DescriptionD + "')");
    alert(_Query);
    tx.executeSql(_Query);
}

function errorEvent(error) {
    navigator.notification.alert(error, null, "Event not created", "cool");
}

function successEvent() {
    navigator.notification.alert("The event has now been created", null, "Information", "ok");
}

registerUser -

function registerUser() {
    var Username = document.getElementById("txtusername").value;
    var Firstname = document.getElementById("txtfirstname").value;
    var Lastname = document.getElementById("txtlastname").value;
    var Email = document.getElementById("txtemail").value;
    var Password = document.getElementById("txtpassword").value;
    var Confirmpass = document.getElementById("passwordconfirm").value;

    db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
    db.transaction(function(tx) {
        NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass);
    }, errorRegistration, successRegistration);
}

function NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass) {
    var _Query = ("INSERT INTO SoccerEarth(UserName, FirstName, LastName, Email, Password, CPass) values ('" + Username + "','" + Firstname + "','" + Lastname + "','" + Email + "', '" + Password + "', '" + Confirmpass + "')");
    alert(_Query);
    tx.executeSql(_Query);
}

function errorRegistration(error) {
    navigator.notification.alert(error, null, "Got an error mate", "cool");
}

function successRegistration() {
    navigator.notification.alert("User data has been registered", null, "Information", "ok");
}

HTML -

<div data-role="content">
    <br>
    <form>
        <label for="txttitle">Title</label>
        <input type="text" id="txttitle">
        <br>
        <label for="txtlocation">Location</label>
        <input type="text" id="txtlocation">
        <br>
        <label for="txtpeople">Number Of People</label>
        <input type="text" id="txtpeople">
        <br>
        <label for="txtdate">Date</label>
        <input type="text" id="txtdate">
        <br>
        <label for="textdesc">Description</label>
             <textarea name="textarea" id="textdesc"></textarea>
        <br>
        <input type="submit" value="submit" onclick="return eventSoccer()">
    </form>
</div>

Question is too broad, provided data is too scarce. You use a lot of technologies, one of which could be causing your problem. As it is - answering this question is like guessing one number from 1 to 100. To find your bug you need to break your code apart to decoupled components. I see these components that could be failing: database, html inputs, jquery mobile, navigator.notification.alert. Break things apart so you could test problems in those separately. — Jaiden Snow, Mar 16 '16 at 19:38
First of all - it could be that your browser is giving you console.error. What is it? Second - jQueryMobile has a very disgusting system of UI in everything that depends on id attribute - and you use id for your textareas. In short if you use jQM and load few pages by ajax - they MUST NOT contain id with the same names. That include reloading the same page. Third - check your database - does SoccerEvents table exists. Other than that - we see here just a tip of iceberg here. It is not enough. — Jaiden Snow, Mar 16 '16 at 19:47
@JoanSparrow Yes, the database is created and the table exists hence why I mentioned that the function registerUser works perfectly fine and the alert "eventSoccer Hit" is working which means the HTML element is finding the function eventSoccer. Thus, surely the problem must lie within the function eventSoccer? — Mahdi, Mar 16 '16 at 20:00
To clarify: 'and the table exists' - no I was a little skeptical about this line - "INSERT INTO SoccerEvents' - does 'SoccerEvents' table exist? Maybe you forgot to define it? Because registerUser "INSERT INTO SoccerEarth' was using 'SoccerEarth' table - and ok that table exists. But 'SoccerEvents'? — Jaiden Snow, Mar 16 '16 at 20:16
You are using a submit you have to prevent submit that is the reazon you refresh the form — Jorge Mejia, Mar 16 '16 at 20:16
$( "#form_id" ).submit(function( event ) { alert( "Handler for .submit() called." ); event.preventDefault(); }); — Jorge Mejia, Mar 16 '16 at 20:19
HTML - textarea id="textdesc", JS - document.getElementById("txtdesc").value; ---- I mean tExtdesc and txtdesc are different things. — Jaiden Snow, Mar 16 '16 at 20:22

score 2 · Accepted Answer · answered Mar 16 '16 at 20:37

2

I think it breaks here:

var DescriptionD = document.getElementById("txtdesc").value;

document.getElementById("txtdesc") = null, becase there is no 'txtdesc' in your HTML (you have 'textdesc')

Thus we have document.getElementById("txtdesc").value <=> null.value - that will definitely throw error and that throw breaks to hell normal execution of code.

By the way - I am puzzled how this could actually work:

<input type="submit" value="submit" onclick="return eventSoccer()">

I would write it at least in this form:

<input type="submit" value="submit" onclick="eventSoccer(); return false;">

So that submit-click wouldn't send form? Or your intention is to send form? Anyways - it is your choice in this matter.

answered Mar 16 '16 at 20:37

Jaiden Snow

852
5
5

Joan you legend! The incorrect field name was the issue, can't believe I didn't spot it, thanks for your help! I do however have another query which was never resolved, would be great if you have any feedback on it - http://stackoverflow.com/questions/36036182/how-to-remove-blink-between-page-switch-jquery-mobile?noredirect=1#comment59722332_36036182 – Mahdi Mar 16 '16 at 22:15
I would give you an up vote but I am new to stackoverflow, so I don't even have 15 reputation yet to be able to give you an upvote. – Mahdi Mar 16 '16 at 22:16
A quote from stackoverflow > help > tour - 'The person who asked can mark one answer as "accepted".' ^_^ – Jaiden Snow Mar 17 '16 at 17:38
When I upvote - "Thanks for the feedback! Once you earn a total of 15 reputation, your votes will change the publicly displayed post score" I'm on 14, so close!! – Mahdi Mar 17 '16 at 17:55

JavaScript function not triggering

1 Answers1