Question

This problem seems to be odd to me and I can’t seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:

<form id="form1" method="get"> <!-- Note: No Action property -->
    <div>
       <h1>
           Simple Test Form</h1>
       <table border="0" width="400">
           <tr>
               <td align="right">
                   All of these words
               </td>
               <td>
                   <input name="txtAll" id="txtAll" type="text" value="testing keyword" />
               </td>
           </tr>
           <tr>
               <td colspan="2" align="center">
                   <input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
               </td>
           </tr>
       </table>
   </div>
</form>

MyJS file is as:

<script type="text/javascript">
    function myJS(which) {
        var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";

        //capture all values from the form
        var allWords = document.getElementById("txtAll").value;

        var morestring = ""; //More data manipulation here.....
        var url = CONSTANT_SITE_TARGET + allWords + morestring;

        window.open(url);
        //window.location = url;          //Doesn't work
        //window.location.href = url;     //Doesn't work
        //self.location = url;            //Doesn't work
        //top.location = url;             //Doesn't work
    }
</script>

As you can see, it doesn’t redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form… > tag, I don’t put the action property in it. I don’t want to open a new browser, just redirect to the new url within the same browser.

Is there a way to redirect it?

Answer 1

Here

function myJS(which) {
    var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";

    //capture all values from the form
    var allWords = which.txtAll.value;

    var morestring = ""; //More data manipulation here.....
    return CONSTANT_SITE_TARGET + allWords + morestring;
}


<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
    <h1>
        Simple Test Form</h1>
    <table border="0" width="400">
        <tr>
            <td align="right">
                All of these words
            </td>
            <td>
                <input name="txtAll" id="txtAll" type="text" value="testing keyword" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" name="Submit" value="Submit" />
            </td>
        </tr>
    </table>
</div>
</form>

to elaborate on a comment:

<script>
window.onload=function() {
  document.getElementById("Submit").onclick=function() {
     var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
    //capture all values from the form
    var allWords = document.getElementById("txtAll".value;
    var morestring = ""; //More data manipulation here.....
    location = CONSTANT_SITE_TARGET + allWords + morestring;
  }
}
</script>
<div>
    <h1>
        Simple Test Form</h1>
    <table border="0" width="400">
        <tr>
            <td align="right">
                All of these words
            </td>
            <td>
                <input name="txtAll" id="txtAll" type="text" value="testing keyword" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" id="Submit" value="Submit" />
            </td>
        </tr>
    </table>
</div>