简体   繁体   中英

phonegap javascript ajax not working

I am a nnewbie in appdevelopment and tried developing a mobile app using phonegap. I have a remote shared server which consist the mysql table. I want to signup a user which will eventually send the data via javascript and ajax to a php sever page that will post the data on the mysql table.

but on my app the javascript codes in the header are not working. so is the js page in which i have the ajax coding to connect to the server.

what should be done?

 $(document).bind('deviceready', function(){ $(function(){ $('signup').submit(function(){ var postData = $(this).serialize(); alert("this"); $.ajax({ type: 'POST', data: postData, //change the url for your project url: 'http://205.251.133.242:2082//home/lyfspl62/public_html/addUsermobile.php', success: function(data){ console.log(data); alert('Your comment was successfully added'); }, error: function(){ console.log(data); alert('There was an error adding your comment'); } }); return false; }); }); }); 
  <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/post.js"></script> <script type="text/javascript"> function sunc() { document.addEventListener("deviceready",onDeviceReady,false); alert("loading"); document.getElementById("home").style.display="block"; document.getElementById("login").style.display="none"; document.getElementById("signup").style.display="none"; } function login() { document.getElementById("home").style.display="none"; document.getElementById("login").style.display="block"; document.getElementById("signup").style.display="none"; } function signup() { document.getElementById("home").style.display="none"; document.getElementById("login").style.display="none"; document.getElementById("signup").style.display="block"; } function validatel(){ var emaill = document.getElementById("emaill"); var pwd = document.getElementById("passwordl"); if(emaill=="null" || emaill==""){ alert("email must be filled out"); return false; } else(pwd=="null" || pwd==""){ alert("password must be filled out"); return false; } } function validates(){ var emaill = document.getElementById("emaill"); var pwd = document.getElementById("passwordl"); if(emaill=="null" || emaill==""){ alert("email must be filled out"); return false; } else(pwd=="null" || pwd==""){ alert("password must be filled out"); return false; } } </script> <title>LyfSplash</title> </head> <body onload="sunc()"> <h1>LyfSplash</h1> <div ata-role="page" class="home" id="home" > <button type="button" onclick="login())" >Login</button> <button type="button" onclick="signup()">signup</button> <script type="text/javascript"> alert("working"); </script> </div> <div class="login" id="login" > <form > email:<br> <input type="email" name="email" id="emaill" autocomplete="on"> <br> Password:<br> <input type="password" name="password" id="passwordl" > </form> </div> <div class="signup" id="signup" > <form id="ff" action="http://205.251.133.242:2082//home/lyfspl62/public_html/addUsermobile.php"> FirstName:<br> <input type="text" id="firstName"> <br> LastName:<br> <input type="text" id="lastName"> <br> Country:<br> <input type="text" id="Country"> <br> City:<br> <input type="text" id="city"> <br> Phone<br> <input type="text" id="phone"> <br> Mobile<br> <input type="text" id="mobile"> <br> email:<br> <input type="email" name="email" id="emails"> <br> DOB<br> <input type="text" id="DOB"> <br> <button type="submit" value="submit">Login</button> </form> </div> </body> 

You are trying to bind the submit event handler to the wrong element. You should bind it to the form instead of the wrapper div . There's also the # missing in the selector. Change your code to this:

$('#ff').submit(function () {
    // ...
});

You are also missing the data in the error callback:

error: function (data) {
    console.log(data);
    alert('There was an error adding your comment');
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM