Передача данных формы jQuery в переменную js

Question

В настоящее время у меня есть этот код, чтобы предотвратить обычную отправку формы и вместо этого получить желаемый результат из API. Тем не менее, я пытаюсь установить эти данные как переменную, поэтому щелчок на кнопке может перенаправлять туда (выходные данные - это URL-адрес). У меня есть следующий код, но он не работает. Есть предположения?

var tourl; 
$("form#surlform").submit(function(){ 
     var url = $("input#url").val(); 
     $.get("api/create.php?url=" + url, function(data) { 
       $("input#url").val(data); 
       $("input#url").select(); 
       $('#button').hide(); 
       $('#hbutton').show(); 
       var tourl = data; 
      }); 

     return false; 
    }); 
    }); 
$('#hbutton').bind('click', function() { 
     window.location = tourl; 
    }); 

Answer 1

Вы должны переместить bind вызова внутри обработчика событий успеха:

$.get("api/create.php?url=" + url, function(data) { 
    $("input#url").val(data); 
    $("input#url").select(); 
    $('#button').hide(); 
    $('#hbutton').show(); 
    var tourl = data; 
    $('#hbutton').bind('click', function() { 
     window.location = tourl; 
    }); 
}); 

Во-первых, tourl в области видимости обработчика событий успеха. Он не будет доступен вне этой функции.

Во-вторых, поскольку вы делаете запрос AJAX, tourl будет undefined, пока этот запрос не ответит. Единственный способ убедиться, что tourl присвоено его значение, - это подождать, пока обратный вызов не сделает все, что от него зависит.

Как отмечено в комментариях, это свяжет несколько обработчиков событий с вашей кнопкой, если запрос AJAX выполняется несколько раз. Чтобы обойти это, вы можете отвязать обработчик событий до привязки нового.

Answer 2

Вы определяете новую переменную в закрытом пространстве. Изменение

var tourl = data; 

в

tourl = data; 

Затем он будет назначен к глобальной переменной.