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

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 🙂