CODEWITHSUNDEEP
javascripthtml
James
James

Reputation: 19

target="_blank" does not open new window

target="_blank" does not open new window and only navigates to the new page in the same window, as shown below:

<form onSubmit="return process();" target="_blank"> 
<input type="text" name="url" id="url"  placeholder="Product ID"> <input type="submit" value="Search">
</form> 
<script>
function process(){
    var url= "https://myurl.com/products/" + document.getElementById("url").value.trim();
    location.href=url; return false;
}
</script>

Upvotes: 0

Views: 1206

Answers (1)

user7148391
user7148391

Reputation:

When you click the button, the code fires immediately, and so your code is navigating to another page but in the same tab.

target="_blank" works only if the form has an action to send the data to.

use window.open(url) instead.

function process() {
  var url = "https://myurl.com/products/" + document.getElementById("url").value.trim();
  window.open(url);
  return false;
}
<form onSubmit="return process();" target="_blank">
  <input type="text" name="url" id="url" placeholder="Product ID"> <input type="submit" value="Search">
</form>

Or in your process function assign the url to the action attribute of the form, and removereturn false

I named the form f

function process() {
  var url = "https://myurl.com/products/" + document.getElementById("url").value.trim();
  document.f.setAttribute('action', url);

}
<form onSubmit="return process();" name="f" target="_blank">
  <input type="text" name="url" id="url" placeholder="Product ID"> <input type="submit" value="Search">
</form>

Upvotes: 1

Related Questions