Why i can not get value from input using javascript?

Question

When i press on click here It's wil be alert blank and blank value.

I want to know why not alert 400 and 400

test1.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="first_image_data_url_fid" style="display: block;">
    <input type="text" name="first_image_data_url" id="first_image_data_url"/>

    <input type="text" name="first_image_data_dimension_width" id="first_image_data_dimension_width"/>
    <input type="text" name="first_image_data_dimension_height" id="first_image_data_dimension_height"/>
</form>
<span id="mySpan_check_image_data_width_height"></span>

<div onclick="test_fn()">click here</div>

<script language="JavaScript" type="text/javascript">
function test_fn()
{
var first_image_data_url = "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg";
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
$.ajax
(
    {
        url: 'test2.php',
        type: 'POST',
        data: $('#first_image_data_url_fid').serialize(),
        cache: false,
        success: function (data) {
            $('#mySpan_check_image_data_width_height').html(data);
            //get_first_image_data_width_height();
        }
    }
)

var item = get_first_image_data_width_height();
}
</script>


<script>
function get_first_image_data_width_height(){
    var item;
    var first_image_data_dimension_width_val = document.getElementById("first_image_data_dimension_width").value;
    alert(first_image_data_dimension_width_val);

    var first_image_data_dimension_height_val = document.getElementById("first_image_data_dimension_height").value;
    alert(first_image_data_dimension_height_val);

var item = "0";

    return item;
}
</script>

test2.php

<?PHP
session_start();
include("connect.php");
$first_image_data_url = mysqli_real_escape_string($db_mysqli,$_POST['first_image_data_url']);

$first_image_data_dimension = getimagesize($first_image_data_url);
$first_image_data_dimension_width = $first_image_data_dimension[0];
$first_image_data_dimension_height = $first_image_data_dimension[1];
?>

<script>
document.getElementById("first_image_data_dimension_width").value = "<?PHP echo $first_image_data_dimension_width; ?>";
document.getElementById("first_image_data_dimension_height").value = "<?PHP echo $first_image_data_dimension_height; ?>";
</script>

Try and reduce the scope of the problem. For example, do the php `echo`s print the correct value? You should debug this by yourself and try to narrow the problem down *before* asking. — Federico klez Culloca, Nov 23 '17 at 13:58
`(first_image_data_dimension_width_val > '200')` — You forgot to convert that variable to a number, and for some reason you’re comparing a numeric value to a string. — Sebastian Simon, Nov 23 '17 at 13:58
If something is a number, there's no reason to put them inside quotes, like `var item = "0";`. Just do `var item = 0;`. That will make it easier to differentiate between numbers and strings while coding. — M. Eriksson, Nov 23 '17 at 14:13

score 0 · Answer 1 · answered Nov 23 '17 at 23:30

If I understood your question correctly, you want to know why alerts gives you an empty string even if you see 400 and 400 in your inputs. It is because JS is asynchronous language and your timeline looks like this:

function test_fn()
{
var first_image_data_url = "...";
// (1) setting an empty values
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
// (2) starting AJAX call
$.ajax
(
    {
        url: 'test2.php',
        type: 'POST',
        data: $('#first_image_data_url_fid').serialize(),
        cache: false,
        success: function (data) {
            // (4) END of AJAX call

            $('#mySpan_check_image_data_width_height').html(data);
            //get_first_image_data_width_height();
            // you should get your 400 and 400 here
            //var item = get_first_image_data_width_height();

        }
    }
)
// (3) showing the result
var item = get_first_image_data_width_height();
}

If you look carefully, you will see that you try to alert values before they come.

BTW, you don't need to do mysqli_real_escape_string before get_image_size.

If you don't do any calculations on the image nor downloading it, you can obtain it dimensions by pure JS. See this answer

Why i can not get value from input using javascript?

1 Answers1