Javascript Passing form Variable

Question

Very new to Javascript, frustrated that I cannot seem to figure this question out as I know the answer is going to be something very basic!!!

I am trying to customize JCrop which is a image cropping tool.

I want to ask users for the size of a canvas before running Jcrop so that the cropping tool runs at a fixed ratio aspect depending on their form selection

The correct format of the image ratio needs to be 1/1, 1/2, 1/3 and has been set by my form.

            <select name="size" id="size">
                <option value="">Please select the size of your canvass</option>
                <option value="1/1">1x1</option>
                <option value="1/2">1x2</option>
                <option value="1/3">1x3</option>
                <option value="1/4">1x4</option>
                <option value="1/5">1x5</option>
                <option value="1/6">1x6</option>
            </select>


    <script language="Javascript">


    $('input[name=size]').click(function() {
    MethodTwo();
    });
function MethodTwo()
{
            var SIZEVARIABLE = $('#size').val();        
}
    // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio : SIZEVARIABLE, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    </script>

Thanks very much!

GregL · Accepted Answer · 2014-04-09 02:23:22Z

2

As Evan Trimboli said, part of the problem is that you are passing strings instead of numbers for the aspectRatio.

The other part is that you are setting the SIZEVARIABLE property only when the user clicks the dropdown, so before that it is undefined. Also, using the change event is better for selects that click.

What you need to do when the dropdown is changed is actually call a different method to update the aspectRatio option of JCrop.

    <select name="size" id="size">
        <option value="">Please select the size of your canvass</option>
        <option value="1/1">1x1</option>
        <option value="1/2">1x2</option>
        <option value="1/3">1x3</option>
        <option value="1/4">1x4</option>
        <option value="1/5">1x5</option>
        <option value="1/6">1x6</option>
    </select>

<script language="Javascript">
$('select[name=size]').change(function () {
    MethodTwo($(this).val());
});

function MethodTwo(aspectRatioStr) {
    var parts = aspectRatioStr.split('/'),
        num = parseInt(parts[0]),
        denom = parseInt(parts[1]),
        newAspectRatio = num / denom;
    if (!jcrop_api) return;
    jcrop_api.setOptions({
        aspectRatio: newAspectRatio
    });
    jcrop_api.focus();
}

// initialize Jcrop
$('#preview').Jcrop({
    minSize: [32, 32], // min crop size
    aspectRatio: 1, // start off with aspect ratio 1:1
    bgFade: true, // use fade effect
    bgOpacity: .3, // fade opacity
    onChange: updateInfo,
    onSelect: updateInfo,
    onRelease: clearInfo
}, function () {

    // use the Jcrop API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];

    // Store the Jcrop API in the jcrop_api variable
    jcrop_api = this;

    MethodTwo($('#name').val());
});
</script>

edited Apr 9, 2014 at 2:23

answered Apr 9, 2014 at 0:31

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

4 Comments

GregL Over a year ago

One final comment: names of variables and functions are super important in programming. MethodTwo is a very poor name for a function as it tells you nothing about what it does. Instead, try calling it changeAspectRatio() or similar. The lowercase first letter is also normal JS convention for all functions that aren't intended to be used as constructors.

Ryan NZ Over a year ago

Hi Greg, really appreciate the time you took to explain this to me. It still seems to be running at a 1/1 ratio regardless of the dropdown that is selected. You can see an example of this script here ryanblundell.com/test/html5imageuploaderwithjcrop

GregL Over a year ago

Okay, a few changes to be made: change $('input[name=size]') to $('select[name=size]') (my bad). Also, remove the second declaration of jcrop_api. Finally, at the bottom of the function passed to the .Jcrop() method, add a new line MethodTwo($('#name').val()) to set the selected value as soon as the plugin is loaded (since the user can change the value before selecting an image). I made these changes to my answer.

Ryan NZ Over a year ago

Wow absolute genius! Thank you very much again (by the way, I made it to the end of your last blog post, its a subject I find very interesting!!). All the best!

Evan Trimboli · Accepted Answer · 2014-04-09 00:17:31Z

0

You're passing the aspectRatio as a string. It needs a calculated number.

So the value in your select box should be:

<option value="1">1x1</option>
<option value="0.5">1x2</option>
<option value="0.33">1x3</option>
<option value="0.25">1x4</option>

You should also change the code that gets the number to use:

var SIZEVARIABLE = parseFloat($('#size').val());

answered Apr 9, 2014 at 0:17

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

Collectives™ on Stack Overflow

Javascript Passing form Variable

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related