title: Global variable keeps being reset to null after ajax call
body: <p>what i have is an interesting set of code, whats happening here is that during this signup form once the user gets to this point, it will serialize the data into an array and then use an ajax call to post the information to the database, I have a setup with a payment API that i have to call through an iframe to use correctly, (this is the second set of code below the first). these JQuery statements are defined apart from each other, but within the same <code>&lt;script&gt;</code> tag inside the code. The thing is i <em>need</em> the <code>uriEncodedLink</code> variable from this function to be defined in the global scope so it can be accessed later to be useable from the iframe i call for the payment page.</p>
  <p>the problem is, no matter what I do, no matter how i define it in the global scope it seemingly <strong>always</strong> gets reset after the ajax call posts information to the database. i tried using a <code>var = uriEncodedLink</code> and then setting the string to be called equal to that variable which <strong>is</strong> defined in the global scope, ive used <code>window.uriEncodedLink = &quot;uri to be called&quot;</code> and tried calling it from the window object. however, to no avail, ive console.logged the data all the way up to the ajax call and it seemingly works appropriately, as you can see from my placed console log of the variable right before the ajax call, in the console. the variable <strong>has</strong> the correct information which is what i want. however when i call on that variable later, (where the iframe to the payment system is) it becomes <code>null</code>, its as if the ajax call is erasing <em>all</em> data and not just the form data. which is not what i want.</p>
  <p>is there anyway to get this variable to work appropriately?</p>
  <p>**Note: ** it should be noted that i am unable to move the iframe to the same location as the ajax call, doing so results in weird behavior with the form itself. And yes, i have to use an iframe as i have to pass a certain amount of the form data through the iframe to the payment system.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>             $(document).bind('next.wizard', function () {
                  if (wizard.current == wizard.total) {
                      if ($('form').valid() &amp;&amp; $('.username-addon').hasClass('available')) {
                          //submit form
                          $(document).trigger('modalloading');
                          var formdata = {};
                          $($('form').serializeArray()).each(function (i, a) {
                              formdata[a.name] = a.value;
                          });
                          let str = formdata.inputAdminContactName;
                          const name = str.split(" ", 2);
                          uriEncodedLink = "Link to be encoded"
                          window.uriEncodedLink = uriEncodedLink
                          console.log(window.uriEncodedLink)          
                          $.ajax('submit.ashx?cp='+wizard.current+'&amp;key=&lt;%=xssToken %&gt;', {
                              dataType: 'json', type: 'POST'
                              , data: formdata
                              , success: function(d) {
                                  $('form').submit();
                              }
                              , error: function (xhr) {
                                  window.location.reload(true);
                              }
                          });
                      
                      } else {
                          $(window).trigger('modal.alert', ['The form has not been filled out correctly, please correct the fields on this page.']);
                      }
                  } else {
                      wizard.next(1);
                      var formdata = {};
                      $($('form').serializeArray()).each(function (i, a) {
                          formdata[a.name] = a.value;
                      });
                      $.ajax('submit.ashx?cp='+wizard.current+'&amp;key=&lt;%=xssToken %&gt;', {
                          dataType: 'json', type: 'POST'
                          , data: formdata
                          , error: function (xhr) {
                              window.location.reload(true);
                          }
                      });
                  }
              });</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).bind('finished.wizard', function () {
                 
                 $('.progress-bar').css({ width: '100%' });
                 
                     $('.innerform').html('&lt;div class="finished"&gt;&lt;div class="row clearfix"&gt;'+
                         '&lt;div class="col-md-12 column"&gt;&lt;div class="panel panel-default"&gt;'+
                         '&lt;div class="panel-heading"&gt;&lt;h2 class="panel-title"&gt;&lt;span class="step-title"&gt;Almost Finished!&lt;/h2&gt;&lt;/div&gt;'+
                         '&lt;div style="width: 100%; height: 1100px;"&gt;'+
                         '&lt;iframe id="cps-embed" src="'+window.uriEncodedLink+'"' +
                         'style="margin:0; width:100%; border:none;" scrolling="no" width="100%" height="1100px"&gt;&lt;/iframe&gt;'+
                         '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
                         ).css({opacity:'0',visibility:'visible'}).animate({opacity:'1'});
                  });</code></pre>
  </div>
  </div>
  </p>