CODEWITHSUNDEEP
javascriptjqueryhtml
Reazur Rahman
Reazur Rahman

Reputation: 55

Javascript to open a new window and change header text

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"

Upvotes: 1

Views: 882

Answers (1)

lucasnadalutti
lucasnadalutti

Reputation: 5948

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

Upvotes: 1

Related Questions