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

Question

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...

form submit works when I don't choose file

Nurbolat Abdraim
– Nurbolat Abdraim

2020-12-21 16:03:59 +00:00
Commented Dec 21, 2020 at 16:03 — Nurbolat Abdraim
– Nurbolat Abdraim, Commented Dec 21, 2020 at 16:03

El Devoper · Accepted Answer · 2020-12-21 16:27:17Z

2

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?

answered Dec 21, 2020 at 16:27

El Devoper

1,0938 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nurbolat Abdraim Over a year ago

Thank you for reply. I've found my mistake, it was because of HTML Editor library (for textarea), so I shouldn't have put required attribute to textarea. I'm ashamed infront of you, sorry...

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related