使用选择值在提交时构建URL

Question

我正在尝试根据几个选择框的选择来构建URL。我找到了几个例子，人们想要根据选择框选择将用户重定向到URL而不点击提交按钮，但是我无法创建一个脚本，该脚本获取几个选择框的所有值，然后构建URL并在提交时将用户发送到该URL。这是我到目前为止的代码，但它不起作用：

<form method="post" id="searchform">
<select class="dropdown" id="country">
<option value="england">england</option>
</select>
<select class="dropdown" id="sleeps">
<option value="2">2</option>
</select>
<select class="dropdown" id="pets">
<option value="3">3</option>
</select>
<input type="submit" name="button" id="button" onclick="showURL();" />
</form>

function showURL(){
    var d1 = $("#country").find(":selected").attr("value");
    var d2 = $("#sleeps").find(":selected").attr("value");
    var d3 = $("#pets").find(":selected").attr("value");
    var url = ("http://www.blah.com/"+d1+"?sleeps="+d2+"&pets="+d3);

    window.location = url;
    return false;
}

http://jsfiddle.net/RrS8L/

有人可以建议一种方法来完成这项工作吗？

谢谢！

杰米

Answer 1

在创建DOM后，只需将代码置于正文中即可。

fiddle Demo

function showURL() {
    var d1 = $("#country").find(":selected").attr("value");
    var d2 = $("#sleeps").find(":selected").attr("value");
    var d3 = $("#pets").find(":selected").attr("value");
    var url = ("http://www.blah.com/" + d1 + "?sleeps=" + d2 + "&pets=" + d3);
    alert(url);
    window.location = url;
    return false;
}

<小时/> 或者将代码放在head

中

fiddle Demo

<小时/> 如果您想要由Tom Chung

评论的禁用表单提交

<input onclick="showURL();return false;"

Answer 2

以下是解决方案

这两个例子都有效：

http://jsfiddle.net/RrS8L/9/

http://jsfiddle.net/RrS8L/10/

<input onclick="showURL();return false;" type="submit" name="button" id="button" />

或者

function showURL(event) {
    event.preventDefault();
    var d1 = $("#country").find(":selected").attr("value");
    var d2 = $("#sleeps").find(":selected").attr("value");
    var d3 = $("#pets").find(":selected").attr("value");
    var url = ("http://www.blah.com/" + d1 + "?sleeps=" + d2 + "&pets=" + d3);
    window.location = url;
}

Answer 3

使用Javascript链接的艺术

howderek的一个方便的小答案

JSFiddle：http://jsfiddle.net/howderek/RrS8L/22/

第1步：创建使用JavaScript传递数据的链接

你已经有一个很好的小函数来生成一个URL，但它需要一点修改才能更容易解析。我将所有内容都放在?之后，以便更好地区分传递到该页面的位置和数据，以及更好地组织代码。这是我修改后的showURL

function showURL() {
    var d1 = $("#country").find(":selected").attr("value"),
        d2 = $("#sleeps").find(":selected").attr("value"),
        d3 = $("#pets").find(":selected").attr("value"),
        url = encodeURI('http://jsfiddle.net/howderek/RrS8L/20/show/light/?country=' + d1 + "&sleeps=" + d2 + "&pets=" + d3);

    alert(url);
    document.location = url;
}

我摆脱了你的inline onclick，我把表单改成div而不是表单（以防止提交），然后我将input type="submit"改为button

我还创建了一个段落来显示结果。

<p id="results">There was no information passed through the URL.</p>
<div id="dogform">
    <select class="dropdown" id="country">
        <option value="England">England</option>
        <option value="France">France</option>
        <option value="the United States of America">Murica</option>
        <option value="Russia">Russia</option>
    </select>
    <select class="dropdown" id="sleeps">
        <option value="a few">Less than 4 hours</option>
        <option value="four to eight">4-8 hours</option>
        <option value="many">More than 8 hours</option>
    </select>
    <select class="dropdown" id="pets">
        <option value="nonexistent">None</option>
        <option value="beloved">One</option>
        <option value="many">Lots</option>
    </select>
    <button id="submit">Do stuff.</button>
</div>

第2步：使用JavaScript读取网址

我一段时间写了一个函数来读取URL键。它返回由键命名的字符串组成的对象。这使您可以轻松读取存储在URL中的值。

function urlAnalyze(url) {
    if (url == undefined) {
        var url = document.location.toString();
    }
    url = unescape(url);
    //seperates the parts of the url
    var parts = url.split("?");
    //splits into sperate key=values
    if (parts[1] == undefined) {
        return 1;
    }
    var keyValues = parts[1].split("&");
    var key = function () {}
    keyValues.forEach(function (keyValue) {
        var keyAndValue = keyValue.split("=");
        key[keyAndValue[0]] = keyAndValue[1];
    });
    return key;
}

$('#submit').click(showURL);

keys = urlAnalyze();

if (keys['country']) {
    $('#results').html('In ' + keys['country'] + ', people like to sleep for ' + keys['sleeps'] + ' hours after walking their ' + keys['pets'] + ' pets.');
}

我也很容易看到JSFiddle里面的URL是什么：

$('#results')[0].innerHTML += '<br><br>URL of this: ' + document.location;

您必须使用指向您网站的相应链接替换JSFiddle的链接，但我相信这应该可以回答您的问题。

以下是我在其中一个项目中使用我的函数URLTools的示例：http://howderek.com/projects/WordEngine/?q=this%20value%20was%20passed%20through%20the%20URL%20and%20read%20by%20javascript

享受！