I just started working with the iconic framework but am having problems inserting data into my database. Any time i try to submit data into my database table, my table column says undefined.
This is my javascript code
(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button #user_reg */
$(document).on("click", "#user_reg", function(evt)
{
var name= document.getElementsByName('name').value;
var username = document.getElementsByName('username').value;
var password = document.getElementsByName('password').value;
//var name= "charles";
//var username="tosin";
//var password= "tope";
var params = "name="+name+ "&" + "username="+username+ "&" + "password="+password;
var xmlhttp= new XMLHttpRequest();
xmlhttp.open("GET", "http://localhost/testimonies/createjoinprofile.php?"+params, false); // change url to where your php script stored
intel.xdk.notification.showBusyIndicator()
xmlhttp.onload = function(){
if(xmlhttp.status == 200)
{
var json_string = xhr.responseText;
var json = JSON.parse(json_string);
intel.xdk.notification.alert(json.message, "Message:");
}
else if(xmlhttp.status == 404)
{
intel.xdk.notification.alert("Web Service Doesn't Exist", "Error");
}
else
{
intel.xdk.notification.alert("Unknown error occured while connecting to server", "Error");
}
}
xmlhttp.send();
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
This is my HTML Code
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ionic/css/ionic.min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
/* following three (cascaded) are equivalent to above three meta viewport statements */
/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
/* see http://dev.w3.org/csswg/css-device-adapt/ */
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
/*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.js"></script>
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="js/index_init_services.js"></script>
<script type="application/javascript" src="js/UserRegistrationPage_user_scripts.js"></script>
</head>
<body ng-app="myApp">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglo..."></script> -->
<div class="upage bgbulue" id="mainpage">
<div class="upage-outer">
<div class="upage-content ac0 content-area vertical-col left" id="page_95_25">
<label class="item item-input widget uib_w_8 d-margins" data-uib="ionic/input" data-ver="0" id="name">
<input type="text" placeholder="Placeholder" name="name">
</label>
<label class="item item-input widget uib_w_9 d-margins" data-uib="ionic/input" data-ver="0" id="username">
<input type="text" placeholder="Placeholder" name="username">
</label>
<label class="item item-input widget uib_w_10 d-margins" data-uib="ionic/input" data-ver="0" id="password">
<input type="text" placeholder="Placeholder" name="password">
</label>
<button class="button widget uib_w_7 d-margins TXT button-large ion ion-edit" data-uib="ionic/button" data-ver="0" id="user_reg">Register</button>
</div>
<ion-header-bar class="bar inner-element uib_w_4 bar-positive bar-header" data-uib="ionic/header" data-ver="0">
<div class="buttons widget-container content-area horiz-area wrapping-col"></div>
<h1 class="title">header</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col"></div>
</ion-header-bar>
</div>
</div>
</body>
</html>
This is my PHP code
<?php
require('joinconn.php');
$name = @$_REQUEST['name'];
$user_name = @$_REQUEST['username'];
$password = @$_REQUEST['password'];
// array for JSON response
$response = array();
//add the users details to the database
$query = "INSERT INTO churchusers VALUES('', '{$name}', '{$user_name }', '{$password }')";
$result = @mysql_query($query);
// check for empty result
//if (mysql_affected_rows($result) > 0) {
if($result)
{
// success
$response["success"] = 1;
$response["message"] = "User details saved!";
// echoing JSON response
echo json_encode($response);
}
else
{
// did not save to db
$response["success"] = 0;
$response["message"] = "Not saved, try again". mysql_error();
// echo no crime JSON
echo json_encode($response);
}
?>