Javascript to open a new window and change header text

Question

I have four button on a form. Whenever one of the button is clicked i want javascript to redirect to the new page and change the header depending on what button was clicked. I tried using window.document.write to replace the header text but that didn't work. Here is my code:

$('#claimant_search_button', '#ca_search_button', '#emp_search_button',
            '#ea_search_button')
    {

        if (this.id == 'claimant_add_button') {

            window.location("https://dol-oalj-dev.entellitrak.com/etk-dol-oalj-dev/tracking.base.create.request.do?dataObjectKey=object.maintenanceForm&button=claimant");

        } else if (this.id == 'ca_add_button') {

            window.location("https://dol-oalj-dev.entellitrak.com/etk-dol-oalj-dev/tracking.base.create.request.do?dataObjectKey=object.maintenanceForm&button=ca");

        } else if (this.id == 'emp_add_button') {

            window.location("https://dol-oalj-dev.entellitrak.com/etk-dol-oalj-dev/tracking.base.create.request.do?dataObjectKey=object.maintenanceForm&button=emp");

        } else if (this.id == 'ea_add_button') {

            window.location("https://dol-oalj-dev.entellitrak.com/etk-dol-oalj-dev/tracking.base.create.request.do?dataObjectKey=object.maintenanceForm&button=ea");

        }

    }

Here is the header that i have on the redirected page:

<h1 id ="title_form "style="margin-bottom: 25px;"> Maintenance Form </h1>

If the user clicks claimant_search_button. I want the page to redirect to:

Redirect Link

and then change the header to say "Claimant Maintenance Form"

The key question: is the new page you are trying to redirect to, located on the same domain as your original page? if no, then open the console and read the error message that you receive when you attempt to alter the new page's content. — Banana
– Banana, Commented Mar 14, 2016 at 14:16
Are you using ajax/templates of some sort? Why don't you just set the header to what they need to be in the new pages? You're also missing a character in your closing tag in the HTML. — A.Sharma
– A.Sharma, Commented Mar 14, 2016 at 14:18
You mean the page should do a full redirect? If so, I don't think Javascript should be responsible for the redirection — lucasnadalutti
– lucasnadalutti, Commented Mar 14, 2016 at 14:18
@Banana the url is in the same domain and there is nothing that comes up in the console. — Reazur Rahman
– Reazur Rahman, Commented Mar 14, 2016 at 14:38
@ReazurRahman in that case i think it would be best to follow @lucasnadalutti's answer and alter the new page in a way that it will set its own header based on the value of button from the query string that will be set from the original page — Banana
– Banana, Commented Mar 14, 2016 at 14:39

Community · Accepted Answer · 2017-05-23 12:19:26Z

1

I noticed that the URL is the same in every case, and I understand that you want the browser to do a full redirect to that URL. So, it seems to me that the cleanest solution is to add a query param in your URL which contains an identifier of the button that was clicked. Example:

<a id="claimant_search_button" href="https://dol-oalj-dev.entellitrak.com/etk-dol-oalj-dev/tracking.base.create.request.do?dataObjectKey=object.maintenanceForm&button=claimant">Button text</a>
<!-- Other buttons here -->

Note the button=claimant that was added to the URL. This way, you don't need Javascript for this. You will need it, though, to get the button query param in the URL and set the header accordingly.

EDIT: in the destination page:

var button_name = getParameterByName('button');

if(button_name=="claimant"){
    document.getElementById("title_form").innerText = "Claimant Maintenance Form";
}

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    url = url.toLowerCase(); // This is just to avoid case sensitiveness  
    name = name.replace(/[\[\]]/g, "\\$&").toLowerCase();// This is just to avoid case sensitiveness for query parameter name
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Source

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Mar 14, 2016 at 14:24

lucasnadalutti

5,9882 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Reazur Rahman Over a year ago

but then i also need to be able to change the header on the redirected page how do i do that. window.document.write didn't work form me

A.Sharma Over a year ago

Note that with this method, you would need to get the URL and perform string operations to get the parameter. Pure Javascript doesn't have anything that deals with querying string parameters. You could use PHP for it, but considering the person asking the question is a beginner web developer, I don't think that this completely answers the question.

Banana Over a year ago

@A.Sharma reload the page mate

A.Sharma Over a year ago

@Banana I agree that what you have posted will work, but the OP's question is incomplete. The URL's are all similar, and I am confused as to the exact logic of his code.

Reazur Rahman Over a year ago

@Banana Got this to work. Thanks all of you for your help.

|

Collectives™ on Stack Overflow

Javascript to open a new window and change header text

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related