how to get data from an html5 form without using php in phonegap

Question

have to design an app in phonegap using html5 in which some data has to be collected from the form and is stored in a database.
the question is that how can i get that data from the form without using php and the 'post' method..??
suppose the user has to login before proceeding, now how can i get the username and password from the form and match it to the database. The problem is not of

Answer 1

Phonegap is full javascript api. You won't have a system with html form sending request/response. You have to design your app in a way it is using services. Try to add some javascript library like jquery mobile, sencha or just jquery (like example below) to help you in your work. These libraries work fine with Phonegap (and sencha is the most optimized).

• Write your service side ; it could be just simple php pages that will handle form parameters like a standard html application. You need a server side somewhere to access the database ; so host this file on an php/apache somewhere it can be accessible to the application.

--

<?php 
   /* mySaveService.php */
   /* do something like $_GET['param1'] mysql_connect() / mysql_query() and all the stuff */
?>

--

• Design your client's view side, you can write the bare html code or use a framework like Sencha (cleaner and harder way).

--

<form>
  <input type="text" name="param1" value="" />
  <input type="button" class="submit" value="send" />
</form>

--

• Add a listener on your form submission or the submit-button click :

--

$('form .submit').click( function() {
  saveInDb($(this).parents('form:first'));
});

--

• Write a javascript function which sends an ajax call with your form's data. The url will not be in the same domain, be sure to allow cross-domain requests.

--

saveInDb = function($form) {   
  var myParams = array();   
  $form.find('input').each(function() {
    myParams[$(this).attr('name')] = $(this).val(); 
  });   
  $.ajax({
    url: 'http://domain.com/mySaveService.php',
    data: myParams,
    success: myCallback
  });   
}

--

• Don't forget to write the callback function, to alert the user that everything went fine

--

myCallback = function() {
  alert('It works');
}

--

• Alternatively, if you don't need to gather all the form's data in one place, you could use directly localstorage.

I hope it'll help. Regards