CODEWITHSUNDEEP
javascripthtmlformssubmitfilereader
Nurbolat Abdraim
Nurbolat Abdraim

Reputation: 35

Submit button in form not working after choosing file with input written in javascript

I have html form for creating new product with image, so after choosing product image my html form submit button will become disabled. I've wrote file input action in javascript.

Here my html form code (piece of code):

<form>
<div class="form-group alert-up-pd">
  <div class="small-12 large-4 columns">
    <label for="">Добавить изображение</label>
    <div class="containers">
      <div class="imageWrapper">
        <img class="image" src=""></div>
      </div>
      <span class="file-upload">
        <input type="file" name="img" class="file-input">
        Выбрать
      </span>
    </div>
  </div>
</div>
</form>

And here is javascript code:

$('.file-input').change(function(e){
  var curElement = $('.image');
  var reader = new FileReader();

  reader.onload = function (e) {
    curElement.attr('src', e.target.result);
  };

  reader.readAsDataURL(this.files[0]);
});

If you need more info pls ask...

Upvotes: 1

Views: 270

Answers (1)

El Devoper
El Devoper

Reputation: 1093

Your Code seems to work. Try to run that snippet:

$(function(){
    $('.file-input').change(function(e){
    var curElement = $('.image');
    var reader = new FileReader();

    reader.onload = function (e) {
      curElement.attr('src', e.target.result);
    };

    reader.readAsDataURL(this.files[0]);
  });
});
.image
{
  width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-group alert-up-pd">
    <div class="small-12 large-4 columns">
      <label for="">Добавить изображение</label>
      <div class="containers">
        <div class="imageWrapper">
          <img class="image" src="" />
        </div>
        <span class="file-upload">
          <input type="file" name="img" class="file-input" />
          Выбрать
        </span>
      </div>
    </div>
  </div>
</form>

Can you provide an example where the submit button becomes disabled?

Upvotes: 2

Related Questions