Question

我正在尝试在新窗口中打开网页，根据用户输入构建网址。我遇到的问题是它将打开一个新窗口，但不会使用生成的URL。它将打开一个about：空白窗口。

我把代码放在JSFIDDLE中，它实际上在那里工作，但我无法弄清楚为什么它不能在我的页面上工作。但是JSFIDDLE实际上离开了原始页面说[Object]，我也想不出来。

感谢任何帮助。

HTML：

 <form id="search" name="Safe">
    <h1>How Safe</h1>
    <h2>is your Neighborhood?</h2>
    <p class="p1">Enter your zip to find crime statistics in your area:</p>
    <input type="text" name="search">
    <input type="hidden" name="url" id="url">
    <a class="button1" href="javascript:window.open(document.Safe.url.value)">Search</a>
    </form>

JQuery的 var partFields = $（'＃search'）。val（'＃search'）。not（'＃url'）;

$(partFields).change(function() {
var urlB = 'http://classic.crimereports.com/map?';
var urlE = '&searchButton.x=0&searchButton.y=0';
var urlValue = urlB + partFields.serialize() + urlE;

$('#url').val(urlValue); // set the hidden input value
});

CSS：

 #search {background:#232426;padding:5px 0 21px 24px;color:#737985;margin:0 0 30px;line height:15px;}
    #search h1 {font-size:71px;line-height:1.2em;color:#ffad01;letter-spacing:-4px;}
    #search h2 {font-size:35px;letter-spacing:-1px;margin:0 0 10px;}
    #search input {border:none;background:#37383a;padding:9px 10px;margin:0 4px 0 0;width:240px;}

Answer 1

试试这个，我也修改了你的一些js和标记。 JSFiddle

var $searchbox = $('#search input[name="search"]')
    $searchbox.change(function() {
    var urlB = 'http://classic.crimereports.com/map?';
    var urlE = '&searchButton.x=0&searchButton.y=0';
    var urlValue = urlB + $searchbox.serialize() + urlE;

    $('.button1').attr('href',urlValue); // set the hidden input value
});


<form id="search" name="Safe" >
                    <h1>How Safe</h1>
                    <h2>is your Neighborhood?</h2>
                    <p class="p1">Enter your zip to find crime statistics in your area:</p>
                    <input type="text" name="search">
                    <input type="hidden" name="url" id="url">
                    <a class="button1" href="javascript:window.open(document.Safe.url.value)" target="_blank">Search</a>
                </form>

Answer 2

您应该将脚本放在html表单之后，因为当脚本运行时，它会搜索id为“search”的元素，该元素当前不存在，因此不存在的输入字段的值将返回为一个空字符串。

生成，然后使用JQuery打开URL的最佳方法

2 个答案: