需要帮助-代码更改下拉选项表单-更改提交到URL链接
Need Help - Code Changes For Drop Down Options Form - Change Submission to URL link
我有一个现有的下拉菜单按钮。参见http://testing.siteapp.mobi/test
现在，当用户单击蓝色下拉菜单按钮时，打开一个空白框，用户单击该框，然后出现一个下拉框，列出了4个状态。然后用户选择其中一种状态。选中后，选中的状态将填充空白字段，然后用户单击现有的"GO"按钮。
这是一个提交表单的代码。所以我需要改变它。我需要它来执行以下操作之一，哪个更简单:
1)当用户点击蓝色下拉菜单按钮时，打开一个空白框，用户点击该框，然后出现一个下拉框，列出4种状态。然后用户选择其中一种状态。选中后，选中的状态将填充空白字段，然后用户单击现有的"GO"按钮。我需要这个将用户直接带到指定的URL。这4个状态中的每一个都有一个不同的URL。因此，根据所选择的内容，它们将以不同的URL结束。
或
2)代替选择的状态填充到空白字段和用户点击"GO"按钮........只要用户从现有的下拉菜单中选择状态，用户就会被直接带到指定的URL。同上，但没有GO按钮。
你可以看到我现在在http://testing.siteapp.mobi/test，然后右键单击，然后查看页面源代码。
我很感激你的帮助。请记住，我是一个新手，所以如果你决定帮助我，你必须尽可能明确，并可能实际上向我展示正确的代码，以及在哪里插入任何需要更改我现有的代码。<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles.css?v=1.0.0.75" type="text/css" media="all" />
<link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles-ltr.css?v=1.0.0.75" type="text/css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/ie7Fix.css?v=1.0.0.75"/><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/ie8Fix.css?v=1.0.0.75"/><![endif]-->
<noscript><link href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles-no-script.css?v=1.0.0.75" rel="stylesheet" type="text/css" media="all" /></noscript>
<script type="text/javascript">
var gResources = 'http://files.mobilebuilder.net/';
var gP = '156908';
l10n = { };
</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://files.mobilebuilder.net/Scripts/jquery-1.10.0.min.js?v=1.0.0.75"></script>
<script type="text/javascript" src="/Handlers/l10n/app.l10n.js.ashx?lang=en-US&v=1.0.0.75"></script>
<script type="text/javascript" src="http://files.mobilebuilder.net/Styles/mobile-frontend/js/app.main.min.js?v=1.0.0.75"></script>
<style type="text/css">
body { background-color:#ffffff;background-image:none; }
.content-mobile { }
body, a.base-link {color:#313131;font-family:Arial, Helvetica, sans-serif;font-size:14px;}
a { color:#313131;}
.content-mobile .block-head.header { background-color:#373737;background-color:rgba(55,55,55,0);background-image:-moz-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-ms-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-o-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(55,55,55,1)),color-stop(100%, rgba(41,41,41,1)));background-image:-webkit-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#373737',endColorstr='#292929')"; }
.content-mobile .block-head.alink, .shopping-cart-notification { background-color:#373737;background-color:rgba(55,55,55,0);background-image:-moz-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-ms-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-o-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(55,55,55,1)),color-stop(100%, rgba(41,41,41,1)));background-image:-webkit-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#373737',endColorstr='#292929')"; }
.content-mobile .block-head.alink .header-link { }
.content-mobile .block .block-head.header h2 {color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:18px;}
.content-mobile .block .block-head.alink .link, .shopping-cart-notification {color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:18px;}
.content-mobile p, .content-mobile .block-feed p, .content-mobile .form label,.content-mobile .gallery h4,
.content-mobile .description, .content-mobile .form table th, .content-mobile .form table td,
.content-mobile .back-link, .content-mobile .home-link, .content-mobile .geo-locations p {color:#313131;font-family:Arial, Helvetica, sans-serif;font-size:14px;}
.content-mobile .block .block-head.alink .link, .content-mobile .block .block-head.header h2 { text-align:center; }
.gallery .gallery-navigation li { background:#ffffff; }
.content-mobile .main-footer a { color:#313131;}
.content-mobile .button-holder a, .content-mobile .button-holder-image a { color: #FFFFFF; }
.content-mobile .button-holder { padding:0;margin:15px 0; }
.content-mobile .button-holder a { margin:0 auto;padding:10px 14px;width:250px;height:25px;outline:none;border:0 none;background:transparent url(http://storage.mobilebuilder.net/common/images/library_buttons_06.png) left top no-repeat; }
.content-mobile .button-holder a .button-text { position:static;display:block;margin:0;padding:0;border:0 none;font-size:18px;background:transparent; }
.content-mobile .button-holder a .lt, .content-mobile .button-holder a .rt,
.content-mobile .button-holder a .lb, .content-mobile .button-holder a .rb { display:none; }
.coupon-snippet .coupon-border { border-color:#313131; }
</style>
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);" is_preview="False" mode="page" storage_start_url="http://storage.mobilebuilder.net/" relative_start_url="/">
<div class="content-mobile">
<div><div id="root">
<div class="block clearfix collapsible-container">
<div class="block-head header collapsible-trigger" style="margin:20px;-moz-border-radius:10px 10px 10px 10px;-o-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;background-color:#0e6db0;background-image:none;" >
<div class="wrapper">
<h2 style="padding-left:40px;">Begin Here</h2>
<span class="header-glyph">
<em></em>
</span>
</div>
</div>
<div class='block-content clearfix collapsible-content' style="background-color:#f5f5f5;background-image:none;">
<div id="contactform0" class="form">
<div>
<form id="form0" method="post" action="">
<input name="id" type="hidden" value="156908"/>
<input name="lang" type="hidden" value="en-US"/>
<input name="number" type="hidden" value="0"/>
<div class="form-fields">
<label class="field-selectbox-label">
<span class="form-field-name">Choose Service Location
<span title="Choose Service Location is required." id="span_Choose Service Location">*</span>
</span>
<select title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
<option></option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Louisiana">Louisiana</option>
</select>
</label>
</div>
<div style="display: none;"><input type="text" name="PrevSp" id="PrevSp"/></div>
<div class="ta-center">
<input id="submit_form" onclick="return checkForm(0)" class="submit_form" type="submit" value="GO" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main-footer">
<div>
<!-- See Full Website -->
</div>
</div>
<script type="text/javascript">
(function () {
var pa = document.createElement("img");
var referrerHost = "";
if (document.referrer) {
var tempA = document.createElement('a');
tempA.href = document.referrer;
referrerHost = tempA.hostname;
}
var src = "http://" + document.location.host + "/handlers/visitstatistic.ashx";
var innerPart = "path=" + document.location.pathname + "&referrer=" + referrerHost + "&r=" + (new Date()).getTime();
if (document.location.search) {
src += document.location.search;
src += "&" + innerPart;
}
else {
src += "?" + innerPart;
}
pa.width = 1;
pa.height = 1;
pa.onload = function () {
document.body.removeChild(pa);
};
pa.src = src;
document.body.appendChild(pa);
})();
</script>
</div></div>
</div>
</body>
</html>
好的，所以sideroxylon的功能比我的要精简得多，但它实际上并没有考虑到不同状态的不同URL。我确实提出了一个包罗万象的答案，你正在寻找使用"GO"按钮和我的代码包括以下功能:
- 当用户点击"开始"栏时，将表单拉下。
- 当用户更改时注册该值并将其传递给go按钮。
- 如果用户点击"GO"而没有选择任何内容，则提醒用户。
- 当用户点击"GO"时打开一个新的标签/窗口，然后重置表单元素。(注:不是打开一个新窗口，你可以通过用
_self替换_blank的所有实例来改变当前窗口。
注意:我的也要求你使用JQuery所以首先你需要在你的文档的<head>部分插入这段代码:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
然后，为了使它的功能像示例链接一样，使用以下JQuery:
// Drop the form down when user clicks the "begin" bar
$(".block-head").on("click", function(){
$(".block-content").slideToggle();
});
// Set two global variables
var state = $("select.field-select").val();
var x = document.getElementById("form0");
// Register the selection each time the user changes it and pass it to the "GO" button
$(".field-select").change(function(){
var state = $("select.field-select").val();
$("#go").on("click", function(){
event.preventDefault();
if (state === "") {
$("#choose").text(" *Please choose a state -->");
} else if(state === "Alabama"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Florida"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Georgia"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Louisiana"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
}
console.log(state); // This line is for testing purposes
});
});
// Account for when the user clicks "GO" right off the bat without choosing anything
$("#go").on("click", function(){
if(state === "") {$("#choose").text(" *Please choose a state -->");}
});
只是替换javascript代码，你目前有在你的HTML <body>与我提供的代码，你很好去!
这里是DEMO
如果你可以使用jquery，试试这个:
<select id = "stateSelect" title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
<option></option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Louisiana">Louisiana</option>
</select>
<script>
$('#stateSelect').change(function() {
var s = $('#stateSelect').val();
location.href = '/' + s + '';
});
</script>
这假设目标URL与URL的最后一部分的选项值在同一域中。如果不相同，可以在jquery函数的最后部分添加完整路径。
小提琴
如果你需要一个不同的URL(域)为每个状态，你可以添加URL作为每个选项的值，并在' location.href':
<select id = "stateSelect" title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
<option></option>
<option value="alabama.com">Alabama</option>
<option value="florida.com">Florida</option>
<option value="georgia.com">Georgia</option>
<option value="louisiana.com">Louisiana</option>
</select>
<script>
$('#stateSelect').change(function() {
var s = $('#stateSelect').val();
location.href = 'http://www.' + s + '';
});
</script>
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
