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, Mar 14 '16 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, Mar 14 '16 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, Mar 14 '16 at 14:18
@Banana the url is in the same domain and there is nothing that comes up in the console. — Reazur Rahman, Mar 14 '16 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, Mar 14 '16 at 14:39
@A.Sharma Fixed the closing tag character. What can i use to redirect to the new page and change the header. — Reazur Rahman, Mar 14 '16 at 14:40
@Banana How do i go about doing that. My knowledge in web development is really little to none. — Reazur Rahman, Mar 14 '16 at 14:42
@ReazurRahman i have edited and completed his answer, check it out. — Banana, Mar 14 '16 at 14:46
@ReazurRahman you need to provide more information to your question. For example, are you only using Javascript/JQuery? All of the URL's for each button are the same, and I'm having a hard time really understanding the exact logic behind what you're trying to do here. In addition, where is the event being triggered in your code? I am not sure the code you have given us is complete. For example, are you using PHP to reload the page on a successful click with a `$_SESSION` variable set to hide the login form? Does clicking a button open another file in your server? What's going on here? — A.Sharma, Mar 14 '16 at 15:03
Without a separate framework, it will be difficult to send data between pages without sending parameters in the URL directly or posting to the HTTP header. The route parameter method was shown by @Banana below. — A.Sharma, Mar 14 '16 at 15:16

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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 '17 at 12:19

Community

1
1

answered Mar 14 '16 at 14:24

lucasnadalutti

5,818
1
28
48

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 – Reazur Rahman Mar 14 '16 at 14:33
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. – A.Sharma Mar 14 '16 at 14:53
@A.Sharma reload the page mate – Banana Mar 14 '16 at 14:57
@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. – A.Sharma Mar 14 '16 at 15:09
@A.Sharma i think he has a template destination page that is supposed to show different content depending on the button which lead to the page, he simply asked the question regarding the header as an example but in my opinion he intends to alter a bit more than just a header. his approach to the varying content was just wrong, its the destination page which is supposed to set its own content, not the origin page. – Banana Mar 14 '16 at 15:16
@Banana This is not working. Just create a simple html page with a header and try redirecting to the page and changing the header it doesn't work. – Reazur Rahman Mar 14 '16 at 15:18
@ReazurRahman because the code from the edit needs to be placed in the new **Destination** page. not in the origin page. moreover, look into **Accessing DOM elements after page loads** – Banana Mar 14 '16 at 15:18
@A.Sharma Here is what i am trying to accomplish. I have two form one is called case input and the other is called maintenance form. There is 4 buttons in the case input form. All of the button should redirect to the same url but just change the text of the
depending on the button that was clicked in the case input form. I am not sure if that makes any sense for you
– Reazur Rahman Mar 14 '16 at 15:20
@Banana tag is a hyperlink tag. I need the button to be able to redirect to the page not a hyperlink tag. – Reazur Rahman Mar 14 '16 at 15:21
@ReazurRahman you are missing the point. the header **SHOULD NOT** be set from the original page. it should be set from **THE DESTINATION PAGE**. how you redirect makes no difference. regardless of how you redirect, just append `&button=claimant` to the query string, and in the destination page read this attribute and set the header accordingly – Banana Mar 14 '16 at 15:22
@ReazurRahman please realize that Javascript variables are reloaded every time you do a hard refresh of a page. Without using a server side language or another framework like Angular, your best bet is to pass a parameter the way that this answer describes. If you are using a framework already that gives you the ability to route, use ajax, and templates, please provide what framework you are using. What you are doing is reloading the page every time. Thus, the click is rendered useless as the Javascript is refreshed. Please remember that Javascript is a front-end language. – A.Sharma Mar 14 '16 at 15:24
@Banana That worked. I have one small problem tag is href tag how do i add the same thing to my buttons tag: `` since these buttons are dynamically created is there a way to pass the url param dynamically. – Reazur Rahman Mar 14 '16 at 15:37
@ReazurRahman simply create a `button_click(btn){}` function and in the new buttons add `onclick="button_click(this)"` and inside the button click function check for `if(btn.id=="claimant_search_button"){}` – Banana Mar 14 '16 at 15:41
@Banana I updated my code above to using Jquery. Do you think that would work to redirect to the new page when a button is clicked? – Reazur Rahman Mar 14 '16 at 16:00
1

@Banana Got this to work. Thanks all of you for your help. – Reazur Rahman Mar 14 '16 at 16:25

Javascript to open a new window and change header text

1 Answers1

depending on the button that was clicked in the case input form. I am not sure if that makes any sense for you