Create New Contact using Phonegap / Apache Cordova – Part 2

create new contact using phonegap
create new contact using phonegap
Apache Cordova / Phonegap contact api

In previous article, we’ve create a new contact (static / prefixed ) using phonegap / apache cordova contacts plugin. But in this article i’m going to explain you, how to create a new contact using phonegap / apache cordova contacts plugin dynamically

Steps for creating new contact using phonegap

  • Create a new phonegap / apache cordova
  • Add Required platform such as android, ios, windows and more
  • Add contact plugin using the following commands

For Cordova 5+

cordova plugin add cordova-plugin-contacts

For Older versions

cordova plugin add org.apache.cordova.contacts

or

cordova plugin add https://github.com/apache/cordova-plugin-contacts.git

Example code for create new contact

First we need to create some html page for getting contact information and store them into contact database. you can find a code here

<body>
<div>
<input type="text" placeholder="fullname" id="fullname"/><br/>
<input type="text" placeholder="mobile number 1" id="mobile1" /><br/>
<input type="text" placeholder="mobile number 2" id="mobile2"/><br/>
<input type="text" placeholder="Email" id="email"/><br/>
<button id="createNewContact">Create New Contact from form</button>
</div>
</body>

Jquery Script / Phonegap Script for creating new contact

<script type="text/javascript">
$("#createNewContact").click(function(){
 var name=$("#fullname").val();
 var mobile1=$("#mobile1").val();
 var mobile2=$("#mobile2").val();
 var email=$("#email").val();

 var myNewContact = navigator.contacts.create(
 {
 "displayName":name,
 "name":{
 "givenName": name,
 "formatted":name,
 },
 "nickname":name,
 "phoneNumbers":[
 {"type":"mobile","value":mobile1,"id":0,"pref":false},
 {"type":"other","value":mobile2,"id":1,"pref":false}
 ],
 "emails":[
 {"type":"home","value":email,"id":0,"pref":false}
 ]
 }
 );
 myNewContact.save();
 alert("The contact, " + myNewContact.name.givenName + ", has been created");
 });
</script>

navigator.contacts.create method is used for creating new contact. save is used for storing a contact into contact database

  • harika

    Hi sir,
    The same code I wrote in the program. But I’m not getting any output.
    Do we need to add jquery cdn?