Question

对于这个问题，＆＃34; example.co.uk＆＃34;将是用户当前所在的页面和＆＃34; otherexample.co.uk＆＃34;将是我想要链接到的网站。

用户加载example.co.uk并从html日期输入@Html.TextBoxFor(model => model.Date, new { id = "dateselected", type = "date", required = "required", @class = "form-control" })中选择日期然后点击<a href = "">链接，转到另一个显示该日期可用广告位的网站。我已经尝试了很多解决方案，似乎无法开展工作。

我的代码： HTML：日期选择器 -

<label class="col-sm-2 control-label" style="max-width:100%;">
    Date Required: 
</label>
<div class="col-sm-3">
    @Html.TextBoxFor(
        model => model.Date, new {
            id = "dateselected", 
            type = "date",
            required = "required", 
            @class = "form-control" 
        }
     )

href link -

<a class="btn btn-primary" target="_blank" href 
="otherexample.co.uk/abuilding&date=" >View Availability</a>

所以我想要做的就是使用Javascript从日期输入中获取所选日期，并将其添加到href中的网址末尾，这样当用户点击＆＃34;查看可用性＆＃34;它将它们发送到带有网址的新页面 - otherexample.co.uk/abuilding&date=06-21-2018

我在其他网站上找到的选项（包括此网站）如果我指向同一网站上的其他网页，则效果会很好。但似乎无法为外部网站工作。有任何想法吗？

Answer 1

您可以为链接上的click事件添加事件监听器。在处理程序函数中，您可以将日期连接到链接href属性。然后使用window.location.href重定向用户。

在下面的代码段中：

我用dateselected作为id对日期字段进行了硬编码。
我修复了链接的href属性：https://otherexample.co.uk/abuilding?date=

＆＃13;

document.getElementById("viewAvail").addEventListener("click", viewAbility);

function viewAbility(event) {
  var selectedDate = document.getElementById("dateselected").value;
  window.location.href = event.target.href + selectedDate;
  // preventing de default action of the "click" event since we're changing the windows location
  event.preventDefault();
}

＆＃13;

<input type="text" id="dateselected" value="02/06/2018"/>
<a id="viewAvail" class="btn btn-primary" target="_blank" href 
="https://otherexample.co.uk/abuilding?date=" >View Availability</a>

＆＃13;

Answer 2

也许这会帮助你弄清楚你想要什么输入日期并单击按钮哟将获得完整的URL

function get_date(){
var date = document.getElementById("dateselected").value;
 var date_url= document.getElementById("url").href;
 document.getElementById("url_date").innerHTML = date_url +date;
}

<html>
<body onload="">
<label class="col-sm-2 control-label" style="max-width:100%;">Date Required: 
</label><div class="col-sm-3">
 enter date: <input type="date" id = "dateselected" required = "required" class = "form- 
control"><br>
</div>

<a class="btn btn-primary" id="url" target="_blank" href 
="otherexample.co.uk/abuilding&date=" >View Availability</a>
<button id="click" onclick = "get_date()">click</button>
<p id="url_date"></p>
</body>
</html>

HTML href引用JavaScript变量url

2 个答案: