0

UPDATED

CONTEXT: I have a form that is editing event data: event photo, title, description, etc. When the user opens the edit form, all of the data is in the form fields. The user can choose to edit the data and update, or not to.

PROBLEM: If the user does not change the photo and presses 'submit', the photo disappears.

DESIRED RESULT: I want the photo to be updated if the user chooses to change the photo, and I want the existing photo to remain if the user doesn't change the photo.

** UPDATE** I previously thought this was a PHP isset() / empty() check but it's not. It's a javascript problem, which I'm not experienced with. I believe the submit button and submit id is causing the javascript to fire regardless of the php.

CODE of HTML image input form.

     <div class="row">
            <div class="col-md-12">
                <div id="event_picture" style="width:350px"></div>
            </div>
            <div class="col-md-12" style="padding-top:30px;">
                <strong>Select Image:</strong>
                <br/>
                <img width='100' src="images/<?php echo $e['event_picture'];?>" alt="">
                <input type="file" id="upload" class="form">
                <br/>
                <input type="hidden" name="event_picture" id="event_picture_base64">
            </div>
        </div>

SUBMIT BUTTON

 <input type="submit" name="submit" class="upload-result" value="Update Event" class="btn btn-primary btn-lg">

JAVASCRIPT

 <script type="text/javascript">
$uploadCrop = $('#event_picture').croppie({
    enableExif: true,
    viewport: {
        width: 300,
        height: 300,
        type: 'square'
    },
    boundary: {
        width: 350,
        height: 350
    }
});


$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });

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


$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

        document.getElementById("event_picture_base64").value = resp;
    });
});


</script>

I think the problem is I need a conditional to prevent the javascript from firing when I press submit button. I'm searching online now, but I really don't know how to write that conditional.

Any help is appreciated.

David Woodworth
  • 21
  • 5
  • 1
    _"If the user does not change the photo and presses 'submit'"_ where is the submit button? – Phil Oct 09 '19 at 02:00
  • I imagine you can fix this by changing `isset($_POST['event_picture'])` which will always be `true`, to `!empty($_POST['event_picture'])` – Phil Oct 09 '19 at 02:11
  • The submit button is not included in this form, but it's at the bottom of the form and looks like this: – David Woodworth Oct 09 '19 at 02:55
  • i tried to switch to !empty but it doesn't work either. – David Woodworth Oct 09 '19 at 02:56
  • Please update the code in your question and explain what the problem is. What debugging have you done? If code is entering an `if` block, find out why. If variables don't have the values you expect, find out what values they do have. – Phil Oct 09 '19 at 03:11
  • I just updated the code is updated. The problem is now framed differently. – David Woodworth Oct 10 '19 at 07:29

0 Answers0