get value of element of html in another js file

Question

in my index page i sent a request ajax and response is a number.and i set the response to the value of input with hidden type

<input type="hidden" id="Status">
<script src="js/indexPhone.js"></script>
<script>
$(document).ready(function() {
    $("#SendPhone").click(function(e) {
        var phoneField = $("#PhoneField").val();
        var phoneFieldString = "989" + phoneField.substring(0);
        $.ajax({
            type:'post',
            url:'getSMS.php',
            data:{'phoneFieldString':phoneFieldString},
            success:(function (response) {
                $("#Status").val(response);
            })
        })
    });
});
</script>

and my problem is i want to get this value in another javascript page that i included in my index but it alerts empty. this my indexPhone.js:

$("#SendPhone").click(function() {
    alert($("#Status").val());
});

Answer 1

Ajax request is asynchronous, so the second click runs before value is set.

Use events:

// index.html
$("#SendPhone").click(function (e) {
    // ...
    $.ajax({
        // ...
        success: (function (response) {
            $("#Status").val(response);
            $("#Status").trigger("gotSMS");
        })
    });
});

// indexPhone.js
$("#Status").on("gotSMS", function () {
    alert($(this).val());
});