lundi 26 octobre 2015

jquery if button clicked do this else do something else

hi i'm having trouble getting this to work.

I use cropbox to upload a users logo. when they edit their details if they dont click crop again the image is not saved and overwrites the existing file with a corrupted version. I want to be able to know if the user clicked crop again or not, if they did the new image will be saved if not the existing image (dragged from the database is saved on the form submission)

i have this code to crop the image

<script type="text/javascript">
$(window).load(function() {
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'exhibitorlist/%%GLOBAL_logo%%'
    }
    var cropper = $('.imageBox').cropbox(options);
    $('#file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);

        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $('#btnCrop').on('click', function(){
        var img = cropper.getDataURL();
        $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
        $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">');
    })
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});

This bit

$('#btnCrop').on('click', function(){
    var img = cropper.getDataURL();
    $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
    $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">');
})

crops the image when the user clicks the croped button (#btnCrop)

if the user does not click the cropped button i want this code

 $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');

to be ammended to

 $('.cropped').append('<input name="img" type="hidden" value="another url">');

i have tried this but can not get it to work

    var isClicked = false;
$('#btnCrop').click(function () {
isClicked = true;
});

if (isClicked) {

        $('.cropped').append('<input name="img" type="hidden" value="'+img+'">');
        $('.croppedsucess').append('<img src="%%GLOBAL_IMG_PATH%%/sucesscrop.png">'); 
}     else {
$('.cropped').append('<input name="img" type="hidden" value="%%GLOBAL_logo%%">');
}

i'm not very good with jquery. any help is very much appreciated.

Aucun commentaire:

Enregistrer un commentaire