使用 Javascript 填写表单输入并传递数据

Question

这让我发狂，我一直在寻找解决方案，但没有运气......

我有一个使用 Aweber 注册表单的表单注册页面 - 它收集全名和电子邮件地址。

提交此表单并重定向到第二个页面（确认页面）并传递 URL 末尾的值：

?email=dummyemail%40gmail.com&from=dummyemail%40gmail.com&listname=awlist4009916&meta_adtracking=stillhead&meta_message=1&meta_required=name%2Cemail&meta_split_id=&meta_tooltip=&meta_web_form_id=1277063733&name=Example%20Name

现在，Aweber 提供了一段 Javascript 来放置在确认页面上，它似乎可以抓取表单数据并使其可在页面上使用。

<script type="text/javascript">
 var formData = function() {  var query_string = (location.search) ? ((location.search.indexOf('#') != -1) ? location.search.substring(1, location.search.indexOf('#')) : location.search.substring(1)) : '';  
var elements = [];  
if(query_string) {     
    var pairs = query_string.split("&");     
    for(i in pairs) {     
        if (typeof pairs[i] == 'string') {           
            var tmp = pairs[i].split("=");           
            var queryKey = unescape(tmp[0]);           
            queryKey = (queryKey.charAt(0) == 'c') ? queryKey.replace(/\s/g, "_") : queryKey;   
            elements[queryKey] = unescape(tmp[1]);      
             }    
       } 
 }  
return {     
    display: function(key) {         
        if(elements[key]) {           
             document.write(elements[key]);         
         } 
         else {         
               document.write("<!--If desired, replace everything between these quotes with a default in case there is no data in the query string.-->");          
          }     
  }   
} 
}
(); </script>

然后他们说，要调用电子邮件地址，请使用：

<script type="text/javascript">formData.display("email")</script>

哪个有效。我已经走到这一步了。

我现在想做的不是显示电子邮件地址，而是用这些数据填充表单字段。

表单字段位于由 wordpress 插件生成的表单中（因此我不能直接跳进去），这是输出的一部分：

<li class="swpm-item swpm-item-email  " id="item-swpm-5">
    <label for="swpm-5" class="swpm-desc">Email  <span class="swpm-required-asterisk">*</span></label>
    <span class="swpm-span">
        <input type="email" name="swpm-5" id="swpm-5" value="" class="swpm-text  swpm-medium  required  email "><p>Email</p>
    </span>
</li>

我用 jQuery 尝试了各种方法，但似乎无法深入了解它，这让我发疯了。

我假设一些简单的事情：

$( document ).ready(function() {
    $('#swpm-5').val(formData.display("email"));
});

但是失败了。

然后我尝试了

$( document ).ready(function() {
    var emailaddr = formData.display("email");
    $( "#swpm-5" ).val( emailaddr );
});

但还是没有运气。

有人可以帮我解决这个问题吗？我觉得我一定错过了一些重要的事情。

Answer 1

试试这个：

function getQueryStringAsObject(uri) {
    var uri = uri || location.href;
    var qsAsObject = {};
    uri.replace(
        /([^?=&]+)(?:=([^&]*))?/g,
        function($0, $1, $2) { qsAsObject[$1] = decodeURIComponent($2); }
    );
    return qsAsObject;
}

// You can replace next line by
// $( document ).ready(function() {
jQuery(function($) { 
    var qsAsObject = getQueryStringAsObject();
    $('#swpm-5').val(qsAsObject.email);
});

忘记“Aweber [提供] 的 JavaScript 块”;-)