How can I change the href anchors after clicking it?

Question

I have a page that retrieves data through AJAX. In addition, I have a link to download the specified data as a CSV file.

The problem is that I need to pass some parameters along with the click event so that the server can return the correct CSV file.

Without processing, the link looks like this:

<a href="/manager/TargetResults.csv" class="black">Download Target Reports</a>

Then the ASP.NET MVC Controller action is launched, which returns the CSV. What I want to do is pass two parameters in the query string. Initially, I thought I could intercept the click event and add the data to the query string like this:

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
var queryDate = $('input[name="enddate"]', holder).val();                                    
var anchor = $(this);                                    
var link = anchor.attr('href');                                   
link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
anchor.attr('href', link);

It seems that changing the href at this point will not update the link in time, and the URL will be what it was when it hits the server?

URL , ?

Answer 1

, :

var holder = $('.hidden-information').first();                                   
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
window.location.href = this.href + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
return false; //prevent default going-to-href behavior

, , , , , :

$("#someField").change(function() {
  var holder = $('.hidden-information').first();                                   
  var newOutlets = $('input[name="newoutlets"]', holder).val();
  var queryDate = $('input[name="enddate"]', holder).val();                              
  $("a.black").attr("href", function() {
    return "/manager/TargetResults.csv" + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
  });
});

, , ctrl + click ..

Answer 2

, span :

<a href="/manager/TargetResults.csv" class="black"><span>Download Target Reports</span></a>

... click span, click .

Answer 3

javascript : -

    var holder = $('.hidden-information').first();                                   
    var newOutlets = $('input[name="newoutlets"]', holder).val();                                   
    var queryDate = $('input[name="enddate"]', holder).val();                                    
    var anchor = $(this);                                    
    var link = anchor.attr('href');                                   
    link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
    anchor.attr('href', link);
   location.href=link;

js, js.

Answer 4

href , - :

<a href="#" onclick="f1()">jhhghj</a>

:

<a href="#" onclick="f1(); return false;">jhhghj</a>

false f1 :

<a href="#" onclick="return f1();">jhhghj</a>

.... or, an unobtrusive way:

<a href="#" id="abc">jhg</a>
<a href="#" id="myLink">jhhghj</a>

<script type="text/javascript">
  document.getElementById("myLink").onclick = function() {
    document.getElementById("abc").href="xyz.php"; `enter code here`
    return false;
  };
</script>