Html | set <a> href url with jQuery

Question

I want to load html in specified situation. For example, signIn button that we can see on the website only load the page (html) if the id and password are correct.

<a class="btn btn-primary btn-lg" id="singIn" href="#" role="button">Sign In</a>

This is the signIn button in html.

$('#singIn').click(function() {
    var userID = $('#userID').val();
    var userPW = $('#userPW').val();
    var tempID = "test";
    var tempPW = "12345";

    if (userID === tempID && userPW === tempPW) {
        alert("userID : " + userID + ", userPW : " + userPW);
      //TODO : load the local html file.
      //var url = $(this).attr("href");
    } else {
        alert("userID : " + userID + ", userPW : " + userPW);
      //TODO : load the other local html file or just alert.
    }
});

This is the part (if/else statement) where I want to load my local html file as I mention first.

How can I do this? Please let me know. Thank you.

Answer 1

Try something like this,

  $(this).attr('href', 'local url goes here');

Answer 2

Try a validate function with a hidden button for the actual submit:

$('[type="button"]').click(function() {
  var valid = true;
  $.each($('input'), function() {
    valid = valid && $(this).val().length > 0;
  })
  if (valid) {
    var location = 'http://www.rootdir.com/?user=' + $('input').get(0).value;
    location += '&password=' + $('input').get(1).value;
    alert(location);
    //  window.location.href = location;    <-- uncomment to redirect to this url
  } else {
    alert('Please fill out all fields!');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Enter Name" />
<input type="password" placeholder="Enter Password" />
<button type="button">Submit</button>
<button type="submit" id="realSubmit" style="display:none"></button>