Append an Input Field Value to a URL on a .cshtml Page

Question

I have a link to an SSRS report in my .cshtml page:

<div class="col-md-8">
  <a href="http://xxx.xx.xx.x/ReportServer/Pages/ReportViewer.aspx?%2fCompany_Reporting%2fpayr0001&rs:Command=Render&StartDate=01/09/2017" target="_blank" >Timesheet Status Report</a>
</div>

I need to pass the value from my date control as a parameter as opposed to the hard-coded date above:

<div class="form-group">
  <input type="date" class="form-control" id="datefrom">
</div>

I have tried appending an onclick=myfunction() to the url to add the date value, but can't get it to work.

function getStartDate() {
    return document.getElementById("datefrom").value; 
}

Any help would be much appreciated.

Cheers.

what is this `myfunction()` do? just posting html won't let us know what actually happen — Se0ng11, Sep 13 '17 at 01:58

score 1 · Accepted Answer · edited Sep 13 '17 at 02:05

1

Create the href of the anchor tag on the date change attribute. Build the href on the go.

$('#datefrom').change(function(){
    $('#IdOfAnchorTag').attr('href','http://xxx.xx.xx.x/ReportServer/Pages/ReportViewer.aspx?%2fCompany_Reporting%2fpayr0001&rs:Command=Render&StartDate=' + $('#datefrom').val() );
});

Check the strings accordingly..

edited Sep 13 '17 at 02:05

Luka Čelebić

1,083
11
21

answered Sep 13 '17 at 02:01

Sameer

383
1
10

`IdOfAnchorTag` means `id` of the anchor tag.. Right? ok... But it has no `id` in OP code. Edit your answer about it ;) I mean... Explanations. (lol) You got what OP tries to do, I think. – Louys Patrice Bessette Sep 13 '17 at 02:05
Haha.. Common.. It would have an Id, class name.. something.. Considering the data he gave, I imagined it would be there. – Sameer Sep 13 '17 at 02:08

ryanwebjackson · Answer 2 · 2017-09-13T02:14:45.783

This is what you're trying to do, as far as I can tell (duplicate question?):
append to url and refresh page

To get the date in the correct format, you'll have to do something like the following in the body of your function:
new Date($('input[type=date]').val()).toLocaleFormat();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat

Also, you're probably going to want to use 'onblur'/the blur event for the date input, or wire up your event handler function to a new button specifically for that purpose. This is because onclick/the click event will fire as soon as you click on the date input (which could open some sort of calendar widget, depending on the browser and browser version).

score 0 · Answer 3 · answered Sep 13 '17 at 02:25

Before you pass your date value to the url, You try converting your date to dd-MM-yyyy or MM-dd-yyyy instead of dd/MM/YYYY. Because I think that when the url will misunderstand "/", so you should replace with "-". Then if necessary, you can convert back to the old format.

Append an Input Field Value to a URL on a .cshtml Page

3 Answers3