ashleywnj's avatar

Assign a value .val(field) and save without touching the field

I have a simple form in which the value of one field needs to be populated with a generated ID returned following a file upload. I am using the uploadcare widget

All the values will save to the DB correctly providing I click or tab into the field following assigning the value.

The field and widget:

<div class="col-md-4">
        <label class="control-label">File Name</label>
        <input id="filename" value=""  type="text" class="form-control" name="filename" v-model="form.filename">
          <input
             class="form-control"
                id="uploadcare"
                type="hidden"
                data-multiple=""
                role="uploadcare-uploader"
                >
</div>

The jquery to assign the value.

$(function() {
    var widget = uploadcare.MultipleWidget('#uploadcare');
    widget.onChange(function(group) {
        var $files = $('#filename').html("");
            if (group) {
                $.each(group.files(), function() {
                    this.done(function(fileInfo) {
                        $("#filename").val(fileInfo.uuid);
                    });
                });
            }
        });
});

The vue that pushes the form values back to the php to save to the database.

        create() {
              Spark.post('http://art-t.dev/adrtest', this.form )
               .then(adr_review => {                  
                   this.newADR.push(this.form) ;
                    this.message = 'New ADR Request added;' 
                   this.getTasks();
                   this.form = '';
             });
     },

On completion of the upload the field in question populates - if I then save using the @click.prevent="create" it will save the other 11 fields OR if I tab in / out then all 12 fields will save

<button type="submit" class="btn btn-primary" id="upload"
      @click.prevent="create"
       :disabled="form.busy">
      Enter Record
</button>

Woud also love to replace the jquery with vue. Any thoughts on how to assign the value without any user events required on that particular field?

Thanks so much in advance for considering.

0 likes
1 reply
ashleywnj's avatar
ashleywnj
OP
Best Answer
Level 2

Aghh ... so simple - at least the jquery version. Just add .change() to the function when assigning the value

$("#filename").val(fileInfo.uuid).change();

Will try and refine using just Vue

Please or to participate in this conversation.