CODEWITHSUNDEEP
javascripthtml
Giliweed
Giliweed

Reputation: 5177

how to open a new web page on the same tab by clicking a button?

I a button on my web page. its code is:

/* code of the other forms  */
<form method="get"  onsubmit="return validation()" > 
     <input type="submit" id="x" value="Search"  onmouseover="mover(this)" onmouseout="mout(this)" /> 
</form>

when I click on the button is should validate the value of the other forms and open new web page on the same tab. I have no problem with the validation part. the problem is the new web page opens in a new tab which is not what I want. So far the code is:

 function validation(){
    var x=document.forms["flyrics"]["lyrics"].value;
    if (x==null || x=="")
    {
        alert("Search without Lyrics?");
        return false;
    }

    var y=document.forms["fartist"]["artist"].value;
    if (y==null || y=="")
    {
        alert("Search without Artist Name?");
        return false;
    }

            window.open("songList.html", "_self");      
}

In the last line, it is the code to open new page on the same tab. but each time I click on the button a new tab opens. How do I correct it? I also tried using the following codes too. but I don't know why none of them worked to open the new page on the same tab.

 location.href = "songList";
 window.location="songList.html";
 window.open("songList.html",  "currentWindow", "");

Where is the actual problem? need help to fix it. I need to do this using javascript and html only.

Upvotes: 1

Views: 10301

Answers (4)

Onel Sarmiento
Onel Sarmiento

Reputation: 1626

I think what you want to achieve is to validate the search first before submitting the form? You have to add action attribute in the form tab and move the return validation() to submit button.

Look at my example below:

This will allow you to load the songList.html on the same Tab.

function validation() {
    var x=document.forms["flyrics"]["lyrics"].value;
    if (x==null || x=="")
    {
        alert("Search without Lyrics?");
        return false;
    }

    var y=document.forms["fartist"]["artist"].value;
    if (y==null || y=="")
    {
        alert("Search without Artist Name?");
        return false;
    }
} 
<!DOCTYPE html>
<body>
<form id="flyrics">
        <input type="text" id="lyrics" value="">
</form>
<form id="fartist">
        <input type="text" id="artist" value="">
</form>

/* code of the other forms  */
<form id="songList" action="songList.html">
        <input type="submit" id="x" value="Search" onclick="return validation()"/> 
</form>
</body>

Upvotes: 1

Anant Vaibhav
Anant Vaibhav

Reputation: 365

Try this

window.location.replace("songList.html");

This works fine for me!

Upvotes: 0

Divey
Divey

Reputation: 1719

Try using window.location.assign:

window.location.assign("songList.html");

Upvotes: 0

Toby Allen
Toby Allen

Reputation: 11211

What if you just do

        window.open("songList.html");

Upvotes: 0

Related Questions