0

我正在尝试在新窗口上打开一个网页，购买基于用户输入的 URL。我遇到的问题是它将打开一个新窗口，但不会使用生成的 URL。它将打开一个 about:blank 窗口。

我将代码放在 JSFIDDLE 中，它实际上在那里工作，但我不知道为什么它不能在我的页面上工作。但是 JSFIDDLE 实际上在原始页面中留下了 [Object]，我也想不通。

任何帮助表示赞赏。

http://jsfiddle.net/cmirab/SHFgw/2/

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;}
4

2 回答 2

0

试试这个，我也修改了你的一些 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>​
于 2012-06-05T06:49:14.213 回答
0

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

于 2012-06-05T08:26:20.023 回答