It is not inserting data into database

Question

I want to insert data into Image_Question Table. but it does not perform an insert in the Image_Question Table.

I am getting two errors:

• Notice: Undefined offset: 0 in ... on line 305
• Notice: Undefined offset: 3 in ... on line 305

Here is the application you can use: Application

To use app to see what is happening do the following:

1. Click Add Question button twice to append two file inputs

2. Now upload a file one at a time but do it like this. Upload a file in file input in row 1, then upload a file in row 2, then upload file in row 1 again then finally upload file in row 2.

Below is mysqli code:

// Prepare your statements ahead of time
$questionsql = "INSERT INTO Question (QuestionNo) VALUES (?)";
if (!$insert = $mysqli->prepare($questionsql)) {
  // Handle errors with prepare operation here
  echo __LINE__.': '.$mysqli->error;
}

$imagequestionsql = "INSERT INTO Image_Question (ImageId, QuestionId)  
VALUES (?, ?)"; 

if (!$insertimagequestion = $mysqli->prepare($imagequestionsql)) { 
  // Handle errors with prepare operation here 
 echo __LINE__.': '.$mysqli->error; 
}

//make sure both prepared statements succeeded before proceeding
if( $insert && $insertimagequestion) {
  $c = count($_POST['numQuestion']);
  $question_ids = array();

  for($i = 0;  $i < $c; $i++ ) {
    $questionNo = $_POST['numQuestion'][$i];

    $insert->bind_param("i", $questionNo);

    $insert->execute();

    if ($insert->errno) {
        // Handle query error here
      echo __LINE__.': '.$insert->error;
      break 1;
    }

    $questionId = $mysqli->insert_id;

    $question_ids[$questionNo] = $questionId;
  }

  $imgresults = $_POST['imgid'];
  foreach($imgresults as $imgid => $imgvalue) { 
    $image = $imgvalue;
    $imgquesid = $question_ids[$imgid];  //LINE 305 where error is

    foreach($imgvalue as $image) {
      $insertimagequestion->bind_param("ii",$image, $imgquesid); 
      $insertimagequestion->execute();

      if ($insertimagequestion->errno) { 
        // Handle query error here
        echo __LINE__.': '.$insertimagequestion->error;
        break 2;
      }
    }
  }
  $insertimagequestion->close(); 
  $insert->close();
}

?>

Below is code which sets up the demo:

function GetFormImageCount(){ 
  return $('.imageuploadform').length + 1;
}

var qnum = 1;
var qremain = 5;

function insertQuestion(form) {   

  if (qnum > 5)
    return;

  var $tbody = $('#qandatbl_onthefly > tbody');
  var $tr = $("<tr class='optionAndAnswer' align='center'>");
  var $qid = $("<td width='5%' class='qid'></td>").text(qnum);
  var $image = $("<td width='17%' class='image'></td>"); 

  $('.num_questions').each( function() {

    var $this = $(this);

    var $questionNumber = $("<input type='hidden' class='num_questionsRow'>").attr('name',$this.attr('name')+"[]").attr('value',$this.val());

    $qid.append($questionNumber);                             

    ++qnum;    
    $(".questionNum").text(qnum);
    $(".num_questions").val(qnum);

    --qremain;
    $(".questionRemain").text(qremain);
  });

  var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
    "<p class='imagef1_upload_form'><label>" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" +
    "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +
    "</p><p class='imagemsg'></p><p class='listImage'></p>" +
    "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");   

  $image.append($fileImage);

  $tr.append($qid);
  $tr.append($image);  
  $tbody.append($tr);
}

function imageValidation(imageuploadform) {
  var val = $(imageuploadform).find(".fileImage").val();
  switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
    case 'gif':
    case 'jpg': 
    case 'jpeg':
    case 'pjpeg':
    case 'png':
      return true;

    case '':
      $(imageuploadform).find(".fileImage").val();
      alert("To upload an image, please select an Image File");
      return false;

    default:
      alert("To upload an image, please select an Image File");
      return false;
  }
  return false;
}

function htmlEncode(value) { return $('<div/>').text(value).html(); }

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').show()
  $(imageuploadform).find('.imagef1_upload_form').hide();
  $(imageuploadform).find('.imagemsg').hide();
  sourceImageForm = imageuploadform;

  return true;
}

var imagecounter = 0;

function stopImageUpload(success, imageID, imagefilename) {
  var result = '';
  imagecounter++;

  if (success == 1){
    result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
    $('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
    $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button><br/><hr/></div>');
  }

  $(sourceImageForm).find('.imagef1_upload_process').hide();
  $(sourceImageForm).find('.imagemsg').html(result);
  $(sourceImageForm).find('.imagemsg').show();
  $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
  $(sourceImageForm).find('.imagef1_upload_form').show();


  var _imagecounter = imagecounter;

  $('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) {
      $(".imagemsg" + _imagecounter).html(data);
    });

    var buttonid = $(this).attr('value');
    $(this).parent().remove();
    $("#"+ buttonid  +"").remove();
  });

  return true;   
}

function imageClickHandler(imageuploadform){ 
  if(imageValidation(imageuploadform)){ 
    window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
    return startImageUpload(imageuploadform); 
  }
  return false;
}
</script>
</head>
<body>
  <form id="QandA" action="insertQuestion.php" method="post">
    <table id="question">
      <tr>
        <th colspan="2">
          Question Number <span class="questionNum">1</span>
          <input type="hidden" class="num_questions" name="numQuestion" value="1">
        </th>
      </tr>
    </table>

    <table id="questionBtn" align="center">
      <tr>
        <th>
          <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
        </th>
      </tr>
    </table>

  </div><hr/><!-- This Divide close tag has no open tag!-->

  <table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr>
        <th width="5%" class="qid">Question Number</th>
        <th width="17%" class="image">Image</th>
      </tr>
    </thead>
  </table>
  <div id="qandatbl_onthefly_container">
    <table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
      <tbody>
      </tbody>
    </table>
  </div>
  <div class="hiddenimg"><!-- All uploaded image file ids go here --></div>
</form>
</body>

By doing the following var_dumps:

   var_dump($question_ids);
    var_dump($imgresults);

I get these results:

     array(2) { 
        [1]=> int(159)
        [2]=> int(160) 
        } 
array(2) { 
[0]=> string(3) "129"
[1]=> string(3) "130" 
}

What is strange is the numbers start 0 then 1 for imgresult and also I do not know why it is stating string, it should be an int. But then if it is coming from an input do I call the bind_param i or s as in db its an int?

EXTRA DETAILS:

What I don't get is below this mysqli, I produce a similar mysqli for answers and what is strange is that it does the insert correctly even though it starts with 0 like the image_question insert above:

$results = $_POST['value'];
foreach($results as $id => $value) 
{
    $answer = $value;

    $quesid = $question_ids[$id];   

    foreach($value as $answer) 
    {
        $insertanswer->bind_param("is", $quesid, $answer);

        $insertanswer->execute();

        if ($insertanswer->errno) {
            // Handle query error here
            echo __LINE__.': '.$insertanswer->error;
            break 5;
        }
    }
}

var_dump($result) shows with the previous var dumps for 1 question:

array(1) { //var_dump($question_ids);
[1]=> int(171) 
} array(1) { //var_dump($imgresults);
[0]=> string(3) "130" 
} array(1) { 
[1]=> array(1) { //var_dump($results);
[0]=> string(1) "B" } } 

Answer 1

My answer would be not on the particular question, but rather on somewhat wider topic.

It's about the way you're doing your job in general.
You need to change it.
Look, all your questions are way to big to be answered. And gets even bigger. Yet get less answers.
It makes you to do desperate things - cheat on questions, bounties, accounts - but all in vain. That's road to nowhere.

You need to change the way you're learning things and the way you're using this great site.
It is very important for anyone to know the tools they're using. You have to write the code yourself, asking for help only when you're in a real fix.
As a result, you will understand your code. That's essential - to understand what does your code do. Every line of it. So, you'll be able to sort things out and fix your code yourself.
Otherwise you're doomed to ask for help for the every typo, like in this case.

Moreover, as you can't dig to the root of the problem, you have to post tons of codes along with your question, making it complicated to answer.
There are three separate realms in your question - JavaScript, PHP and Mysql. And the problem belongs to only one of them. You have to learn to separate your problems at least to the limits of these realms.
Is it JS sending wrong (unexpected) data from client? Okay, put away all PHP and Mysql code, leaving JS only. It will help both Stackoverflowers and even yourself with investigating the problem.
Is this data okay? Are you sure? Print it out and make sure it's exactly what you expect.
If it's all right - move to PHP part (but do not forget to remove all JS from the question).
And so on.

Ask your question not in general terms like "it is not inserting" but in terms of particular data flow: "I am expecting such data entering the procedure, but I've got another."
As soon as you start with it, you will need no Stackoverflow to answer: you will be able to trace the problem up to the place where data gets unexpectedly wrong. So - you've found the erroneous spot.

It is also very important to run the problem code. And to run it in the very environment where you have got your problem.
Running the code and checking the actual results is way more efficient than just watching the code with your eyes.
There can be even some circumstances belongs to your server only and unknown to other people, making them unable to answer your question at all.
Also, humans aren't supposed to run PHP codes in their heads. It can work for a few lines, but from some point it's just impossible to run all the code mentally and find the error.
That's why it is so important to run your code and print out all the values, function results, check for variable states and such - and look for the inconsistency in them.

Surely, to use such a technique, you have to understand, which data is correct and which is not.
That's why it is so important to write your code from scratch, and plan it yourself.
If it was you who decided, what data should be coming from JS - you can tell if it's good or bad. If it was someone else - you're in a dead end and doomed to ask again, making things worse.
You need to break this vicious circle.
That's why it is such important matter - to write code yourself, not let someone else to do it for you.

Hope it helps and good luck in learning.

Answer 2

Using Firebug I went onto the HTML and after a lot of digging (and I mean a lot of digging), I know what your issue is. But let me first say that Your Common Sense is right, for you to understand the code you need to write it yourself.

Anyway the solution is you need to add a multi dimensional array and count through each row starting from 0. What you need is something like this:

 var imagecounter = 0;

      var result = '';
      imagecounter++;

....


     $('.hiddenimg').append('<input type="hidden" name="imgid[' + imagecounter + '][]" id="'+imageID+'" value="' + imageID + '" />');

Now you did something like this earlier with gQuestion++ and this proves my point that you need to start learning the code. If you have a couple of hours spare just read your code and try to understand what is happening. It could only benefit you :)