CodeIgniter - Image submit button not working

Question

I am using CI to create a project for a client, I have a submit button as an image but it doesn't seem to be submitting the form, the code I have at the moment is.

<input type="image" name="trialSubmit" id="trialSubmit" src="<?php echo base_url().'images/subscribe_free.jpg'; ?>" style="height:29px;width:207px;border-width:0px;" />

The code I have to use at the moment is as follows

<input type="submit" name="trialSubmit" value=" Subscribe Free " id="" class="button" />

If anyone could shed some light on why it's not working with the image, that would be tight.

Cheers,

Answer 1

**inside the view(as comerciales in my case)**, 



    <form action= "<?php echo site_url()?>/admin/doupload"  method="post" enctype="multipart/form-data" >
  <b>  Select the image to upload( Maximum size 500 kb, jpg, jpeg): </b>
    <input   style="color:#00A76F" type="file" name="fileToUpload" id="fileToUpload">
   <div  class="input-group" style="left:10%;width:85%;">

 <input class="btn btn-success pull-right" style="background:#00A76F" type="submit" value="Upload Image" name="submit">



</div>


</form>
   <div class="modal-body">
                    <div id="user_data">
                      <?php
                      if (!empty($massage)){
                          echo $massage ;

                      }
                        ?>
                    </div>

**inside the controller define a method**

    public function doupload(){
       $root1 = $_SERVER['DOCUMENT_ROOT'];;

        $target_dir =  $root1."/nawaloka/uploads/";

             // $target_dir =  $root1."/nawaloka/application/";
          $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if file already exists
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
   $data['massage']= "Sorry, your file is too large.";
            $partials = array('content' => 'Admin/comerciales');
            $this->template->load('template/admin_template', $partials,$data);

    $uploadOk = 0;
}
if (is_dir($target_dir) && is_writable($target_dir)) {

    // do upload logic here
} else {
    echo 'Upload directory is not writable, or does not exist.';
}



// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "jpeg" ) {
     $data['massage']= "Sorry, only JPG, JPEG files are allowed.";
            $partials = array('content' => 'Admin/comerciales');
            $this->template->load('template/admin_template', $partials,$data);

    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
   $data['massage']= "Sorry, your file was not uploaded.";
            $partials = array('content' => 'Admin/comerciales');
            $this->template->load('template/admin_template', $partials,$data);

// if everything is ok, try to upload file
} else {
            array_map('unlink', glob("/var/www/html/nawaloka/uploads/*"));

    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],"/var/www/html/nawaloka/uploads/shamith.jpg")) {
           $data['massage']= "The image ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
            $partials = array('content' => 'Admin/comerciales');
            $this->template->load('template/admin_template', $partials,$data);


        //echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {

             $data['massage']= "Sorry, there was an error while uploading your file.";
            $partials = array('content' => 'Admin/comerciales');
            $this->template->load('template/admin_template', $partials,$data);
    }
}




}

Answer 2

Try adding value="trialSubmit" to get the image to submit. Seemed to work for me.

You could also see if this answer helps: image submit button

Answer 3

Is it across all browsers? Or IE specific? What about if you add an onclick event just for testing? onclick="javascript:document.formidhere.submit()"

I'd recommend using either <input type="submit" /> or my preference would be to use <button type="submit> due to browser inconsistencies with <input type="image" /> and just style the button with something like:

button{
    background:url('/images/subscribe_free.jpg') no-repeat;
    height:29px;
    width:207px;
    border:0;
}