Question

OK, assume I have a working database connection and table to insert a name and an image taken with the camera. When I try to insert the records I have tested it with the following statements.

    function insertRecord(){
    userName;
    imagePath;
    if(userName=='' || imagePath==''){insert the stuff}// this won't run the insert statement
    if(userName!='' && imagePath!=''){insert the stuff} //this is giving me results but undefined

So, I think I am right is saying that they have some kind of value that isn’t null. Yet, when I SELECT * FROM USERS I get ID: 1 name: undefined imagepath: undefined. I don’t think this is a problem with scope because I have gone through it and it should be ok. Could it have to do with my html inputs. At the moment my html inputs for both look like this:

    <input id="placeImage" type="image" onclick="getPhoto();" style="width:60px;height:60px" /> 
<p></p>

<input id="userName" type="text" placeholder="FirstName" onchange="getName();"> name<br>

<input id="saveProfile" type="button" value="Save" onClick="insertRecord(dbtx);"> <br>

As you can see, the image input merely calls the camera to get the picture and passes the resulting path to the success function which I am assigning to the global variable imagePath (which is used in the insertRecord)

    function getPhoto() {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
    quality: 50, 
    destinationType: navigator.camera.DestinationType.FILE_URI,
    sourceType: pictureSource
});
}

function onPhotoURISuccess(imageURI){
console.log('calling success function');
    placeImage = document.getElementById('placeImage');
  if(placeImage==''){
        alert('Please take a photo');
}else{
        placeImage.src = imageURI;
    alert(placeImage.src);
    placeImage.style.display = 'block';
    imagePath=placeImage.src;
}
  console.log(imageURI);
    }

    function onFail(message) {
       alert('Failed because: ' + message);
    }

Similarly, with my the name input I am now using onchange=”getName();” to call this code

    function getName(){
    userName= document.getElementById('userName').value;
        if(userName==''){
        alert('Please enter a name');
    }
}

I can’t see any reason why the userName and imagePath are still undefined when they go into the db. Am I not giving them values correctly? I know I am calling the getPhoto(); for the pic, but that in turn calls the onPhotoURISuccess(); (Could this be a problem?) Am I using onchange correctly. Should I have a similar test on the image input? Any help or direction appreciated.

Answer 1

i didn’t see name attr in your input.. if in case you are posting it..

 <input id="placeImage" name="imagePath" type="image" onclick="getPhoto();" style="width:60px;height:60px" /> 
<p></p>

<input id="userName" type="text" name="userName" placeholder="FirstName" onchange="getName();"> name<br>

<input id="saveProfile" type="button" value="Save" onClick="insertRecord(dbtx);"> <br>