Question

我有一个使用URL参数动态填充的表单。问题是URL中的一个参数选择下拉列表中的一个选项，然后show一个字段。该字段未在页面加载时显示。

请注意，我有一个简单的页面加载检查，应该显示该字段，所以我想知道是否在document.ready状态之后传递了URL参数。

以下是我使用的网址： https://donate.globaltc.org/#designation=3&missionary=Jerry%20Nance

下拉列表正在选择正确的选项。

这是我的JS：

// Show or hide field
var $missionary = $('.missionary');
    var $designation = $('#designation');
    var $project = $('.project');

    if($designation.val() != 3){
        $missionary.hide();    
    } else {
        $missionary.show();    
    }
// Handle URL parameters
var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
    for(var i = 0; i < hashParams.length; i++){
        var p = hashParams[i].split('=');
        document.getElementById(p[0]).value = decodeURIComponent(p[1]);
    }

HTML表单：

<div class="form-group col-sm-6">
  <label for="exampleInputEmail1">How would you like this gift to be designated?</label>
   <select class="form-control" id="designation" name="designation">
   <option value="1" selected="selected">Most Urgent Need</option>
   <option value="3">A Global Team Member</option>
   </select>
 </div>
 <div class="form-group col-sm-6 missionary">
   <label for="missionary">Name of Team Member</label>
   <input type="text" class="form-control" id="missionary" name="missionary">
 </div>

Answer 1

我在代码中发现了一个错误，但它没有解决我的问题。错误：

if($designation.val() != 3){ //Should be string not int

这是我做这项工作的黑客方式。

setTimeout(function(){
    if($designation.val() == '3'){
        $missionary.show();    
    } else {
        $missionary.hide();       
    }
}, 100);

我仍然希望得到更明确的答案，说明为什么会发生这种情况。

Answer 2

在if语句中使用它之前，您可以使用var designationValue = parseInt($designation.val(), 10);来确定字段的int值。

parseInt

的文档

传递特定URL时显示隐藏的表单字段

2 个答案: