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

时间:2015-09-04 10:56:27

标签: javascript jquery wordpress forms aweber

这让我疯狂,我一直在追求解决方案而没有运气......

我有一个表单注册页面,它使用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 );
});

但仍然没有运气。

有人可以给我一些帮助吗?我觉得我一定错过了至关重要的事情。

1 个答案:

答案 0 :(得分:0)

试试这个:

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 [提供]大块&#34; ; - )