I need to update the x and y values to crop an image via Ajax and PHP.

This code opens a dialog window with an image on click a button. Works fine but Firebug shows NaN post variables. How can I get the correct values? I have tried parseFloat() and parseInt() to return a number variable.

jQuery(function($) {

    jQuery('#jc-hidden-image').Jcrop({
        onChange: showCoords,
        onSelect: showCoords
    });

});

function showCoords(c) {
    jQuery('#x1').val(c.x);
    jQuery('#y1').val(c.y);
    jQuery('#x2').val(c.x2);
    jQuery('#y2').val(c.y2);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
};
jQuery(function($) {

    $('#jc-dyn-btn').click(function() {
        var jcrop_api;
        var id = $(this).attr('data-id');
        var rel = $(this).attr('data-rel');
        var value = $(this).attr('data-value');
        var mainImage = rel + '/' + id;
        var x, y, w, h;
        x = Math.round($('#x1').val());
        y = Math.round($('#y1').val());
        w = Math.round($('#w').val());
        h = Math.round($('#h').val());
        $("
    img.jc - hidden - image ").attr("
    src ", mainImage);
        var $dialog = $(" < div > < div id = \"jc-dialog\ class=\"jc-dialog\"><img class=\"jc-hidden-image\" src=\"" + mainImage + "\" /><form id=\"coords\" class=\"coords\"><label>X1<input type=\"text\" size=\"4\" id=\"x1\" name=\"x1\" /></label><label>Y1 <input type=\"text\" size=\"4\" id=\"y1\" name=\"y1\" /></label><label>X2 <input type=\"text\" size=\"4\" id=\"x2\" name=\"x2\" /></label><label>Y2 <input type=\"text\" size=\"4\" id=\"y2\" name=\"y2\" /></label><label>W <input type=\"text\" size=\"4\" id=\"w\" name=\"w\" /></label><label>H <input type=\"text\" size=\"4\" id=\"h\" name=\"h\" /></label></form></div>");

        $dialog.find('img').Jcrop({
            onChange: showCoords,
            onSelect: showCoords
        }, function() {
            jcrop_api = this;
            jcrop_api.animateTo([259, 81, 469, 304]);
            $dialog.dialog({
                modal: true,
                title: 'Jcrop in jQuery-ui Dialog (Dynamic)',
                close: function() {
                    $dialog.remove();
                },
                width: jcrop_api.getBounds()[0] + 34,
                resizable: false,
                buttons: {
                    "SAVE": function() {
                        $.ajax({

                            url: "crop.php",
                            type: "POST",
                            data: "x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&src=" + mainImage,

                            success: function() {
                                //  $dialog.dialog('close');
                            }
                        });
                    },
                    "CLOSE": function() {
                        $dialog.dialog('close');
                    }
                }
            }) //dialog
        }); //function
        return false;
    }); //clik
}); //jquery​

I need to update the x and y values to crop an image via Ajax and PHP.

This code opens a dialog window with an image on click a button. Works fine but Firebug shows NaN post variables. How can I get the correct values? I have tried parseFloat() and parseInt() to return a number variable.

jQuery(function($) {

    jQuery('#jc-hidden-image').Jcrop({
        onChange: showCoords,
        onSelect: showCoords
    });

});

function showCoords(c) {
    jQuery('#x1').val(c.x);
    jQuery('#y1').val(c.y);
    jQuery('#x2').val(c.x2);
    jQuery('#y2').val(c.y2);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
};
jQuery(function($) {

    $('#jc-dyn-btn').click(function() {
        var jcrop_api;
        var id = $(this).attr('data-id');
        var rel = $(this).attr('data-rel');
        var value = $(this).attr('data-value');
        var mainImage = rel + '/' + id;
        var x, y, w, h;
        x = Math.round($('#x1').val());
        y = Math.round($('#y1').val());
        w = Math.round($('#w').val());
        h = Math.round($('#h').val());
        $("
    img.jc - hidden - image ").attr("
    src ", mainImage);
        var $dialog = $(" < div > < div id = \"jc-dialog\ class=\"jc-dialog\"><img class=\"jc-hidden-image\" src=\"" + mainImage + "\" /><form id=\"coords\" class=\"coords\"><label>X1<input type=\"text\" size=\"4\" id=\"x1\" name=\"x1\" /></label><label>Y1 <input type=\"text\" size=\"4\" id=\"y1\" name=\"y1\" /></label><label>X2 <input type=\"text\" size=\"4\" id=\"x2\" name=\"x2\" /></label><label>Y2 <input type=\"text\" size=\"4\" id=\"y2\" name=\"y2\" /></label><label>W <input type=\"text\" size=\"4\" id=\"w\" name=\"w\" /></label><label>H <input type=\"text\" size=\"4\" id=\"h\" name=\"h\" /></label></form></div>");

        $dialog.find('img').Jcrop({
            onChange: showCoords,
            onSelect: showCoords
        }, function() {
            jcrop_api = this;
            jcrop_api.animateTo([259, 81, 469, 304]);
            $dialog.dialog({
                modal: true,
                title: 'Jcrop in jQuery-ui Dialog (Dynamic)',
                close: function() {
                    $dialog.remove();
                },
                width: jcrop_api.getBounds()[0] + 34,
                resizable: false,
                buttons: {
                    "SAVE": function() {
                        $.ajax({

                            url: "crop.php",
                            type: "POST",
                            data: "x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&src=" + mainImage,

                            success: function() {
                                //  $dialog.dialog('close');
                            }
                        });
                    },
                    "CLOSE": function() {
                        $dialog.dialog('close');
                    }
                }
            }) //dialog
        }); //function
        return false;
    }); //clik
}); //jquery​

• javascript
• jquery

• 1 Not much to go on here. If Math.round retunrs NaN, what was the input? – Werner Kvalem Vesterås Commented Oct 14, 2012 at 16:25
• You have several too many whitespaces in your string literals. Also, you wouldn't need to escape every " if you'd use apostrophes (') as string delimiters. – Bergi Commented Oct 14, 2012 at 17:15
• Ok, I will make a revision again. Thanks – user1723670 Commented Oct 14, 2012 at 17:33

2 Answers 2

Try this, use parseFloat like

Math.round(parseFloat($('#x1').val()));

Update:

Also make sure you are using right ids for the inputs, whether it should be $('#x1') or $('#x'). Here is an example.

You first need to use parseFloat. Change the statements to:

x = Math.round( parseFloat($('#x1').val()) );
y = Math.round( parseFloat($('#y1').val()) );
w = Math.round( parseFloat($('#w').val()) );
h = Math.round( parseFloat($('#h').val()) );