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
– Jaiden Snow, Commented Mar 16, 2016 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
– Jaiden Snow, Commented Mar 16, 2016 at 19:47
You are using a submit you have to prevent submit that is the reazon you refresh the form — Jorge Mejia
– Jorge Mejia, Commented Mar 16, 2016 at 20:16
$( "#form_id" ).submit(function( event ) { alert( "Handler for .submit() called." ); event.preventDefault(); }); — Jorge Mejia
– Jorge Mejia, Commented Mar 16, 2016 at 20:19

Jaiden Snow · Accepted Answer · 2016-03-16 20:37:45Z

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, 2016 at 20:37

Jaiden Snow

8525 silver badges5 bronze badges

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

4 Comments

Mahdi Over a year ago

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 - stackoverflow.com/questions/36036182/…

Mahdi Over a year ago

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.

Jaiden Snow Over a year ago

A quote from stackoverflow > help > tour - 'The person who asked can mark one answer as "accepted".' ^_^

Mahdi Over a year ago

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

Collectives™ on Stack Overflow

JavaScript function not triggering

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related